HTML 表单用于搜集不同类型的用户输入
一、<form>元素
定义 HTML 表单
<form action='' mehtod=''>
/* form elements */
</form>
表单属性
- action：提交表单时，向何处发送数据，取值有
（1）绝对或相对url，一般指向服务器的一个处理程序
（2）使用mailto协议的url地址，表单会以电子邮件形式发送，比较少见
（3）空值，提交给当前页面
- method：提交数据的处理方式，常用是GET，POST
（1）GET提交：浏览器会将表单数据以?name=value&name=value格式附在action指定的url后。由于url长度限制，通常get传送的数据量在1kb以下
（2）POST提交：浏览器将数据作为http请求的一部分发送给服务器，数据量不受限制
-
target：规定在何处显示返回结果，取值有_blank（在新窗口打开）， _self（当前框架下打开，默认）， _parent（父级框架中打开）， _top（顶级窗口中打开）
-
title：鼠标停留时浮现文本
-
enctype：对表单数据进行编码，默认为“application/x-www-form-urlencoded”
-
name：name属性是与服务器通信时使用的名称，而id属性是浏览器使用的名称
二、表单内部元素
-
单行输入
<input type='text' value='文本信息'>主要属性
- size：文本框宽度，以字符为单位，缺省值是20
- value：文本框的值
- maxlength：用户输入的最大字符长度
- readonly：只读，用户将不可改变文本框的值
- disabled：禁用，将不能获得文本框焦点，也不能改变值，且提交时此内容不会发送
- 密码输入
<input type='password' value='123'>
- 单选按钮
<input type='radio'>
通过使用相同name来确定一组单选按钮，添加checked属性可使其默认选中
<input type='radio' name='sex' value='男' checked>男
<input type='radio' name='sex' value='女'>女
- 复选按钮
<input type='checkbox'>
通过相同name确定一组复选按钮，添加checked属性可使其默认选中
<input type='checkbox' name='hobby' value='sing' checked>唱歌
<input type='checkbox' name='hobby' value='read'>读书
<input type='checkbox' name='hobby' value='run'>跑步
- 隐藏域
<input type='hidden' value='123'>
主要用来隐藏不需要显示的信息，提交时也会被发送给服务器
- 文件上传
<input type='file' accept='image/png' multiple='multiple'>
使用此元素，form的enctype必须为multipart/form-data，method为POST。accept属性用来选择可上传文件的类型，multiple属性可选择多个文件
常见MIME类型
| 后缀名 | MIME名 |
|---|---|
| css | text/css |
| js | text/javascript, application/javascript |
| doc | application/msword |
| xls | application/vnd.ms-excel |
| gif | image/gif |
| html | text/html |
| jpeg | image/jpeg |
| jpg | image/jpeg |
| png | image/png |
| svg | image/vnd.svf |
| json | application/json |
| mp3 | audio/mpeg |
| mp4 | audio/mp4, video/mp4 |
| ogg | application/ogg, audio/ogg |
| txt | text/plain |
| zip | aplication/zip |
- 下拉列表
<select></select>
嵌套<option></option>标签使用，默认显示第一个option的值，添加size属性可显示多个
<select size='2'>
<option value='shanghai'>上海</option>
<option value='beijing'>北京</option>
<option value='hangzhou'>杭州</option>
</select>
- 多行文本输入
<textarea></textarea>
rows，cols属性分别表示高，宽
<textarea cols='30' rows='10'>内容</textarea>
- 区域标签
<fieldset></fieldset>
将内容划分为一个区域，legend标签是他的标题
<fieldset>
<legend>xx表单</legend>
<input type="text">
</fieldset>
- 提交按钮
<input type='submit' value='提交'>
点击后会将表单数据提交给action指向的地址。提交按钮的name和value不会提交给服务器
- 重置按钮
<input type='reset' value='重置'>
点击后清空表单内容，重置为初始值。重置按钮的name和value不会提交给服务器
-
普通按钮
<input type='button'>,<button></button> -
图片按钮
<input type='image'>
<input type='image' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515269851725&di=96e2bab5a507a4a19f9fd54c2a1a4f5f&imgtype=0&src=http%3A%2F%2Fimgs.technews.cn%2Fwp-content%2Fuploads%2F2014%2F10%2FBaidu.jpg' alt='图片按钮'>
1-13
以下是HTML5新增元素
- type=number
<input type='number'>
包含数值的输入域，min，max可控制范围，value是初始值
<input type='number' value='0' min='0' max='10'>
- type=range
<input type='range'>
包含一定范围内数字值的输入域，滑动条，默认情况下的value范围是0~100
<input type="range" value="5" min="1" max="10"/>
- type=date，type=time
<input type='date'><input type='time'>
日期，时间选择器控件
<input type="date" value="2018-01-07" />
<input type="time" value="22:52" />
所有时间选择器类型
| type类型 | 值 |
|---|---|
| date | 年月日 |
| month | 年月 |
| week | 年周 |
| time | 小时分 |
| datetime | 时间、日、月、年（UTC时间） |
| datetime-local | 时间、日、月、年（本地时间） |
- type=color
<input type='color'>
颜色选择器控件
<input type='color' value="#15d86a">
- type=search
<input type='search'>
搜索域，显示为常规的文本域
- type=email
<input type='email'>
包含 e-mail 地址的输入域，提交时会自动验证格式
- type=url
<input type='url'>
包含 url 地址的输入域，提交时会自动验证格式
- datalist
<datalist></datalist>
实现数据列表下拉效果，列表是通过 datalist 内的 option 元素创建的。把 datalist 绑定到输入域，用输入域的 list 属性必须与 datalist 的 id相同
列表：<input type="text" list="mydata" placeholder="热门电影排行" />
<datalist id="mydata">
<option label="Top1" value="让子弹飞">
<option label="Top2" value="非诚勿扰2">
<option label="Top3" value="大笑江湖">
<option label="Top4" value="赵氏孤儿">
<option label="Top5" value="初恋这件小事">
</datalist>
14-21
网友评论