元素input

HTML文件的基本结构

input
适用DTD:Strict Transitional Frameset   适用浏览器:All
释义 表单输入域(form input field)

语法
<input 属性="属性值">

说明
input元素用来配置表单中的输入域(控件),它在表单控件中有着最广泛的应用。input元素根据不同的属性设置可以生成10种不同的控件
input不仅可以出现在表单中,也可以出现在其他块级元素和行内元素内
input元素为空元素,在HTML中没有结束标签

属性
属性 属性值 说明
① type 预定义值:text 属性值为预定义的关键字,共10个可选,用于指定显示不同的控件类型。
  • text:单行文本输入框,此为默认值;
  • password:密码输入框;
  • checkbox:复选框;
  • radio:单选按钮;
  • submit:提交按钮;
  • image:图片提交按钮;
  • reset:重置按钮;
  • button:普通按钮;
  • hidden:隐藏式控件;
  • file:文件选择控件;
② name name名 为当前控件指定一个名称,传递数据时作为参数名称,或用于客户端脚本引用。属性值需符合name命名规范
③ value 任意字符串 控件初始显示的文字内容(数据),除了type属性值设为radio或checkbox时的控件不能省略此属性,其它控件类型都可省略。此属性对于不同类型的控件来说具体形式也不一样:type属性设置为button、submit或reset时表示按钮标签显示的文字,type属性设置为checkbox、radio、image、hidden、file等值时该属性值不会被显示出来而是作为向服务器传送的数据,type属性值设置为text或password时该属性值会显示在文字输入框中
④ size 整数 指定控件的初始宽度,对于各控件来说,该属性的意义也不一样:对于文字输入型控件(type属性设置为text或password时生成的控件)来说为文字数宽度,对于其它类型控件来说是像素单位(pixel)的宽度
⑤ maxlength 整数 指定控件最多可输入的文字个数,用于文字输入型控件(type属性值设置为text或password时生成的控件),默认没有限制可输入字数。此属性可以超过size属性定义的字数,此时浏览器可以滚动显示
⑥ checked 空值|checked 指定控件处于被选取状态,此布尔属性仅适用于type属性设置为radio或checkbox时生成的控件。如果用于其它类型的控件,浏览器可能会忽略此属性。此属性的属性值在HTML中为空值,在XHTML中则需指定为checked="checked"
⑦ readonly 空值|readonly 指定控件处于只读状态。设定后,该控件可获得焦点,可使用Tab导航键访问,但数据不可更改,不过表单传输数据时会将会传输该控件的数据。此属性为布尔属性,在XHTML中需要设置为readonly="readonly"。动态修改readonly属性的唯一方式是使用脚本程序
⑧ disabled 空值|disabled 指定该控件不可用。设定后,该控件变成灰色,不能获得焦点(当然不能修改其数据了),不可使用Tab导航键访问,而且表单传输数据时也不会传输该控件的数据。此属性为布尔属性,在XHTML中需要设置为disable="disable"。动态修改disabled属性的唯一方式是使用脚本程序
⑨ src URI type属性设置为image时,此属性指定图片来源,此图片用于修饰图形化的提交按钮
⑩ alt 任意字符串 指定图片无法显示时的替换文字,仅在type属性值设置为image时可用
align 预定义值:top 按钮图片与文字的对齐方式,仅在type属性值设置为image时可用。可能的取值有:left、right、top、texttop、middle、absmiddle、baseline、bottom、absbottom,参见图像。该属性仅在Transitional 和Frameset DTD中使用
⑫ tabindex 0~32767的整数 按下Tab键时控件获得焦点(键盘遍历)的顺序,从属性值最小者开始移动
⑬ accesskey 任一文字字符 指定快捷访问键,Windows下为Alt键加快捷访问键,Macintosh下为Command键加上此快捷访问键
⑭ accept MIME类型 指定服务器处理器处理表单时所能接受的正确的MIME类型,可指定多个内容类型值,中间以逗号隔开。当用户代理器提示用户上传文件(表单包含用于文件上传的控件,即input type="file")时,可以使用此信息过滤非一致的文件类型
⑮ usermap URI 用于图片提交按钮(type="image"),将图片设置为用户端图像映射,URI格式为#mapname,其中mapname对应map元素的name属性值
⑯ ismap 空值|ismap 用于图片提交按钮(type="image"),设置服务器端图像映射,只有搭配a元素的href属性才有效。在HTML中属性值为空值(只需加入属性名即可)
⑰ 通用属性:id、class、title、style、dir、lang、xml:lang 查看
⑱ 内在事件属性:onfocus、onblur、onselect、onchange
nbsp;

