HTML-表单from

1 表单工作原理：

1. 当访问html页面时，填写表单，提交。
2. 浏览器将所有数据打包，发送到web服务器。
3. web服务器接受数据，传给服务器脚本进行处理。
4. web服务器脚本处理后，创建一个全新的html页面作为响应，传回给web服务器。
5. 浏览器收到响应，并显示页面。

2 表单创建

创建用form元素，再添加相应元素。

<form action="web服务器URL／脚本所在文件夹／脚本名" method="数据发送方式(POST/GET)">

</form>

中间添加元素一般具有三个常见属性，

• name：传递数据时数据的名字，唯一性。必须和服务器脚本中变量名相同。
• type：表单种类，大部分有text，submit，radio，checkbox，number等
• value： 当被选择时，该数据的数据值。即传送给服务器的数据，与name相匹配。

2.1 表单中元素类别：

文本输入：

输入少字符的文本，与textarea区别。
使用maxlength属性，规定最大字符数。

<input type="text" name="fullname">

提交输入:

<input type="submit" value="按钮显示文本">

单选钮输入:

一组给定选项关联单选按钮，name值必须相同。

<input type="radio" name="hotornot" value="hot" checked>hot</br>
<input type="radio" name="hotornot" value="not">not

复选框输入:

一组给定选项关联复选按钮，name值必须相同。传递数据时，数据值用&相连，幅值给name。例如 ： spice=salt&pepper；

<input type="checkbox" name="spice" value="salt">salt</br>
<input type="checkbox" name="spice" value="pepper">pepper</br>
<input type="checkbox" name="spice" value="garlic">garlic

文本区输入:

适合大量字符输入，可规定文本区大小，超过时自动加入滚动条。
使用maxlength属性，规定最大字符数。

<textarea name="comments" rows="10" cols="20">初始文本</textarea>

下拉菜单：

下拉菜单，仅需要在select中规定name，被选择选项value传递。

<select name="characters">
    <option value="black">black</option>
    <option value="red">red</option>
    <option value="green">green</option>
</select>

增加multiple属性，下拉菜单单选变为多选，使用ctrl或command进行多选。

<select name="characters" multiple>

数字输入：

<input type="number" min="0" max="100">

范围输入：

<input type="range" min="0" max="100" step="5">

###颜色输入：

<input type="color" >

日期输入：

<input type="date" >

邮箱输入：

<input type="email" >

电话输入：

<input type="tel" >

URL输入：

<input type="url" >

密码输入：

输入字符加入掩码显示，但是传递并不十分安全。

<input type="password" name="secret" >

文件输入：

允许选择一个文件，添加到表单数据中进行传输，但是传输方式必须为POST。

<input type="file" name="doc" >

注意：

• input元素为void元素，多个input进行换行排版时，每个input元素后加入<br>。
• 对于input元素，我们会加入标签，方便用户使用。<label>更精准，文末。
  <><>中间green即标签

<option value="green">green</option>

Name即标签

Name：<input type="text" name="fullname">

• 对于选择选项，一般设置一个默认选项，添加checked属性即可。
• placeholder属性，添加该属性为元素提供输入案例，比正常内容颜色浅，单击后占位文本消失。

<input type="text" name="fullname" placeholder="Buckaroo Banzai">

• required属性，指定该属性后，元素必须填写后，才可提交订单。

2.2 数据传输方法

传输方式只要为两种：POST，GET

POST：打包表单变量，后台发送到服务器。表单数据作为请求的一部分发送，用户不可见。

GET：打包表单变量，追加到URL最后，向服务器发送请求。用户本身可以在地址栏看到表单数据。

适用情况：

• 提交表单后需添加标签（不用再次提交表单）：GET
• 数据私有，信用卡，口令：POST
• 使用<textarea>含有大量字符：POST
• 订购，查询，反馈等：POST

2.3 表单布局

• 对于表单的布局，我们常采用css中表格布局，使用table进行布局。
• 对于多个选项，我们使用fieldset，legend进行分组。

<fieldset>
    <legend>Condiments</legend>
        <input type="checkbox" name="spice" value="salt">salt</br>
        <input type="checkbox" name="spice" value="pepper">pepper</br>
        <input type="checkbox" name="spice" value="garlic">garlic
</fieldset>

2.4 标签label增加可访问性

更精准添加标签，使用<label>元素，首先必须为每一个与元素添加唯一id。

格式：

<input type="radio" name="hotornot" id="hot" value="hot" checked>
<label for="hot">hot</label>

注：id名可以与name相同，但是必须唯一。