H5知识 -- 表单篇

亦凉 2022-07-14 11:39 202阅读 0赞

**W3C对于HTML表单的解释是“用于搜集不同类型的用户输入”**

HTML表单的定义使用<form>标签，表单包含一种或者多种表单类型，比如单选框，多选框，提交按钮等，你还可以使用表单元素上传文件，发送邮件等等。总之，HTML表单能够让你和网页之间传输信息。

**<form>元素**  
常见的提交表单的<form>元素为：

`<form action="action.php" method="GET/POST">`

其中，action规定了表单提交的URL，method规定表单提交时所用HTTP方法（默认为GET）。GET传输内容有大小的限制（1024byte），POST无限制；GET传输的内容可以直接在地址栏获取，而POST内容相对安全。  
除此之外，还有如下属性：

<table> 
 <tbody> 
  <tr> 
   <td>accept-charest</td> 
   <td>规定在被提交表单中使用的字符集（默认：页面字符集）</td> 
  </tr> 
  <tr> 
   <td>autocomplete</td> 
   <td>规定浏览器应该自动完成表单（默认：开启）</td> 
  </tr> 
  <tr> 
   <td>enctype</td> 
   <td>规定被提交数据的编码（默认：url-encoded）</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>规定识别表单的名称（对于 DOM 使用：document.forms.name）</td> 
  </tr> 
  <tr> 
   <td>novalidate</td> 
   <td>规定浏览器不验证表单</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td>规定 action 属性中地址的目标（默认：_self）</td> 
  </tr> 
 </tbody> 
</table>

介绍几种常用的属性：  
**accept**

`<form action="#" accept="image/gif, image/jpeg">`

允许上传的两种类型文件：git和jpeg

**enctype**

`<form action="#" enctype="multipart/form-data>`

使用表单上传文件时必须使用的属性

通过表单发送电子邮件

`<form action="MAILTO:someone@mail.com" method="POST" enctype="text/plain">`

text/plain表示内容为纯文本的形式编码

**在H5中新增了三种表单元素**

*  <datalist>标签定义选项列表，需要使用input元素的list属性来绑定
 *  <keygen>标签规定用于表单的密钥对生成器字段， 当提交表单时，私钥存储在本地，公钥发送到服务器
 *  <output>标签定义不同类型的输出，比如脚本的输出
 *

**datalist:**  
`<form action="#" method="GET"> <input list="comic" type="text" /> <datalist id="comic"> <option value="辛普森一家"></option> <option value="夏目友人帐"></option> <option value="疯狂动物城"></option> </datalist> </form>`

![datalist][]

**input元素**  
input元素作为表单中重要的一个组成部分，构成了大部分的表单功能。比如文本域、密码域、复选框等。  
input元素的属性值：[Input属性值][Input]  
input元素的输入类型：[input输入类型][input]

**基础的登录表单**  
`<form action="target.php" method="POST"> <fieldset> <legend>登录</legend> <label for="user">用户名：</label> <input id="user" name="user" type="text" /> <label for="pwd">密 码：</label> <input id="pwd" name="pwd" type="password" /> <input type="submit" value="确认" /> </fieldset>`  
上面的代码为标准的登录表单，可以获取用户名和密码的值，然后向target.php以POST的格式发送信息。注意使用label标签作为名称显示的好处就是点击名称就可以聚焦到相对应的框里面了（for里面的值需要与id相同），除此之外还可以通过ACCESSKEY绑定功能热键。  
除了input元素外，还有：

*  <select>元素（下拉列表）
 *  <textarea>元素（文本域）
 *  <button>元素（按钮）

[![知识共享许可协议][80x15.png]][80x15.png 1]  
本作品采用[知识共享署名-非商业性使用-禁止演绎 3.0 未本地化版本许可协议][80x15.png 1]进行许可。

[datalist]: http://www.linxiangjun.top/wp-content/uploads/2016/11/datalist.png
[Input]: http://www.w3school.com.cn/html/html_form_attributes.asp
[input]: http://www.w3school.com.cn/html/html_form_input_types.asp
[80x15.png]: https://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png
[80x15.png 1]: http://creativecommons.org/licenses/by-nc-nd/3.0/