☆ 重要属性详解

1. type属性
type属性用来定义当前控件的类型,它利用各种关键字属性值确定空间的种类。type的每一种属性值对应一种控件类型,属性值及其介绍见下表

input元素可以生成的表单控件
属性值 控件名称 代码 说明 示例
text 单行文本输入框 <input type="text" value="文本输入框"> 单行文本输入框只能输入不带换行的文字,在数据传输过程中,单行文本框中的文本不会被表单进行加密处理
password 密码输入框 <input type="password" value="password"> 密码输入框供用户输入密码,密码会用字符屏蔽功能使用特殊字符显示,具有一定的安全保护作用。在数据传输过程中,密码输入框中的文本可能也不会被表单进行加密处理
checkbox 复选框 <input type="checkbox" checked> 复选框使用户在一组选项里有复选的机会,用户可以一次选择一个或多个项目。这类似于不定项选择题,不过复选框的选项也可能一个都不选
radio 单选按钮 <input type="radio"> 单选框提供用户在一组选项里只有一次选择的机会,用户只能选择一个项目。这类似于单项选择题,不过用户也可能一个选项都不选
submit 提交按钮 <input type="submit"> 提交按钮的作用是被用户点击之后会提交整个表单的数据集——在各种控件中所输入的所有数据
image 图片提交按钮 <input type="image" title="图片可以自由设置"> 图片提交按钮的功能同提交按钮是一样的,点击之后也会提交表单,不过图片更具装饰性。此外,图片还可以做客户端图像映射
:此例未插入图片,查看图片效果
reset 重置按钮 <input type="reset" value="重置按钮"> 用户点击重置按钮之后,表单中所有输入的数据都被清除,并且所有控件都会被设回初始状态。在设置重置按钮时要一定小心,因为用户可能一不小心就重置了表单
button 普通按钮 <input type="button" value="普通按钮"> 在网页上显示一个普通的按钮。这种按钮控件没有固定的功能,它只是一种可点击的小装置,不过设计者可以通过脚本给此类按钮添加所需要的各种功能。它同button元素的按钮相似
hidden 隐藏式控件 <input type="hidden"> 它不会显示在页面上,但它能够有名称和数据。从数据传输角度说,它和其他控件的功用是相同的。隐藏控件用来传送用户不需要看见或不需要修改的数据(如订单号和内部跟踪ID)
file 文件选择控件 <input type="file"> 文件选择控件可以让用户在客户端机器上选择文件进行上传。外形上,它通常是由一个“文本输入框”和旁边的一个“浏览”按钮组成(当然功能上绝对不是这两个控件的组合)。在IE中,“文本框”用于输入文件确切的路径,“按钮”用于打开操作系统内建的文件浏览器,二者功能是一样的
表单元素(控件)在不同操作系统以及不同的浏览器中显示的外观可能不同,但功能却是一样的

2. value属性
value属性用于定义表单控件的初始值,用户可以修改初始值,然后提交到服务器。用户重置表单后,控件的数据会返回到其初始值。
下表列举了input元素的value属性对于控件值的影响:

input元素的value属性对控件值的影响
控件名称 代码范例 演示效果 说明
文本输入框 <input type="text" value="显示value值"> value属性值内容会被显示在文本输入框中
密码输入框 <input type="password" value="显示value值"> value属性值内容会被显示在密码输入框中,不过字符被屏蔽,一般以单一字符(如星号或实心圆点)显示
复选框 <input type="checkbox" value="显示value值"> value属性值内容不会显示在页面上
单选按钮 <input type="radio" value="显示value值"> value属性值内容不会显示在页面上
提交按钮 <input type="submit" value="显示value值"> value属性值为按钮文字
图片提交按钮 <input type="image" value="显示value值" src="src/search.gif"> value属性值内容不会显示在页面上
重置按钮 <input type="reset" value="显示value值"> value属性值为按钮文字
普通按钮 <input type="button" value="显示value值"> value属性值为按钮文字
隐藏式控件 <input type="hidden" value="显示value值"> value属性值内容不会显示在页面上
文件选择控件 <input type="file" value="显示value值"> value属性值内容不会显示在页面上

