html 表单用于收集不同类型的 用户 输入,所有浏览器都 支持 <form> 标签 。定义和 用法 <form> 标签 用于为 用户 输入创建 html 表单。 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等。??
HTML 表单
表单是 一个 包含表单元素的区域
表单元素是允许 用户 在表单中输入 内容 ，如文本域 、下拉列表 、单选框 、复选框等等
表单使用表单 标签 <form> 来设置
<form>.?*input?元素*?.</form>
HTML 表单 - 输入元素
多数情况下被用到的表单 标签 是输入 标签 ( <input> )
输入类型是由类型 属性 （type）定义的，大多数经常被用到的输入类型如下
文本域
<input type="text"> 标签 定义了文本域
当 用户 要在表单中键入字母、数字等 内容 时，就会用到文本域
<form> <p>F irs t?name:?<input?type="text"?name="f irs tname"></p> <p>Last?name:?<input?type="text"?name="lastname"></p> </form>
浏览器 显示 如下
F irs t name:?
Last name:?
注意:?表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符
密码字段
<input type="password"> 标签 定义了密码字段
<form>Password: <input?type="password"?name="pwd"> </form>
浏览器 显示 如下
Password:?注意:?密码字段字符不会明文 显示 ，而是以星号或圆点替代
单选按钮
<input type="ra dio "> 标签 定义了表单单选框选项
<form> ????<input?type="ra dio "?name="sex"?value="male">Male<br> ????<input?type="ra dio "?name="sex"?value="female">Female </form>
浏览器 显示 如下
?Male?Female
复选框
<input type="check Box "> 定义了复选框
用户 需要从若干给定的选择中选取 一个 或若干选项
<form> ????<input?type="check Box "?name="vehicle"?value="Bike">?I?have?a?bike<br> ????<input?type="check Box "?name="vehicle"?value="Car">?I?have?a?car </form>
浏览器 显示 如下
?I have a bike?I have a car
提交按钮
<input type="submit"> 定义了提交按钮
当 用户 单击确认按钮时，表单的 内容 会被传送到另 一个 文件
表单的动作 属性 定义了目的 文件 的 文件 名
由动作 属性 定义的这个 文件 通常会对接收到的输入数据进行相关的处理
<form?name="input"?action="/dy/html/getpost"?method="get"> <p> 用户名 ：<input?type="text"?name="user"></p> <p><input?type="submit"?value="Submit"></p> </form>
浏览器 显示 如下
用户名 ：
可以在上面的文本框内键入几个字母，然后点击确认按钮
那么输入数据会传送到 "/dy/html/getpost" 的 页面 ，该 页面 将 显示 出输入的结果
表单元素 属性
form元素只是 一个 数据 获取 元素的容器，而容器内的元素称为表单控件。最常用的表单控件是input元素
accept、alt、checked、 dis abled、maxlength、name、readonly、size、src、type、value这11个 属性 是input元素的传统元素 属性
autocomplete、autofocus、form、formaction、formenctype、formmethod、formn oval idate、formtarget、height、list、max、min、multiple、n oval idate、pattern、placeholder、 required 、step、width这19个 属性 是HTML5新增的元素 属性
传统 属性
name
name 属性 用于规定input元素的 名称 ，用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据
[注意]只有设置了name 属性 的表单元素才能在提交表单时传递它们的值
type
type 属性 用来规定input元素的类型
[注意]如果input元素没有设置type 属性 ，或者设置的值在浏览器中 不支持 ，那么输入类型会变成type="text"
accept
accept 属性 用来规定能够通过 文件 上传 进行提交的 文件 类型。理论上可以用来限制 上传 文件 类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的MIME类型
[注意]该 属性 只能与type="file"配合使用
<input?type="file"?accept="image/gif,image/jpeg,image/jpg">
alt
alt 属性 为图像输入规定替代文本， 功能 类似于image元素的alt 属性 ，为 用户 由于某些原因无法查看图像时提供备选信息
[注意]alt 属性 只能与type="image"的input元素配合使用
<input?type="image"?src="#"?alt="测试 图片 ">
checked
checked 属性 规定在 页面 加载时应该被预先选定的input元素，也可以在 页面 加载后，通过JavaScript进行设置
[注意]checked 属性 只能与type="ra dio "或type="check Box "的input元素配合使用
<input?type="ra dio "?name="ra dio "?value="1"?checked>
<input?type="ra dio "?name="ra dio "?value="2">
<input?type="check Box "?name="check Box "?value="1">
<input?type="check Box "?name="check Box "?value="2">
<script>var?oInput?=?document.getElementsByTagName('input');
for(var?i?=?0,len?=?oInput.length;?i?<?len;?i++){
????oInput[i].onmou SEO ver?=?function(){
????????this.checked?=?'checked';
????}
}????
</script>
dis abled
dis abled 属性 规定应该禁用input元素。被禁用的字段是不能 修改 的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本
[注意1] dis abled 属性 无法与type="hidden"的input元素一起使用
[注意2]对于IE7-浏览器必须设置为 dis abled=" dis abled"，而不可以直接设置 dis abled，否则使用javascript控制时将失效
<button?id="btn1">输入域可用</button>
<button?id="btn2">输入域不可用</button>
<input?id="test"? dis abled?value=" 内容 ">
<script>
btn1.onclick?=?function(){
????test.removeAttribute(' dis abled');
}????
btn2.onclick?=?function(){
????test.setAttribute(' dis abled',' dis abled');
}????
</script>
readonly
readonly 属性 规定输入字段为只读。只读字段是不能 修改 的，但 用户 仍然可以使用tab按键切换到该字段，还可以选中或拷贝其文本
readonly 属性 可与type="text"或"password"的input元素配合使用
[注意]IE7-浏览器 不支持 使用javascript控制readonly 属性
<button?id="btn1">输入域只读</button>
<button?id="btn2">输入域可读写</button>
<input?id="test"?value=" 内容 "?readonly>
<script>
btn1.onclick?=?function(){
????test.setAttribute('readonly','readonly');
}
btn2.onclick?=?function(){
????test.removeAttribute('readonly');
}????
</script>
maxlength
maxlength 属性 规定输入字段的最大长度，以字符个数计
[注意]该 属性 只能与type="text"或type="password"的input元素配合使用
<input?maxlength="6"> <input?type="password"?maxlength="6">
size
size 属性 对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度
[注意]由于size 属性 是 一个 可视化的设计 属性 ，推荐使用css来代替它
<input?size="1"> <input?type="password"?size="2">
src
src 属性 作为提交按钮 显示 的图像的URL
[注意]src 属性 只能且必须与type="image"的input元素配合使用
<form?action="#"> ????<input?name="test"> ????<input?type="image"?src="http://sand Box .ru njs .cn/uploads/rs/26/ddzmgynp/submit.jpg"?width="99"?height="99"?alt="测试 图片 "> </form>
value
value 属性 为input元素设定值。对于不同的输入类型，value 属性 的 用法 也不同：
type="button"、"reset"、"submit"用于定义按钮上的 显示 的文本
type="text"、"password"、"hidden"用于定义输入字段的初始值
type="check Box "、"ra dio "、"image"用于定义与输入相关联的值[注意1]type="check Box "或"ra dio "必须设置value 属性
[注意2]value 属性 无法与type="file"的input元素一起使用
<button?id="btn1">1</button> <button?id="btn2">2</button> <input?id="test"> <script> btn1.onclick?=?btn2.onclick?=function(){ ????test.value=this.innerHTML; }???? </script>新增 属性
autocomplete
autocomplete 属性 可以在个别元素或整个表单上开启或 关闭 浏览器的 自动 完成 功能 。当 用户 在字段开始键入时，浏览器基于之前键入过的值， 显示 出在字段中填写的选项
autocomplete 属性 适用form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color
[注意]IE浏览器 不支持 该 属性 ，只有元素拥有name 属性 ，该 属性 才有效
<input?name="test1"?autocomplete="on"> <input?name="test2"?autocomplete="off">autofocus
autofocus 属性 规定在 页面 加载时，域 自动 地获得焦点
autofous 属性 适用于button、input、keygen、select和textarea元素
<input?name="test1"> <input?name="test2"?autofocus>n oval idate
n oval idate 属性 规定在提交表单时不验证form或input域
n oval idate 属性 适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器 不支持
height
height 属性 用于规定 Image类 型的input 标签 的图像高度
[注意]该 属性 只适用于 Image类 型的input 标签
width
width 属性 用于规定 Image类 型的input 标签 的图像宽度
[注意]该 属性 只适用于 Image类 型的input 标签
//http://127.0.0.1/form.html?test=123&x=38&y=57# <form?action="#"> ????<input?name="test"> ????<input?type="image"?src="submit.jpg"?width="99"?height="99"> </form>list
大多数输入类型包含 一个 属性 list，它和 一个 新元素datalist结合使用，这个元素定义当在表单控件输入数据时可用的 一个 选项列表。datalist元素自身不会在 页面 显示 ，而是为其他元素的list 属性 提供数据
list 属性 适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color
[注意]IE9-浏览器及safari浏览器 不支持
min
min 属性 规定输入域所允许的最大值?
max
max 属性 规定输入域所允许的最小值
step
step 属性 为输入域规定合法的数字间隔
min、max、step 属性 适用于以下类型的input元素:date pickers、number、range
<input?type="number"?min="0"?max="10"?step="0.5"?value="6"?/> <input?type="range"?min="0"?max="10"?step="0.5"?value="6"?/>multiple
multiple 属性 规定按住ctrl按键，输入字段可以选择多个值
该 属性 适用于type="email"和"file"的input元素
[注意]该 属性 IE9-浏览器 不支持
<button?id="btn1">打开 文件 多选</button> <button?id="btn2"> 关闭 文件 多选</button> <br><br> <input?id="test"?type="file"?multiple> <script> btn1.onclick?=?function(){ ????test.setAttribute('multiple',''); }; btn2.onclick?=?function(){ ????test.removeAttribute('multiple'); }; </script>pattern
pattern 属性 规定用于验证input域的模式。模型pattern是正则表达式
pattern 属性 适用于以下类型的input元素：text、search、url、tel、email、password
[注意]IE9-浏览器及safari浏览器 不支持
<form?action="#"> ????<input?pattern="\d{3}">???? ????<input?type="submit"> </form>placeholder
placeholder 属性 提供占位符 文字 ，描述输入域所期待的值。占位符会在输入域为空时 显示 出现，在输入域获得焦点时消失
placeholder 属性 适用于以下类型的input元素:text、search、url、tel、email、password
[注意]IE9-浏览器 不支持
<form?action="#"> ????<input?type="tel"?placeholder="请 输入数字 "?pattern="\d{11}">???? ????<input?type="submit"> </form>要 修改 placeholder的颜色需要使用::placeholder
::placeholder{color:green;}required
required 属性 规定必须在提交之前填写输入域(不能为空)
required 属性 适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、check Box 、ra dio 、file
[注意]IE9-浏览器及safari浏览器 不支持
<form?action="#"> ????<input? required >???? ????<input?type="submit"> </form>form
form 属性 规定输入域所属的 一个 或多个表单，form 属性 必须和所属表单的id
form 属性 适用于所有input 标签 的类型，若需要引用 一个 以上的表单时，用空格分隔
[注意]IE浏览器 不支持 该 属性 ，只有元素拥有name 属性 ，该 属性 才有效
<form?id="form"?action="#"> ????<input?type="submit"> </form> <input?name="test"?form="form">表单重写 属性
表单重写 属性 允许重写form元素的某些 属性 设定。其中，formn oval idate适用于button或input元素，而其他 属性 适用于submit或reset的button或input元素
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did91843