HTML 表单

HTML 区块►◄HTML 框架

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>

浏览器显示如下

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

密码字段

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

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

浏览器显示如下

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

单选按钮

<input type="radio"> 标签定义了表单单选框选项

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

浏览器显示如下

复选框

<input type="checkBox"> 定义了复选框

用户需要从若干给定的选择中选取一个或若干选项

<form>
    <input type="checkBox" name="vehicle" value="Bike"> I have a bike<br>
    <input type="checkBox" 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、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="radio"或type="checkBox"的input元素配合使用

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

disabled

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

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://sandBox.runjs.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="checkBox"、"radio"、"image"用于定义与输入相关联的值

[注意1]type="checkBox"或"radio"必须设置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>

novalidate

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

novalidate属性适用于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、checkBox、radio、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元素的某些属性设定。其中，formnovalidate适用于button或input元素，而其他属性适用于submit或reset的button或input元素

HTML 区块►◄HTML 框架

Html教程

HTML 表单

HTML 表单

HTML 表单 - 输入元素

文本域

密码字段

单选按钮

复选框

提交按钮

表单元素属性

传统属性

name

type

accept

alt

checked

disabled

readonly

maxlength

size

src

value

新增属性

autocomplete

autofocus

novalidate

height

width

list

min

max

step

multiple

pattern

placeholder

required

form

表单重写属性