输入
例子：
<!文章类型 网页>
<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/demo/demo_form.asp“>
名:<换行>
<输入 类型=“文本“ 名字=“firstname“ 值=“mingzi">
<换行>
姓:<换行>
<输入 类型=“文本“ 名字=“lastname“ 值=“xing“>
<换行><换行>
<输入 类型=“提交“ 值=“提交“>
</表单>
<段落>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</段落>
</主体>
</网页>
浏览器支持
| 元素 | Chrome（谷歌浏览器） | IE（微软浏览器） | Firefox（火狐浏览器） | Safari | Opera |
|---|---|---|---|---|---|
| <输入> | 是 | 是 | 是 | 是 | 是 |
所有浏览器都支持 <输入> 标签。
定义和用法
<输入> 标签用于搜集用户信息。
根据不同的 类型 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本输入、单选按钮、按钮等等。
提示和注释：
提示：请使用 输入标注 元素为某个表单输入定义标签。
属性
超文本5（HTML5 ）中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| 接受 | 内容_类型（mime_type） | 规定通过文件上传来提交的文件的类型。 |
| 水平对齐 |
|
不赞成使用。规定图像输入的对齐方式。 |
| 替代 | 文本 | 定义图像输入的替代文本。 |
| 自动完成 |
|
规定是否使用输入字段的自动完成功能。 |
| 自动焦点 | 自动焦点 |
规定输入字段在页面加载时是否获得焦点。 （不适用于 类型="隐藏"） |
| 选中元素 | 选中元素 | 规定此 输入 元素首次加载时应当被选中。 |
| 禁用元素 | 禁用元素 | 当 输入 元素加载时禁用此元素。 |
| 表单 | 表单的名字 | 规定输入字段所属的一个或多个表单。 |
| 表单提交地址 | 地址 |
覆盖表单的 提交地址 属性。 （适用于 类型="提交" 和 类型="图片"） |
| 表单编码类型 | 见注释 |
覆盖表单的 编码类型 属性。 （适用于 类型="提交" 和 类型="图片"） |
| 表单方法 |
|
覆盖表单的 方法属性。 （适用于 类型="提交" 和 类型="图片"） |
| 表单不验证 | 表单不验证 |
覆盖表单的 不验证 属性。 如果使用该属性，则提交表单时不进行验证。 |
| 表单目标 |
|
覆盖表单的 目标 属性。 （适用于 类型="提交" 和 类型="图片"） |
| 高度 |
|
定义 输入 字段的高度。（适用于 类型="图片"） |
| 列表 | 下拉列表-标识 | 引用包含输入字段的预定义选项的 下拉列表。 |
| 最大值 |
|
规定输入字段的最大值。 请与 "最小值" 属性配合使用，来创建合法值的范围。 |
| 最大值长度 | 数字 | 规定输入字段中的字符的最大长度。 |
| 最小值 |
|
规定输入字段的最小值。 请与 "最大值" 属性配合使用，来创建合法值的范围。 |
| 多选 | 多选 | 如果使用该属性，则允许一个以上的值。 |
| 名字 | 字段名 | 定义 输入 元素的名称。 |
| 模式 | 正则表达式模式 |
规定输入字段的值的模式或格式。 例如 模式="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
| 占位符 | 文本 | 规定帮助用户填写输入字段的提示。 |
| 只读 | 只读 | 规定输入字段为只读。 |
| 必填 | 必填 | 指示输入字段的值是必需的。 |
| 大小 | 指定字符数 | 定义输入字段的宽度。 |
| 资源地址 | 地址 | 定义以提交按钮形式显示的图像的 地址。 |
| 跨度 | 数字 | 属性规定输入字段的合法数字间隔（假如 跨度="3"，则合法数字应该是 -3、0、3、6，以此类推） |
| 类型 |
|
规定 输入 元素的类型。 |
| 值 | 值 | 规定 输入 元素的值。 |
| 宽度 |
|
定义 输入 字段的宽度。（适用于 类型="图片"） |
全局属性
<输入> 标签支持 超文本（html） 中的全局属性。
事件属性
<i输入> 标签支持 超文本（html） 中的事件属性。
实例
单行文本域(Text fields)
本例演示如何在 超文本（html） 页面创建文本域。用户可以在文本域写入文本。
<网页>
<主体>
<表单>
名：
<输入 类型=“文本“ 名字=“ming“>
<换行 />
姓：
<输入 类型=“文本“ 名字=“xing“>
</表单>
</主体>
</网页>
密码域
本例演示如何创建 超文本（html） 的密码域。
<网页>
<主体>
<表单>
用户：
<输入 类型=“文本“ 名字=“user“>
<换行 />
密码：
<输入 类型=“密码“ 名字=“password“>
</表单>
<段落>
请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
</段落>
</主体>
</网页>
复选框
本例演示如何在 超文本 页中创建文本框。用户可以选中或取消选取复选框。
<网页>
<主体>
<表单>
我喜欢自行车：
<输入 类型=“复选“ 名字=“bike“>
<换行 />
我喜欢汽车：
<输入 类型=“复选“ 名字=“car“>
</表单>
</主体>
</网页>
单选按钮
本例演示如何在 超文本 中创建单选按钮。
<网页>
<主体>
<表单>
男性：
<输入 类型=“单选“ 选中元素=“选中元素“ 名字=“sex“ 值=“male“ />
<换行 />
女性：
<输入 类型=“单选“ 名字=“sex“ 值=“female“ />
</表单>
<段落>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</段落>
</主体>
</网页>
简单的下拉列表
本例演示如何在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。
<网页>
<主体>
<表单>
<选择列表 名字=“cars“>
<选项 值=“volvo“>沃尔沃</选项>
<选项 值=“saab“>法拉利</选项>
<选项 值=“fiat“>吉利</选项>
<选项 值=“audi“>奥迪</选项>
</选择列表>
</表单>
</主体>
</网页>
另一个下拉列表
本例演示如何创建一个简单的带有预选值的下拉列表。（译者注：预选值指预先指定的首选项。）
<网页>
<主体>
<表单>
<选择列表 名字=“cars“>
<选项 值=“volvo“>沃尔沃</选项>
<选项 值=“saab“>吉利</选项>
<选项 值=“fiat“ 选择=“选择“>法拉利</选项>
<选项 值=“audi“>奥迪</选项>
</选择列表>
</表单>
</主体>
</网页>
多行文本域(Textarea)
本例演示如何创建一个文本域（多行文本输入控制）。用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
<网页>
<主体>
<段落>
此示例无法编辑
因为我们的编辑器使用文本区域
作为输入，
并且您的浏览器不允许
文本区域内的文本区域。
</段落>
<文本框 行高=“10“ 列宽=“30“>
创建按钮
本例演示如何创建按钮。你可以对按钮上的文字进行自定义。
<网页>
<主体>
<表单>
<输入 类型=“按钮“ 值=“你好 超文本！“>
</表单>
</主体>
</网页>
围绕数据的表单边框
本例演示如何在数据周围绘制一个带标题的框。
<!文章类型 网页>
<网页>
<主体>
<表单>
<表单边框>
<表单边框标题>健康信息</表单边框标题>
身高：<输入 类型=“文本“ />
体重：<输入 类型=“文本“ />
</表单边框>
</表单>
<段落>如果表单周围没有边框，说明您的浏览器太老了。</段落>
</主体>
</网页>
带有输入框和确认按钮的表单
本例演示如何向页面添加表单。此表单包含两个输入框和一个确认按钮。
<!文章类型 网页>
<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/demo/demo_form.asp“>
姓:<换行>
<输入 类型=“文本“ 名字=“xing“ 值=“zhao“>
<换行>
名:<换行>
<输入 类型=“文本“ 名字=“ming“ 值=“zhipeng“>
<换行><换行>
<输入 类型=“提交“ 值=“提交“>
</表单>
<段落>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</段落>
</主体>
</网页>
带有复选框的表单
此表单包含两个复选框和一个确认按钮。
<网页>
<主体>
<表单 名字=“input“ 提交地址=“https://www.w3school.com.cn/html/html_form_action.asp“ 方法=“获取“>
我有一辆自行车:
<输入 类型=“复选“ 名字=“vehicle“ 值=“bike“ 选中元素=“选中元素“ />
<换行 />
我有一辆汽车:
<输入 类型=“复选“ 名字=“vehicle“ 值=“car“ />
<换行 />
我有一架飞机:
<输入 类型=“复选“ 名字=“vehicle“ 值=“airplane“ />
<换行 /><换行 />
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>如果您点击 “提交“ 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</段落>
</主体>
</网页>
带有单选按钮的表单
此表单包含两个单选框和一个确认按钮。
<!文章类型 网页>
<网页>
<主体>
<表单>
<输入 类型=“单选“ 名字=“sex“ 值=“male“ 选中元素>男
<换行>
<输入 类型=“单选“ 名字=“sex“ 值=“female“>女
</表单>
</主体>
</网页>
从表单发送电子邮件
此例演示如何从表单发送电子邮件。
<网页>
<主体>
<表单 提交地址=“mailto:someone@w3school.com.cn“ 方法=“传递“ 编码类型=“文本/平原“>
<标题3>这个表单会把电子邮件发送到 w3school。</标题3>
姓名：<换行 />
<输入 类型=“文本“ 名字=“name“ 值=“zhaozhipeng“ 大小=“20“>
<换行 />
电邮：<换行 />
<输入 类型=“文本“ 名字=“mail“ 值=“123456789@zzp.com“ 大小=“20“>
<换行 />
内容：<换行 />
<输入 类型=“文本“ 名字=“comment“ 值=“7788520“ 大小=“40“>
<换行 /><换行 />
<输入 类型=“提交“ 值=“发送“>
<输入 类型=“重置“ 值=“重置“>
</表单>
</主体>
</网页>
浙公网安备 33010602011771号