<input> - 输入信息

首页 > HTML标签 > <input>

■ 摘要

项目说明
形式<input type="...">
支持H2+ / e2+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
标签省略开始标签:必须,结束标签:无

■ 说明

<form> 作成的表单中显示文本输入框、按钮等各种输入信息元素。根据 type 属性的不同会产生各种不同的控件类型。

■ 各种类型

◆ 文本输入框:type="text" (H2+/e2+/N2+)

输入普通的文本。

帐号:
◆ 密码输入框:type="password" (H2+/e2+/N2+)

输入密码专用,输入的文字都会显示为星号(*)。

密码:
◆ 提交文件按钮:type="file" (H2+/e2+/N2+)

上传文件用。

上传文件:
◆ 复选框:type="checkbox" H2+/e2+/N2+)

选择复数选项时使用。

复选框
◆ 单选框:type="radio" (H2+/e2+/N2+)

拥有相同 name 属性的单选框为同一组。一个组里只能同时选中一个选项。

Yes No
◆ 隐藏元素:type="hidden" (H2+/e2+/N2+)

画面上不显示。用来存储与传递表单的值。

◆ 提交表单按钮:type="submit" (H2+/e2+/N2+)

向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

◆ 重置按钮:type="reset" (H2+/e2+/N2+)

按下这个按钮的话,画面上输入的值将变回页面显示时的默认值。

◆ 普通按钮:type="button" (H4+/e2+/N2+)

用 <input type="button" onclick="..."> 的形式,在按下按钮时可以调用 JavaScript 代码。

◆ 图像按钮:type="image" (H2+/e2+/N2+)

比如说有 <input type=image name="AAA" height=100 src="xxx.gif"> 这样一个图像按钮。按下时将以 AAA.x=n AAA.y=n 的形式向服务器提交信息。

◆ 数值输入框:type="number" (H5+)

HTML5 追加的类型,用来输入数值。

◆ 范围选择按钮:type="range" (H5+)

HTML5 追加的类型,用来输入数值。

◆ 搜索字符串:type="search" (H5+)

HTML5 追加的类型,用来输入搜索字符串。

◆ 电话号码:type="tel" (H5+)

HTML5 追加的类型,用来输入电话号码。

电话号码:
◆ URL:type="url" (H5+)

HTML5 追加的类型,用来输入 URL。

URL:
◆ E-Mail:type="email" (H5+)

HTML5 追加的类型,用来输入 E-Mail 地址。

E-Mail:
◆ 时间:type="time" (H5+)

HTML5 追加的类型,用来输入时间。举例:23:59:59

时间:
◆ 日期与时间:type="datetime" (H5+)

HTML5 追加的类型,用来输入日期与时间。举例:2011-10-30T12:00Z

日期与时间:
◆ 本地日期与时间:type="datetime-local" (H5+)

HTML5 追加的类型,用来输入本地日期与时间。举例:2011-10-30T12:00

本地日期与时间:
◆ 日期:type="date" (H5+)

HTML5 追加的类型,用来输入日期。举例:2011-10-30

日期:
◆ 年月:type="month" (H5+)

HTML5 追加的类型,用来输入年月。举例:2011-06

年月:
◆ 周:type="week" (H5+)

HTML5 追加的类型,用来输入周。举例:2011-W23

周:
◆ 色彩:type="color" (H5+)

HTML5 追加的类型,用来输入色彩值。举例:#ffcccc

色彩:

■ 属性

【重要属性】
属性意义
type=typeH2+/e2+/N2+。指定控件的种类。
name=nameH2+/e2+/N2+。指定名字。
value=valueH2+/e2+/N2+。指定输入控件的默认值。

【通用属性】
属性意义
accesskey=keyH4+/e4+/N6+。比如说,指定 accesskey=X 的话,按下键盘上的 ALT 键与 X 键后,焦点会移动到这个控件上。
tabindex=nH4+/e4+/N6+。指定TAB键在控件中的移动顺序。
disabledH4+/e4+/N6+。使控件无效。
readonlyH4+/e4+/N6+。使控件只读。
requiredH5+。使控件为必须输入选项。
form=idH5+。指定想关联的 form 元素的 id。

