HTML5表单使用总结

HTML5新增表单元素

H5新增元素：<datalist>、<keygen>、<output>

<datalist>元素

元素规定输入域的选项列表,在用户在input或规定form中输入的时候，浏览器可以在该域中显示填写的选项。datalist元素不支持IE9以下及Safari浏览器。
例子程序

<!--input的list属性引用该表单的预定义选项-->
<input type="text" list="browsers" name="browsers">
<datalist id="browsers">
  <option value="Firefox"></option>
  <option value="Chrome"></option>
  <option value="Safari"></option>
</datalist><br/>

<keygen>元素

用于规定表单的密钥对生成器字段，私钥存储在本地，公钥发送给服务器。

浏览器支持：不支持IE

<form action="demo_keygen.asp" method="get">
    用户名: <input type="text" name="usr_name">
    加密: <keygen name="security">
    <input type="submit">
</form>

<output>元素

<output>用来定义不同类型的输出

浏览器支持：不支持IE

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

HTML5表单属性

HTML5给<form>和<input>标签增加了新的属性。

<form>新增属性：

autocomplete：规定form域中的表单拥有自动完成功能
novalidate：规定表单提交时不对表单数据进行验证

<input>新属性：

autocomplete：规定 form 或 input 域应该拥有自动完成功能。
autofocus：规定在页面加载时，域自动获得焦点。
form：规定输入域所属的一个或多个表单，如需引用一个以上的表单，请使用空格分隔的列表。
formaction：用于描述表单提交的URL地址，会覆盖元素中的action属性，用于type=“submit” 和 type=“image”。
formenctype：描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)，覆盖 form 元素的 enctype 属性，注意：该属性type=“submit” 和 type=“image” 配合使用
formmethod：定义了表单提交的方式，覆盖了元素的的method 属性，该属性可以与 **type=“submit” 和 type=“image”**配合使用。
formnovalidate：是一个 boolean 属性，描述了元素在表单提交时无需被验证，该属性会覆盖元素的novalidate属性，formnovalidate 属性与type="submit"一起使用
formtarget：指定一个名称或一个关键字来指明表单提交数据接收后的展示，该属性会覆盖元素的target属性，与type=“submit” 和 type="image"配合使用。
height and width：规定用于 image 类型的标签的图像高度和宽度，只适用于image类型的input标签。
list：规定输入域的 datalist。
min and max：用于为包含数字或日期的 input 类型规定限定（约束），适用于类型为：daet pickers、number、range等类型
multiple：是boolean属性，规定元素中可选择多个值，适用类型为：email、file
pattern (regexp)：描述了一个正则表达式用于验证元素的值，适用类型：text, search, url, tel, email, 和 password。
placeholder：提供一种提示（hint），描述输入域所期待的值，适用类型：text, search, url, telephone, email 以及 password
required：boolean 属性，规定必须在提交之前填写输入域（不能为空）,适用类型**：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file**
step：为输入域规定合法的数字间隔，step 属性可以与 max 和 min 属性创建一个区域值，适用类型：number, range, date, datetime, datetime-local, month, time 和 week

HTML5表单实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin-top:10px;
    }
  </style>
</head>
<body>
  <!-- 表单 -->
  <div>
    <!-- form元素用于收集用户输入，action属性定义提交表单时执行的动作 method定义提交表单时所用的http方法-->
    <form action="" method="GET">
      <fieldset>
      <!-- 为fieldset定义标题 -->
      <legend>这是一组表单:</legend>
        输入框：
        <!-- 文本字段默认宽度是20个字符,设置了name属性，在表单提交时才能正确传递表单的值，便于服务器对数据进行标识 -->
        <input name="text" type="text" value="这个是初始值"/><br/>
        密码输入框：
        <input type="password" value="zhegeshichushizhi"/><br/>
        密码输入框：
        <input type="hidden" value="zhegeshichushizhi"/><br/>
        单选按钮：
        <!-- label标签，通过for和单选框的id绑定，实现点击文字时也会触发选中-->
        <label for="S"><input type="radio" name="size" value="" id="S" checked="checked"/>S码</label>
        <label for="M"><input type="radio" name="size" value="" id="M"/>M码</label>
        <label for="L"><input type="radio" name="size" value="" id="L"/>L码</label><br/>
        复选框：
        <!-- 如果label标签只包裹了一个单选框，则不需要显式绑定for和id，否则需要手动绑定  -->
        <label><input type="checkbox" name="checkClass" value="English" />英语</label>
        <label></label><input type="checkbox" name="checkClass" value="Chinese" />语文
        <label><input type="checkbox" name="checkClass" value="Physics" />物理</label>
        <label><input type="checkbox" name="checkClass" value="Science" />科学</label><br/>
        下拉框：
        <select name="color">
          <!-- 如果未指定selected，默认会将首个option设为备选项 -->
          <option value="red">red</option>
          <option value="blue" selected>blue</option>
          <option value="yellow">yellow</option>
        </select><br/>
        下拉多选框：
        <select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple">
    　　　　<option value="1">选项1</option>
    　　　　<option value="2">选项1</option>
    　　　　<option value="3">选项1</option>                                                                                                                                                         
    　　</select><br/>
        文本域：
        <textarea rows="10" cols="20"></textarea><br/>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
        <button type="button" onclick="alert('Hello World!')">ClickMe!</button>
      </fieldset>
    </form>
    <!-- HTML5新增元素 -->
    <form action="" id="form2">
      <fieldset>
        <legend>HTML5新增表单元素</legend>
        datalist元素不支持IE9以下及Safari浏览器,作用是给input提供预定义选项
        <input type="text" list="browsers" name="browsers">
        <datalist id="browsers">
          <option value="Firefox"></option>
          <option value="Chrome"></option>
          <option value="Safari"></option>
        </datalist><br/>
        <!-- keygen元素不支持Internet Explorer 和 Safari。-->
        <!-- 规定用于表单的密钥对生成器字段 -->
        <!-- <keygen><br/> -->
        <!-- <output> --><br/>
      </fieldset>
    </form>
    <!-- HTML5新增属性 -->
    <form action="" autocomplete="on">
      <fieldset>
        <legend>HTML5新增表单属性</legend>
          <input type="text" placeholder="autocomplete='on'，自动完成功能"/><br/>
          <input type="text" placeholder="autocomplete='off'"  autocomplete="off"/><br/>
          <input type="text" placeholder="autofocus" autofocus/><br/>
          <input type="date" max="2021-12-31" placeholder="date max" ><br/>
          <input type="file" multiple placeholder="文件上传，允许上传多个文件"><br/>
          <input type="text" pattern="[A-Za-z]{3}" placeholder="正则校验，只允许输入3个字母"><br/>
          <input type="text" placeholder="placeholder"><br/>
          <input type="text" required placeholder="required 必填"><br/>
          <input type="date" step="3" placeholder="step=3,数字间隔"><br/>
          <input type="submit" value="提交">
      </fieldset>
    </form>
  </div>
</body>
</html>