HTML5文档中的表单 表单的应用、属性、元素

表单是HTML网页中的重要元素，利用表单可以使网页从单向的信息传递发展到与用户进行交互对话，并且能够实现网上注册、网上登录、网上交易等多种功能。

表单是网页上用于输入信息的区域，用来实现网页与用户的交互、沟通。

HTML5的表单

一个完整的表单信息包括提示信息（用户名、密码等提示信息）、表单域（容纳所有的表单控件和提示信息）、表单控件（登录按钮，用户信息填写框）

在HTML5中<form></form>标记用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form></form>中所有内容都会被提交给服务器端。基本语法乳腺

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

<form>与</form>之间的表单控件是由用户自定义的，action、method为表单标记<form>的常用属性。

创建一个简单的表单

<form action="https://www.e1yu.com" method="post"> <!-- 表单域 -->
    账号：                                          <!-- 提示信息 -->
    <input type="text" name="username">            <!-- 表单控件 -->
    密码：                                         <!-- 提示信息 -->
    <input type="password" name="password">        <!-- 表单控件 -->
    <input type="submit" value="提交">             <!-- 表单控件 -->
</form> 

HTML5表单的属性

在HTML5中，表单拥有多个属性，通过设置表单属性可以实现提交方式、自动完成、表单验证等不同的表单功能。

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

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

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

autocomplete属性：用于指定表单是否有自动完成功能。自动完成功能就是将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表中，以实现自动完成输入。on表示表单有自动完成功能；off表示表单无自动完成功能。

novalidate属性：指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内所有的表单控件不被验证。没什么用

<form>标记的属性并不会直接影响表单的显示效果，要想让一个表单有意义，就必须在<form>与</form>之间之间添加相应的表单控件。

HTML5表单的元素

●　textarea元素，textarea控件可以创建多行文本输入框。

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

textarea可选属性：

●　select元素，浏览网页时，经常会看到包含多个选项的下拉菜单，常常用于翻页、用户信息收集。

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

为下拉菜单中的选项进行分组：

<form action="#" method="post">
    <select>
        <optgroup label="河南省">
            <option>南阳市</option>
            <option>郑州市</option>
            <option>开封市</option>
        </optgroup>
         <optgroup label="河南省">
            <option>南阳市</option>
            <option>郑州市</option>
            <option>开封市</option>
        </optgroup>
    </select>
</form>

●　detalist元素，用于定义输入框的选项列表，列表通过datalist内的option元素进行创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。

在使用<datalist>标记时，需要通过id属性为其指定一个唯一标黄思，然后为input元素指定list属性，将该属性设置为option元素对应的id属性值即可。

<form action="#" method="post">
    请输入用户名：<input type="text" list="namelist">
    <datalist id="namelist">
        <option>鳄鱼君Ba</option>
        <option>老王</option>
        <option>老赵</option>
    </datalist>
</form>

●　keygen元素