3. size属性
size属性用来设置控件初始的尺寸,一般情况下表现为控件的宽度。一个较宽的输入框方便用户输入更多的文字,而一个较宽的按钮方便用户点击。 下表列举了input元素size属性对于控件宽度的影响:

input元素size属性对于控件尺寸的影响
type属性值 控件名称 代码 显示效果 说明
text 单行文本输入框 <input type="text" size="20"> 文字输入框宽度相当于size属性值指定的字符数。例如size="20"代表20个英文半角字符的宽度
password 密码输入框 <input type="password" size="20"> 密码输入框宽度相当于size属性值指定的字符数。例如size="20"代表20个英文半角字符的宽度
checkbox 复选框 <input type="checkbox" checked size="20"> size属性对复选框无效,复选框大小由浏览器默认显示效果决定,复选选项的宽度取决于复选框后面的文本长短
radio 单选按钮 <input type="radio" checked size="20"> size属性对单选框无效,单选框大小由浏览器默认显示效果决定,单选选项的宽度取决于单选框后面的文本长短
submit 提交按钮 <input type="submit" size="20"> size属性对提交按钮无效,提交按钮宽度取决于提交按钮中文本的长短
image 图片提交按钮 <input type="image" size="20"> size属性对图片提交按钮无效,图片按钮宽度取决于图片按钮中图片本身的尺寸
reset 重置按钮 <input type="reset" value="重置" size="20"> size属性对重置按钮无效,重置按钮宽度取决于重置按钮中文本的长短
button 普通按钮 <input type="button" value="普通按钮" size="20"> size属性对普通按钮无效,普通按钮宽度取决于普通按钮中文本的长短
hidden 隐藏式控件 <input type="hidden" size="20"> 隐藏式控件不显示在页面上,因此size属性也无效
file 文件选择控件 <input type="file" size="20"> size属性对文件选择控件前半部分的地址输入框有效,但是对“浏览”按钮无效

4. maxlength属性
默认情况下,输入框对用户输入的字数没有什么限制。不过有时候设计者因为服务器或传输问题的原因需要对用户的输入限制字符数量,此时maxlength属性可以满足这个要求。
maxlength属性只对带“文本输入框”的控件有效,下表列举了input元素的maxlength属性对控件输入的影响:

input元素的maxlength属性对控件输入字数的影响
type属性值 控件名称 代码 显示效果 说明
text 单行文本输入框 <input type="text" size="20" maxlength="50"> 文字输入框输入的最大字符数,英文代表英文字符数量,中文代表中文字符数。maxlength属性值可以大于、小于或等于size属性值
password 密码输入框 <input type="password" size="20" maxlength="50"> 密码输入框输入的最大字符数,英文代表英文字符数量,中文代表中文字符数。maxlength属性值可以大于、小于或等于size属性值
checkbox 复选框 <input type="checkbox" checked size="20" maxlength="50"> maxlength属性对复选框无效
radio 单选按钮 <input type="radio" checked size="20" maxlength="50"> maxlength属性对单选框无效
submit 提交按钮 <input type="submit" size="20" maxlength="50"> maxlength属性对提交按钮无效
image 图片提交按钮 <input type="image" size="20" maxlength="50"> maxlength属性对图片提交按钮无效
reset 重置按钮 <input type="reset" value="重置" size="20" maxlength="50"> maxlength属性对重置按钮无效
button 普通按钮 <input type="button" value="普通按钮" size="20" maxlength="50"> maxlength属性对普通按钮无效
hidden 隐藏式控件 <input type="hidden" size="20" maxlength="50"> maxlength属性对隐藏控件也无效
file 文件选择控件 <input type="file" size="20" maxlength="50"> maxlength属性对文件选择控件前半部分的地址输入框有效,但是对“浏览”按钮无效

5. checked属性
checked属性仅适用于复选框和单选框,它描述一个控件的初始选择状态。一般在一组选项,特别是单选框选项中,页面上总提供一个选项处于选择状态,目的在于避免用户忘记选择而导致这组控件传送数据。用户可以改变checked属性定义的初选择状态,只要用鼠标点击(或键盘输入)即可。
checked属性为布尔属性,在HTML中没有属性值,元素带上checked属性就代表控件被选择了,反之不写则不选择,这也是默认值。

