HTML5 form usage summary

HTML5 new form elements

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

<datalist> element

The element specifies the option list of the input field. When the user enters in the input or specified form, the browser can display the filled-in options in the field. The datalist element does not support IE9 or lower and Safari browsers .
Example program

<!--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> element

Used to specify the key pair generator field of the form, the private key is stored locally, and the public key is sent to the server.

Browser support: IE is not supported

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

<output>元素

<output> is used to define different types of output

Browser support: IE is not supported

<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 form attributes

HTML5 adds new attributes to the <form> and <input> tags.

<form>New attributes:

autocomplete: Specifies that the form in the form field has an auto-complete function
novalidate: Specifies that the form data will not be validated when the form is submitted

<input>New attributes:

autocomplete: Specifies that the form or input field should have an autocomplete function.
autofocus: Specifies that the domain automatically gets the focus when the page is loaded.
form: Specifies one or more forms to which the input field belongs. If you need to quote more than one form, please use a space-separated list.
formaction: used to describe the URL address of the form submission, which will override the action attribute in the element, used for type="submit" and type="image" .
formenctype: Describes the data encoding of the form submitted to the server (only for the form with method="post" in the form), covering the enctype attribute of the form element. Note: the attribute type="submit" and type="image" are used together
formmethod: Defines the method of form submission, covering the method attribute of the element. This attribute can be used in conjunction with **type="submit" and type="image"**.
formnovalidate: is a boolean attribute that describes that the element does not need to be validated when the form is submitted. This attribute will override the novalidate attribute of the element. The formnovalidate attribute is used with type="submit"
formtarget: Specify a name or a keyword to indicate the display after the form submission data is received. This attribute will override the target attribute of the element and be used in conjunction with type="submit" and type="image" .
height and width: Specifies the height and width of the image used for the image type label, which is only applicable to the image type input label .
list: specifies the datalist of the input field.
min and max: used to specify limits (constraints) for input types containing numbers or dates, applicable to types such as daet pickers, number, range, etc.
multiple: It is a boolean attribute, which specifies that multiple values can be selected in the element, and the applicable types are: email, file
pattern (regexp): describes a regular expression used to verify the value of an element, applicable types: text, search, url, tel, email, and password.
placeholder: Provide a hint to describe the expected value of the input field, applicable types: text, search, url, telephone, email and password
required: boolean attribute, which stipulates that the input field must be filled in before submission (cannot be empty), applicable types**: text, search, url, telephone, email, password, date pickers, number, checkbox, radio and file**
step: Specify a legal number interval for the input field. The step attribute can create an area value with the max and min attributes. Applicable types: number, range, date, datetime, datetime-local, month, time and week

HTML5 form example

<!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>