表单相关(form、input、label、button、select、optgroup、option、textarea、fieldset)
定义表单
<form name="" action="" method="" target="" accept-charset="" autocomplete="" enctype="" novalidate="novalidate"></form>
name:规定表单的名称
action:URL地址指向php、asp、jsp等后台数据处理程序,规定当提交表单时向何处发送表单数据
method:规定用于发送表单数据的 HTTP 方法,包括:get(默认)、post;get方法只接受低于1k的信息,url中可见,url长度须小于3000字符,搜索引擎用的是get;post方法允许传送大量信息,数据不显示在url中,申请表单用的是post;
target:规定在何处打开action中的URL,包括:_self(默认)、_blank、_parent、_top
accept-charset:规定表单提交时使用的字符编码,默认为包含 <form> 元素的文档的编码
autocomplete:是否启用表单的自动完成功能,on--默认,规定启用自动完成功能,浏览器会基于用户之前键入的值自动完成值;off--规定禁用自动完成功能,用户必须在每次使用时输入值到每个字段中,浏览器不会自动完成输入
enctype:规定在向服务器发送表单数据之前如何对其进行编码(适用于 method="post")
application/x-www-form-urlencoded --默认,在发送前对所有字符进行编码(将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值)
multipart/form-data --不对字符编码,当使用有文件上传控件的表单时,该值是必需的
text/plain --将空格转换为 "+" 符号,但不编码特殊字符
novalidate:如果使用该属性,则提交表单时不进行验证
<form action="url"
method="get/post" name=" " autocomplete="off/on"></form>
<form action="mailto:xxx@163.com" method="get/post"></form>
注意:当表单中有上传控件时,表单的发送方式必须为post,且需要规定表单在发送数据之前如何对数据进行编码的:
<form method="post" enctype="multipart/form-data"></form>
一、input
<form><input type=" " name=" " value=" " form="" disabled="disabled" readonly="readonly" />...</form>
type:
text:文本(默认,默认宽度为20个字符)
button:自定义按钮
checkbox:复选框
<input type="checkbox" name="名称[ ]" value=" " />
一组类型的复选框名称应命名成数组形式:名称[ ]、名称[数字]、名称[字符串]
要使复选框与外部文本对齐,添加样式属性“vertical-align:middle;”
要去除浏览器本身的checkbox样式,添加样式属性“-webkit-appearance:none;-moz-appearance:none;”
file:定义文件选择字段和 "浏览..." 按钮,供文件上传
<input type="file" name=" " value=" " accept="规定提交文件的类型" />
hidden:定义隐藏栏位
<input type="hidden" name=" " value=" " /> 以隐藏域形式传参
image:以提交按钮形式显示图像
<input type="image" src="url" alt="" width="px/%" height="px/%" />
password:密码(字段中的字符会显示为***)
radio:单选钮
<input type="radio" name=" " value=" " />
一组类型的单选钮名称(name)应相同,值(value)不同;
submit:提交按钮
reset:重设按钮(重置所有表单值为默认值)
number:用于输入数字(带值微调控件)
<input type="number" min="1" max="10" step="1" value="2" />
<input type="number" min="1" max="10" step="0.1" value="2" />
<input type="number" min="1" max="10" step="0.01" value="2" />
要隐藏右侧微调按钮:
/*firefox*/
input[type=number] {
-moz-appearance:textfield;
}
/*chrome*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance:none !important;
margin:0;
}
type="number"提供了 stepUP 和 stepDown 两个方法来增加和减少数字
range:数值(带滑动条控件)
color:拾色器
时间日期点选式输入:
date:date控件(包括年、月、日,不包括时间)
datetime:date和time控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)
datetime-local:本地时间(包括年、月、日、时、分、秒、几分之一秒,不带时区)
month:月、年(不带时区)
time:小时、分钟(不带时区)
week:周、年(不带时区)
email:邮件
url:用于输入网址
search:搜索框
tel:用于输入电话号码
name:<input>元素的名称,只有设置了 name 属性的表单元素才能在提交表单时传递它们的值,若type为submit/reset则name不必设定;
value:<input>元素的值,value 属性对于不同 input 类型,用法也不同:
对于 "button"、"reset"、"submit" 类型 --- 定义按钮上的文本
对于 "text"、"password"、"hidden" 类型 --- 定义输入字段的初始(默认)值
对于 "checkbox"、"radio"、"image" 类型 --- 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL
value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的
value 属性不适用于 <input type="file">
placeholder:预设提示输入字段,适用于以下的 input 类型:text, search, url, tel, email 以及 password
<input placeholder="大家都在搜..." />
用CSS修饰placeholder文本:
::-webkit-input-placeholder{}
::-moz-placeholder{}
input:-moz-placeholder{}
::-ms-input-placeholder{}
autocomplete:输入字段是否启用自动完成功能,值包括:on(默认)/off
form:规定 <input> 元素所属的一个或多个表单,值为表单的id列表,多个表单id用空格分隔
src:显示为提交按钮的图像的 URL,仅且必须与 <input type="image"> 同时使用
alt:定义图像输入的替代文本,仅适用 <input type="image">
height:规定 <input>元素的高度,仅适用于 <input type="image">
width:规定 <input> 元素的宽度,仅适用于 <input type="image">
max:最大值,适用于以下 input 类型:number、range、date、datetime、datetime-local、month、time 和 week
min:最小值,适用于以下 input 类型:number、range、date、datetime、datetime-local、month、time 和 week
step:数字间隔,step 属性可以与 max 和 min 属性配合使用,以创建合法值的范围,适用于以下的 input 类型:number、range、date、datetime、datetime-local、month、time 和 week
size:规定以字符数计的可见宽度,适用于以下的 input 类型:text、search、tel、url、email 和 password
maxlength:规定输入的最大字符数
pattern:用于验证值的正则表达式,值为正则表达式,适用于以下 input 类型:text、search、url、tel、email 和 password,请使用全局的 title 属性来描述模式以帮助用户
<input type="text" pattern="[0-9]" title="错误提示信息" /> 必须是0~9之间的数字
<input type="text" pattern="[A-z]{3}" title="错误提示信息" /> 3个字母
<input type="text" pattern="^[a-zA-Z]\w{5,7}$" title="错误提示信息" /> 必须以字母开头,包含字符或数字和下划线,长度6~8
list:引用包含<input>元素的预定义选项的 <datalist> 元素,值为绑定到<input>的<datalist>的id
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据;
formaction:当表单提交时处理输入控件的文件的 URL,覆盖 <form> 元素的 action 属性,适用于<input type="submit"> 和 <input type="image">
formenctype:规定当表单数据提交到服务器时如何编码(仅适用于 method="post" 的表单),覆盖 <form> 元素的 enctype 属性,适用于<input type="submit"> 和 <input type="image">
application/x-www-form-urlencoded ---默认,在发送前对所有字符进行编码,将空格转换为 "+" 符号,特殊字符转换为 ASCII HEX 值
multipart/form-data ---不对字符编码,当使用有文件上传控件的表单时,该值是必需的
text/plain ---将空格转换为 "+" 符号,但不编码特殊字符
formmethod:定义发送表单数据到 action URL 的 HTTP 方法,包括:get(默认)/post,覆盖 <form> 元素的 method 属性,适用于<input type="submit"> 和 <input type="image">
formtarget:提交表单后在哪里显示接收到响应的名称或关键词,包括:_self(默认)、_blank、_parent、_top、framename,覆盖 <form> 元素的 target 属性,适用于<input type="submit"> 和 <input type="image">
accept:规定通过文件上传来提交的文件的类型,仅适用于 <input type="file">,请避免使用该属性,应该在服务器端验证文件上传
audio/* ---接受所有的声音文件
video/* ---接受所有的视频文件
image/* ---接受所有的图像文件
MIME_type ---有效的 MIME 类型
如需规定多个值,请使用逗号分隔
单属性:
disabled:禁用<input>元素,表单中被禁用的 <input> 元素不会被提交,disabled 属性不适用于 <input type="hidden">
readonly:规定输入字段是只读的
required:指示输入字段的值是必须的,以检验输入内容不可为空,required 属性适用于下面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file
autofocus:当页面加载时 <input> 元素自动获得焦点
checked:默认被选中,适用于 <input type="checkbox"> 和 <input type="radio">
multiple:可选择多个值,适用于 <input type="email"> 和 <input type="file">
formnovalidate:规定当表单提交时不进行验证,覆盖 <form> 元素的 novalidate 属性,适用于 <input type="submit" formnovalidate="formnovalidate">
<!-- 设置input为只读,且不显示光标 --> <!-- PC端 --> <input type="" readonly="readonly" unselectable="on" value="" /> <!-- 移动端 --> <input type="" readonly="readonly" unselectable="on" onfocus="this.blur()" value=""/> <!-- 或者在CSS中修饰 --> input{ /*firefox*/ -moz-user-select: none; /*chrome*/ -webkit-user-select: none; }
二、label
<form id="formID">
<input type="" name="" value="" id="inputID" />
<label for="inputID" form="formID">输入框旁显示的标注文本</label>
</form>
<label> 标签为 input 元素定义标注(标记),不会向用户呈现任何特殊效果,用户点击标注文本时,浏览器就会自动将焦点转到和标签相关的表单控件上
for:可把 label 绑定到另外一个元素,应当与相关元素的 id 属性值相同
form:规定所属的一个或多个表单的id值,多个id值用空格分隔
三、button
<button type="button" name="" value="">点我</button>
<button> 标签定义一个按钮
type:button(可点击的按钮,IE的默认值)、submit(提交按钮,除了IE,该值是其他浏览器的默认值)、reset(重置按钮,清除表单数据)
name:按钮名称,不同的 <button> 元素可以共享相同的名称,这就允许您标记带有相同名称的若干按钮,以便在表单中使用时能够提交不同的值。
value:规定按钮的初始值
form:规定按钮属于一个或多个表单的id,多个表单id用空格分隔
formaction:URL,规定当提交表单时向何处发送表单数据,覆盖 form 元素的 action 属性,仅适用于<button type="submit"></button>
formenctype:规定在向服务器发送表单数据之前如何对其进行编码,覆盖 form 元素的 enctype 属性,仅适用于<button type="submit"></button>
application/x-www-form-urlencoded ---默认,在发送前对所有字符进行编码
multipart/form-data ---不对字符编码,当使用有文件上传控件的表单时,该值是必需的
text/plain ---将空格转换为 "+" 符号,但不编码特殊字符
formmethod:get/post,规定用于发送表单数据的 HTTP 方法,覆盖 form 元素的 method 属性,仅适用于<button type="submit"></button>
formtarget:_self(默认)、_blank、_parent、_top、framename,规定在何处打开 action URL,覆盖表单元素的 target 属性,仅适用于<button type="submit"></button>
单属性:
disabled:禁用按钮
autofocus:当页面加载时按钮自动获得焦点
formnovalidate:提交表单时按钮不会执行验证过程,覆盖表单的 novalidate 属性,仅适用于<button type="submit"></button>
与 <input type="button">的不同:
<button> 与 </button> 标签之间的所有内容都是按钮的内容,比如文本或多媒体内容,例如我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像;
请始终为 <button> 元素规定 type 属性,不同的浏览器对 <button> 元素的 type 属性使用不同的默认值,Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit";
如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值,IE 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容,故在 HTML 表单中推荐使用 input 元素来创建按钮;
四、select、optgroup、option
<form>
<select name=" ">
<option value=" ">...</option>
<option value=" ">...</option>
</select>
</form>
<select> ---用来创建下拉列表
<select name="" size=""></select>
name:下拉列表名称(整个控件名)
size:下拉列表中可见选项的数目,默认值是 1,如果使用了 multiple 属性,默认值是 4
form:规定下拉列表所属的一个或多个表单id,多个表单id用空格分隔
单属性:
autofocus:页面加载时下拉列表自动获得焦点
disabled:禁用下拉列表
multiple:可同时选择多个选项
required:规定用户在提交表单前必须选择一个下拉列表中的选项
可多选式下拉框:
<select name="名称[ ]" multiple="multiple"></select>
一组类型的多选式下拉框应命名成数组形式
分组式下拉框:
<form>
<select name=" ">
<optgroup label="组名1">
<option value=" ">...</option>
<option value=" ">...</option>
</optgroup>
<optgroup label="组名2" disabled="disabled"><option></option></optgroup>
</select>
</form>
<optgroup> ---定义选项组
<option> ---定义一条选项
value:定义送往服务器的选项值,如果没有规定 value 属性,选项的值将设置为 <option></option> 之间的内容
label:规定下拉列表中会显示出的更短版本选项文本
单属性:
disabled:此选项在加载时被禁用
selected:此选项在加载时被选中
<!-- 选择下拉值实现跳转并传递参数值 --> <select onchange="javascript:window.location.href=this.value;"> <option value="www.baidu.com?id=1"></option> <option value="www.google.com?id=2"></option> </select>
五、textarea
<form><textarea name=" " rows=" " cols=" ">……</textarea></form>
name:文本域的名称
rows:文本域可见行数,显示高度,默认值为2
cols:文本域可见列数,显示宽度(以平均字符宽度计),默认值是20
maxlength:文本域允许的最大字符数
placeholder:规定一个简短的提示,它描述了文本区域的期望值,当文本区域为空,且当字段获得焦点后又失去焦点时,文本区域中显示该提示
form:定义文本域所属的一个或多个表单id,多个表单id以空格分隔
wrap:规定当提交表单时,文本区域中的文本应如何换行
soft ---默认,不换行
hard ---文本换行(包含换行符),使用 hard 属性时必须指定 cols 属性,textarea中的文本会根据 cols 的值进行换行
单属性:
autofocus:页面加载时文本域自动获得焦点
disabled :禁用文本域
readonly :规定文本域为只读
required :规定文本域是必填的(以便提交表单)
六、fieldset
<form>
<fieldset name=" ">
<legend>标题</legend>
<input />
<select><option></option></select>
<hr />
<textarea></textarea>
</fieldset>
</form>
<fieldset> ---创建组合式表单,会在一组表单元素周围绘制边框
name:规定<fieldset>的名称
form:规定<fieldset>所属的一个或多个表单id,多个表单id用空格分隔
disabled:禁用<fieldset>下的所有元素
<legend> ---为 <fieldset> 元素定义标题