HTML 表单的用法
2017-08-19 本文已影响0人
饥人谷_bigJiao
form标签：
表单作用：搜集用户填写的信息，提交给网站后台（即服务器）
属性：
- action：信息要提交的地址
- method： 浏览器向后台传输数据的方式：get或者post（区别见上一片文章）
- target：在何处打开action（用的较少）
- entype：
1.application/x-www-form-urlencoded:在发送前编码所有的字符（默认）
2.text/plain：空格转换为"+"号，但不对特殊字符编码
3.mutipart/form-data:使用包含文件上传控件的表单时，必须用该值
表单需要用form标签包围，格式如下：
<form action="信息要提交的地址" method="post/get"></form>
常见input标签及属性
- input标签使用type属性的值来规定input元素的类型，常见有以下类型：
常见：
| type | 作用 |
|---|---|
| text | 定义单行输入框，可在其中输入文本 |
| password | 密码输入框，输入的内容在页面上以圆点展示 |
| checkbox | 定义复选框 |
| radio | 定义单选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 隐藏的标签。可以用来发送默认项或者进行安全校验 |
| button | 定义可点击的按钮,不可提交 |
| submit | 定义提交按钮，把表单数据发给服务器 |
| reset | 定义重置按钮，用于清除表单中的用户输入的数据 |
| image | 定义图像形式的提交按钮 |
非常见：
| type | 作用 |
|---|---|
| url | URL的绝对地址 |
| 邮件地址 | |
| search | 无换行的搜索框 |
| tel | 无换行的电话号码框 |
| date 日期输入框，可以选择日期 | |
| time | 时间输入框 |
| number | 数字输入框，整数小数都可以 |
| range | 范围选择框，0~100 |
| color | 选择颜色 |
select标签
- 下拉菜单
- 格式：
<select name="aa" id="bb">
<option value="xx">xx</option>
</select>
注：在option标签中加一个selected表示默认选择
taxtarea标签
- 一个可以多行输入的文本框
- 格式：
<textarea name="comment" id="comment" cols="30" rows="10">ddd</textarea>
label标签
- for属性可以与input的id属性配合，点击输入框前的文字时，也能进入focus状态
