「HTML」表单-CFANZ编程社区

表单
input 控件
label标签
textarea控件(文本域)
select下拉菜单
form表单域
HTML5新表单属性
- autocomplete(自动完成)
- autofocus(获取焦点)
- form(表单关联)
- multiple(多选)
- placeholder(占位提示)
新的表单元素
- datalist
- keygen
- output
input的新type属性介绍
- input表单验证
- w3cSchool 查阅位置
- email标签
- required属性
- pattern 自定义验证规则
- 自定义验证信息
- 小结

表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

input 控件

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标签还可以定义很多其他的属性，其常用属性如下表所示。

label标签

label 标签为 input 元素定义标注（标记）。

作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

如何绑定元素呢？

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
       文本内容
</textarea>

select下拉菜单

使用select控件定义下拉菜单的基本语法格式如下

<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
       ...
</select>

注意：

1.<select></select>中至少应包含一对<option></option>。

2.在option 中定义selected =" selected "时，当前项即为默认选中项。

form表单域

在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：

<form action="url地址" method="提交方式" name="表单名称">
       各种表单控件
</form>

常用属性：

1.Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。

2.method 用于设置表单数据的提交方式，其取值为get或post。

3.name 用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都应该有自己表单域。

HTML5新表单属性

autocomplete(自动完成)

取值:
- on:开启
- off:关闭
适用情况:
- 一般用在input标签中
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>

使用注意:
- 标签需要添加name属性
- 只有提交了一次以后才会出现提示

autofocus(获取焦点)

使用方法:
- 需要哪个表单元素获得焦点,只需要添加该属性即可
- 不需要赋值,只需要添加属性即可,见示例代码
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄<input type="number" name="telNum" autofocus>
    <input type="submit">
</form>
</body>
</html>

使用注意:
- 在没有该属性之前,能够使用JavaScript来指定元素
- 如果页面中多个元素设置了该属性,最后一个会获得焦点

form(表单关联)

使用方法:
- 想要某个表单外元素跟该表单建立联系,只需要为元素添加属性form="表单id"设置为想要建立联系的表单id即可
示例代码
- 让表单外输入爱好的input标签跟id为userForm表单建立联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>

使用注意:
- 虽然这个属性可以让元素的放置位置不在成为限制,但是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题以外,也为了提升代码的可读以及可维护性

multiple(多选)

适用情况:
- 该属性可以用在type为file标签内
示例代码
- 选择多文件时,需要按住ctrl按钮

<input type="file" multiple >

placeholder(占位提示)

使用方式:
- 直接为该属性赋值想要提示的内容即可
适用情况:
- 想要不通过JavaScript来实现提示功能

示例代码:

显示效果如下

<input type="text"placeholder="输入用户名">

新的表单元素

datalist

测试代码:

注:测试代码只是body内部的代码

网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移动">移动</option>
    <option value="187xxx" label="联通">联通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

datalist:
- id:id属性,想要使用该datalist的元素需要通过list=id的方式来指定
option:
- value:指定具体的值
- label:提示信息
注意:
- 如果input的type为url,option中对应的value需要使用http://开始

keygen

使用频率:低

output

使用频率:低

input的新type属性介绍

首先让我们来看一张表

其中标有红色5的代表HTML5中推出的
更详细内容请查阅网址:w3cSchool-h5-type

测试代码:

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          form {
              width: 80%;
              background-color: #F7F7F7;
          }
          label {
              display: block;
              width: 80%;
              margin: 0 auto;
              font-size: 30px;
              font-weight: bold;
          }
          input {
              display: block;
              width: 80%;
              margin: 0 auto;
          }
      </style>
  </head>
  <body>
  <form action="">
      <fieldset>
          <legend>测试type属性
          </legend>
          <label for="">color:
          </label>
          <input type="color">
          <label for="">date:
          </label>
          <input type="date">
          <label for="">datetime:
          </label>
          <input type="datetime">
          <label for="">datetime-local:
          </label>
          <input type="datetime-local">
          <label for="">month:
          </label>
          <input type="month">
          <label for="">week:
          </label>
          <input type="week">
          <label for="">time:
          </label>
          <input type="time">
          <label for="">email:
          </label>
          <input type="email">
          <label for="">number:
          </label>
          <input type="number">
          <label for="">range:
          </label>
          <input type="range">
          <label for="">search:
          </label>
          <input type="search">
          <label for="">tel:
          </label>
          <input type="tel">
          <input type="submit">
      </fieldset>
  </form>
  </body>
  </html>

运行效果

新type属性的注意要点

点击不同type的input标签会有不一样的弹出内容
如果发现w3cschool内容不全,建议去MDN搜索
并不是每一个新type属性,在PC端都有不同的显示
color, date, number 这些效果较为明显
兼容性问题
- 由于ie的兼容性的问题,在不同的浏览器中显示效果不尽相同
- 但是在移动设备上的支持效果较好,可以将该页面发送到手机进行测试
- 实际开发中可以按照需求选用

input表单验证

w3cSchool 查阅位置

[w3cSchool_事件属性]w3School
[w3cSchool_input标签]w3cSchool

email属性

示例代码:
- 当我们点击提交按钮时,如果输入的email格式不正确,会弹出提示信息
- email标签并不会验证内容是否为空，这个需要注意

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    <input type="submit">
</form>
</body>
</html>

required属性

使用方法:
只需要添加required属性即可,不需要赋值

示例代码:
当控件没有输入任何内容直接点击提交时,会弹出提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required>
    <br/>
    <input type="submit">
</form>
</body>
</html>

pattern 自定义验证规则

使用方法:

在需要添加自定义验证规则的元素中添加required标签
使用正则表达式编写验证规则

示例代码:

当我们输入的内容跟验证条件不符时,就会弹出对应的提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}">
    <br/>
    <input type="submit">
</form>
</body>
</html>

自定义验证信息

使用方法:

注册事件:oninput:输入时,oninvalid验证失败
设置自定义信息dom.setCustomValidity("这里输入提示信息");

示例代码:
输入时,会弹出oninput绑定的代码

验证失败时,会弹出oninvalid绑定的代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    email:<input type="email" name="userEmail">
    <br/>
    tel:<input type="tel" required pattern="[0-9]{3}" id="telInput">
    <br/>
    <input type="submit">
</form>
</body>
</html>
<script>
    var telInput = document.getElementById("telInput");
    // 正在输入时
    telInput.oninput=function () {
        this.setCustomValidity("请正确输入哦");
    }
    // 验证失败时
    telInput.oninvalid=function(){
        this.setCustomValidity("请不要输入火星的手机号好吗？");
    };

</script>