【文字输入相关属性】
属性意义
maxlength=nH2+/e2+/N2+。指定最大输入字符数。
size=nH2+/e2+/N2+。指定输入控件的大小。
list=nameH5+。指定在 datalist 里设定的候补选项列表的 id。
pattern=regexpH5+。用正则表达式指定输入值的模式。
placeholder=strH5+。指定作为占位符的字符串。
autocomplete=onoffH5+/e5+。设定保存过去输入值的自动完成功能是否有效。
  on:有效(H5+/e5+)
  off:无效(H5+/e5+)
  default:默认(H5+/e5+)

【按钮相关属性】
属性意义
checkedH2+/e2+/N2+。指定此复选框是否在页面表示时就被选中。

【数值与时间相关属性】
属性意义
max=nH5+。指定最大值。
min=nH5+。指定最小值。
step=nH5+。指定数值或时间增加或减少时的刻度。

【数据绑定】
属性意义
datasrc=datasrce4+。指定数据绑定时的数据源的ID。
datafld=dataflde4+。指定数据绑定时的数据源的列名。

【一般属性】
属性意义
class=classH4+/e3+/N4+。指定类。
dir=dirH4+/e5+/N6+。指定文字显示的方向。
id=idH4+/e3+/N4+。指定ID。
lang=langH4+/e4+/N6+。指定语言种类。
language=languagee4+。指定脚本语言。
style=styleH4+/e3+/N4+。指定样式。
title=titleH4+/e4+/N6+。指定标题。
IE扩展属性可以指定IE扩展属性。

type=file的属性】
属性意义
accept=acceptH4+。指定提交的数据的 MIME 类型的候补列表,用逗号隔开。基本不使用。
multipleH5+。可以选择复数个文件。

type=submit的属性】
属性意义
formaction=urlH5+。指定此表单的 action。
formenctype=encH5+。指定此表单的编码类型。
formmethod=methodH5+。指定此表单提交的方法。
formnovalidate=urlH5+。使此表单的验证无效。
formtarget=targetH5+。指定此表单的目标。

type=image的属性】
属性意义
align=alignH2-H4T/e2+/N2+。指定显示位置。
alt=altH4+/e2+。显示图像的说明文本。
dynsrc=urle4+。用视频(*.avi)代替图像。
height=ne4+/N2+。指定图像的高度。
ismapH2+。用来实现服务器端的可点击领域。
lowsrc=urle4+。在 src 指定的图像仍在传输时,先在页面上显示粗略的容量较小的图像的 URL。
src=urlH2+/e2+/N2+。指定图像的 URL。
width=ne4+/N2+。指定图像的横幅。
formaction=urlH5+。指定此表单的 action。
formenctype=encH5+。指定此表单的编码类型。
formmethod=methodH5+。指定此表单提交的方法。
formnovalidate=urlH5+。使此表单的验证无效。
formtarget=targetH5+。指定此表单的目标。

type=email的属性】
属性意义
multipleH5+。可以复数选择。

■ 举例

HTML代码
<form method="POST" action="xxx.cgi">
<table>
<tr>
 <td>姓名:</td>
 <td><input type=text name="namae"></td>
</tr>
<tr>
 <td>密码:</td>
 <td><input type=password name="passwd"></td>
</tr>
<tr>
 <td>上传文件:</td>
 <td><input type=file name="tensou"></td>
</tr>
<tr>
 <td>性别:</td>
 <td>
  <input type=radio name="seibetsu" value="male" checked>男
  <input type=radio name="seibetsu" value="female">女
 </td>
</tr>
<tr>
 <td>兴趣:</td>
 <td>
  <input type=checkbox name="shumi" value="PC">电脑
  <input type=checkbox name="shumi" value="SP">运动
  <input type=checkbox name="shumi" value="RD">读书
 </td>
</tr>
<tr>
 <td></td>
 <td>
  <input type=submit value="提交">
  <input type=reset value="取消">
 </td>
</tr>
</table>
</form>

浏览器显示效果
姓名:
密码:
上传文件:
性别:
兴趣: 电脑 运动 读书

■ 相关

<form><select><textarea><button> <label>