「HTML」表单

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

表单

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

表单.png

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

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

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

input 控件

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

input属性.png

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新表单属性

最完整的表单属性可以通过查阅w3cschool-h5表单属性获取,这里仅针对常见属性讲解

autocomplete(自动完成)

能够记录用户的输入,并且给予提示,这就是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(获取焦点)

当某一页有很多个可供输入的元素时,用户需要使用鼠标点选元素进行输入,为了提升用户体验,我们可以通过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标签中,这个属性的出现让表单元素的放置位置不在受到约束

使用方法:
- 想要某个表单外元素跟该表单建立联系,只需要为元素添加属性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(多选)

如果想要在某个input标签中选择多个值,可以使用该属性

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

<input type="file" multiple >

placeholder(占位提示)

输入元素内默认显示一些提示信息,当用户输入之后自动消失,这种效果我们需要使用JavaScript来实现,知道出现了placeholder这个属性

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

示例代码:

显示效果如下

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

placeholder.png

新的表单元素

除了在input标签中增加了一些新的type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素

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

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

使用频率:低

output

属于新的语义标签:用来放置输出的内容,但是不能自动的计算结果,依旧需要通过js的方式来动态修改结果,只是相比于其他的标签,语义性更强。

使用频率:低

input的新type属性介绍

首先让我们来看一张表

HTML5中的type.png

其中标有红色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>

运行效果

input新type属性.png

新type属性的注意要点

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

input表单验证

用户在输入内容的时候不可能做到全部正确,比如email地址``电话长度等等都有可能出现输入错误,试想一下,当用户辛辛苦苦的输入了10多个表单内容,点击提交由于输入错误,内容被清空了

w3cSchool 查阅位置

下面把api文档的查阅位置添加如下

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

email属性

在H5中的input的新type属性email自带格式验证

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

email自带提示.png

 <!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属性即可,不需要赋值

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

required属性.png

<!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标签只能够验证内容是否为空,如果想要验证的更为准确就需要自定义验证规则了

使用方法:

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