HTML表单基本用法

表单在网页中主要负责数据采集功能，也就是

和

里面包含的数据将被提交到服务器或者电子邮件里，用

标签包裹所有的输入框。

form标签

• action属性：当前表单的提交地址
• method属性：发送数据的http方法，有get和post两种
• target属性：在何处打开 action URL

• _blank 在新窗口/选项卡中打开
• _self 在同一框架中打开（默认）
• _parent 在父框架中打开；
• _top 在整个窗口中打开；
• framename 在指定的 iframe 中打开。

• enctype属性：规定在发送到服务器之前应该如何对表单数据进行
  编码

• application/x-www-form-urlencoded：表单数据被编码为名称/值对。这是默认的编码方式（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。使用get方式提交时，把表单数据以键值对append到url后，用 '?' 分割url和参数。使用post方式提交时，把表单数据以键值对放在请求体中传输。
• multipart/form-data：表单数据被编码为一条消息，页上的每个对应消息中的一个部分，用boundary=---------------------------36243265420146"分割各个部分（boundary值由浏览器生成）。它不会对字符进行编码，一般用于传输二进制文件（图片、视频等）
• text/plain：表单数据中的空格转换为 "+" 加号，但不对特殊字符编码。

两种method的区别

1. 数据传送时：Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是数据存放在http协议的消息体中以实体方式传输。
2. 传送的数据量：受url长度的限制，get方式传输的数据量是有限的，而post方式是没有限制的。
3. 安全性： get方式直接把数据显示在url中，浏览器有缓存，可记录用户信息，因此安全性低；而post方式没有这样的问题。
4. 用户刷新时：post方式会弹出提示框，问用户是否重新提交，而get方式不会有提示。

常用控件

• 标签

姓名：

for属性的值是其他输入控件的id，设置for属性可以在点击label时，使光标定位于该输入控件。

• 单行文本框

Paste_Image.png

• 密码框

Paste_Image.png

• 多选框

data
旅游
宠物

Paste_Image.png

• 单选框

男
女

Paste_Image.png

• 下拉菜单

   奔驰
   宝马
   奥迪
 

Paste_Image.png

• 多行文本

Paste_Image.png

• 按钮

Paste_Image.png

• 文件选择

Paste_Image.png

• 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值
• Radio和Checkbox通过name进行分组，name相同时，表示在同一组