6. disabled和readonly
disable和readonly分别定义了控件的禁用和只读状态。处于禁用状态的控件其外观变为灰度显示,此时鼠标和键盘对该控件的操作都完全无效。只读状态的控件和一般控件外观上基本没有什么区别,只是控件中的内容无法更改,如下:


这两个属性也是布尔属性,在HTML中不需带上属性值。
禁用和只读状态在实际运行中是有区别的,具体差别如下表:

禁用和只读状态的区别
比较项目 禁用 只读
获得焦点情况 控件不会获得焦点 控件会获得焦点,但是不能修改其中的内容
键盘遍历情况 遍历过程中将跳出整个遍历顺序 遍历过程照常进行
提交表单数据 禁用的控件数据不会提交 控件数据照常提交
禁用或只读属性是设计者按实际需要而设定的,用户无法更改。如果设计者允许控件动态地更改自己的禁用或只读属性,则需要使用客户端脚本进行控制,请参阅相关书籍。

7. tabindex属性
tabindex属性设置遍历顺序。打开一个HTML页面,只要用户不停地按键盘上的“Tab”键,就可以在文档上的各活动组件之间按顺序切换。次数用户无需鼠标就可以进行表格填写、选择选项等操作。tabindex属性值为0到32767之间的整数,负值可能会被浏览器忽略。键盘遍历会从数值小的控件开始。
支持tabindex属性的元素有a、area、button、input、object、select和textarea等。disabled属性禁用的控件将不能被遍历,而readonly只读元素能被遍历。

键盘遍历顺序不宜随意打乱,否则习惯键盘操作的用户的操作可能会被打乱,所以设置时要小心。

8. accesskey属性
accesskey属性设置键盘操作快捷方式。基于Windows系统的软件一般都有键盘操作的快捷方式,用户只要按住“Alt”键不放在加上相应的字母键或者数字键或者符号键,就可以代替鼠标操作,Macintosh下为Command键加上此快捷访问键。
HTML页面的各控件也可以达到这样的效果。利用accesskey属性,其中添加的属性值(为一字符)就是相应的Alt配合键。按下快捷键则会使该元素获得焦点,不同的元素获得焦点的表现形式也不一样。支持accesskey属性的元素有a、area、button、input、label、legend以及 textarea等。设计者需要考虑用户在访问时的输入状况进行属性值定义,一般情况下使用键盘上的英文字母、数字(以及一些符号)即可。

需要注意的是,定义的快捷键不能和浏览器菜单的快捷键冲突,否则快捷访问键只能访问浏览器菜单。而且似乎只有IE浏览器能支持accesskey属性。

示范
<form action="form.asp">
<input type="text" name="text">
<input type="submit value="submit"> <input type="rest" value="reset">
</form>

范例
下面的例子显示了XHTML文件基础结构: 运行打印
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素input</title>
</head>
<body>
<form action="javascript:alert('此表单仅用于演示,表单测试成功!^_^')">
<b>用户识别</b><br>
姓名:<input type="text" size="20"><br>
密码:<input type="password" size="20"><br>
<b>你的爱好(可多选):</b><br>
<input type="checkbox" value="ch1" name="check1">读书<br>
<input type="checkbox" value="ch2" name="check2">电影<br>
<input type="checkbox" value="ch3" name="check3">音乐<br>
<input type="checkbox" value="ch4" name="check4">打球<br>
<b>你的年龄:</b><br>
<input type="radio" value="ch1" name="r1">16~20<br>
<input type="radio" value="ch2" name="r1">21~25<br>
<input type="radio" value="ch3" name="r1" checked>26~30<br>
<input type="radio" value="ch4" name="r1">其他<br>
<input type="hidden" value="ff">
<b>请选择一张照片</b><br>
<input type="file"><br>
<input type="submit" value="提交"> <input type="reset" value="重置">
<input type="button" value="帮助" style="cursor:help" onclick="alert('此表单仅用于演示input的type属性,谢谢!')"><br><br>
<input type="text" size="25" value="Google Search" onfocus="this.value=''"> <input type="image" src="src/search.gif" value="tt" alt="图像按钮">
</form>
</body>
</html>

参阅
form
select
textarea
button
fieldset