html 表单用于收集不同类型的输入,所有浏览器都 <form> 。定义和 <form> 用于为输入创建 html 表单。 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等。  

HTML 表单

表单是包含表单元素的区域

表单元素是允许在表单中输入，如文本域 、下拉列表 、单选框 、复选框等等

表单使用表单 <form> 来设置

<form>. *input 元素* .</form>

HTML 表单 - 输入元素

多数情况下被用到的表单是输入 ( <input> )

输入类型是由类型（type）定义的，大多数经常被用到的输入类型如下

文本域

<input type="text"> 定义了文本域

当要在表单中键入字母、数字等时，就会用到文本域

<form>
<p>First name: <input type="text" name="firstname"></p>
<p>Last name: <input type="text" name="lastname"></p>
</form>

浏览器如下

First name: 

Last name: 

注意: 表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符

密码字段

<input type="password"> 定义了密码字段

<form>Password:
<input type="password" name="pwd">
</form>

浏览器如下

注意: 密码字段字符不会明文，而是以星号或圆点替代

单选按钮

<input type="ra"> 定义了表单单选框选项

<form>
    <input type="ra" name="sex" value="male">Male<br>
    <input type="ra" name="sex" value="female">Female
</form>

浏览器如下

复选框

<input type="check@R_295_2@"> 定义了复选框

需要从若干给定的选择中选取或若干选项

<form>
    <input type="check@R_295_2@" name="vehicle" value="Bike"> I have a bike<br>
    <input type="check@R_295_2@" name="vehicle" value="Car"> I have a car
</form>

浏览器如下

提交按钮

<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、disabled、maxlength、name、readonly、size、src、type、value这11个是input元素的传统元素

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、placeholder、、step、width这19个是HTML5新增的元素

传统

name用于规定input元素的，用于对提交到服务器后的表单数据进行标识，或者在客户端通过JavaScript引用表单数据

[注意]只有设置了name的表单元素才能在提交表单时传递它们的值

type用来规定input元素的类型

[注意]如果input元素没有设置type，或者设置的值在浏览器中，那么输入类型会变成type="text"

accept用来规定能够通过进行提交的类型。理论上可以用来限制类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的MIME类型

[注意]该只能与type="file"配合使用

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt为图像输入规定替代文本，类似于image元素的alt，为由于某些原因无法查看图像时提供备选信息

[注意]alt只能与type="image"的input元素配合使用

<input type="image" src="#" alt="测试">

checked规定在加载时应该被预先选定的input元素，也可以在加载后，通过JavaScript进行设置

[注意]checked只能与type="ra"或type="check@R_295_2@"的input元素配合使用

<input type="ra" name="ra" value="1" checked>
<input type="ra" name="ra" value="2">
<input type="check@R_295_2@" name="check@R_295_2@" value="1">
<input type="check@R_295_2@" name="check@R_295_2@" value="2">
<script>var oInput = document.getElementsByTagName('input');
for(var i = 0,len = oInput.length; i < len; i++){
    oInput[i].onmouver = function(){
        this.checked = 'checked';
    }
}    
</script>

disabled规定应该禁用input元素。被禁用的字段是不能的，也不可以使用tab按键切换到该字段，但可以选中或拷贝其文本

[注意1]disabled无法与type="hidden"的input元素一起使用

[注意2]对于IE7-浏览器必须设置为disabled="disabled"，而不可以直接设置disabled，否则使用javascript控制时将失效

<button id="btn1">输入域可用</button>
<button id="btn2">输入域不可用</button>
<input id="test" disabled value="">
<script>
btn1.onclick = function(){
    test.removeAttribute('disabled');
}    
btn2.onclick = function(){
    test.setAttribute('disabled','disabled');
}    
</script>

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规定输入字段的最大长度，以字符个数计

[注意]该只能与type="text"或type="password"的input元素配合使用

<input maxlength="6">
<input type="password" maxlength="6">

size对于type="text"或"password"的input元素是可见的字符数；而对于其他类型，是以像素为单位的输入字段宽度

[注意]由于size是可视化的设计，推荐使用css来代替它

<input size="1">
<input type="password" size="2">

src作为提交按钮的图像的URL

[注意]src只能且必须与type="image"的input元素配合使用

<form action="#">
    <input name="test">
    <input type="image" src="http://sand@R_295_2@.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试">
</form>

value为input元素设定值。对于不同的输入类型，value的也不同：

[注意1]type="check@R_295_2@"或"ra"必须设置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适用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规定在加载时，域地获得焦点

autofous适用于button、input、keygen、select和textarea元素

<input name="test1">
<input name="test2" autofocus>

novalidate规定在提交表单时不验证form或input域

novalidate适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

[注意]IE9-浏览器

height用于规定型的input的图像高度

[注意]该只适用于型的input

width用于规定型的input的图像宽度

[注意]该只适用于型的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，它和新元素datalist结合使用，这个元素定义当在表单控件输入数据时可用的选项列表。datalist元素自身不会在，而是为其他元素的list提供数据

list适用于form元素以及以下类型的input元素：text、search、url、telephone、email、password、date pickers、range、color

[注意]IE9-浏览器及safari浏览器

min规定输入域所允许的最大值 

max规定输入域所允许的最小值

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规定按住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规定用于验证input域的模式。模型pattern是正则表达式

pattern适用于以下类型的input元素：text、search、url、tel、email、password

[注意]IE9-浏览器及safari浏览器

<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

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;}

规定必须在提交之前填写输入域(不能为空)

适用于以下类型的input元素：text、search、url、telephone、email、password、date pickers、number、check@R_295_2@、ra、file

[注意]IE9-浏览器及safari浏览器

<form action="#">
    <input >    
    <input type="submit">
</form>

form规定输入域所属的或多个表单，form必须和所属表单的id

form适用于所有input的类型，若需要引用以上的表单时，用空格分隔

[注意]IE浏览器该，只有元素拥有name，该才有效

<form id="form" action="#">
    <input type="submit">
</form>
<input name="test" form="form">

表单重写允许重写form元素的某些设定。其中，formnovalidate适用于button或input元素，而其他适用于submit或reset的button或input元素