类型

---

实例

下面的表单拥有两个输入字段以及一个提交按钮：

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
<段落>名字: <输入 类型=“文本“ 名字=“fname“ /></段落>
<段落>姓: <输入 类型=“文本“ 名字=“lname“ /></段落>
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---

定义和用法

类型 属性规定 输入 元素的类型。

---

语法

<输入 类型="值">

属性值

值	描述
按钮	定义可点击按钮（多数情况下，用于通过 脚本语言 启动脚本）。
复选	定义复选框。
文件	定义输入字段和 "浏览"按钮，供文件上传。
隐藏	定义隐藏的输入字段。
图片	定义图像形式的提交按钮。
密码	定义密码字段。该字段中的字符被掩码。
单选	定义单选按钮。
重置	定义重置按钮。重置按钮会清除表单中的所有数据。
提交	定义提交按钮。提交按钮会把表单数据发送到服务器。
文本	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

---

文本

<输入  类型="文本" /> 定义用户可输入文本的单行输入字段。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
<段落>邮件: <输入 类型=“文本“ 名字=“email“ /></段落>
<段落>验证: <输入 类型=“文本“ 名字=“pin“ 最大值数量=“18“ /></段落>
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---

按钮

<输入 类型="按钮" /> 定义可点击的按钮，但没有任何行为。按钮 类型常用于在用户点击按钮时启动 脚本语言 程序。

<网页>
<头部>
<脚本 类型=“文本/对象脚本“>
function msg()
{
alert(“你好朋友!!“);
}
</脚本>
</头部>
<主体>
<表单>
<输入 类型=“按钮“ 值=“点击我“ 鼠标左键被单击=“msg()“ />
</表单>
<段落>如果点击上面的按钮，会启动一段 对象脚本。</段落>
</主体>
</网页>

---

 

---

 

复选

<输入 类型="复选" /> 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
<输入 类型=“复选“ 名字=“vehicle“ 值=“自行车“ /> 我有一辆自行车<换行 />
<输入 类型=“复选“ 名字=“vehicle“ 值=“汽车“ /> 我有一辆汽车<换行 />
<输入 类型=“复选“ 名字=“vehicle“ 值=“飞机“ /> 我有一架飞机<换行 />
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---

 

文件

<输入 类型="文件" /> 用于文件上传。

<网页>
<主体>
<表单>
<输入 类型=“文件“ 名字=“pic“ 接受=“图片/gif“ />
</表单>
<段落><粗体>注释：</粗体>出于安全方面的考虑，本例不允许用户上传文件。</段落>
</主体>
</网页>

---

隐藏

<输入 类型="隐藏" /> 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 对象脚本 进行修改。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
邮件: <输入 类型=“文本“ 名字=“email“ /><换行 />
<输入 类型=“隐藏“ 名字=“country“ 值=“zhongguo“ />
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---

图片

<输入 类型="图片" /> 定义图像形式的提交按钮。

必须把 资源地址 属性 和 替代 属性 与 <输入 类型="图片"> 结合使用。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
<段落>名字: <输入 类型=“文本“ 名字=“fname“ /></段落>
<段落>姓: <输入 类型=“文本“ 名字=“lname“ /></段落>
<输入 类型=“图片“ 资源地址=“https://www.w3school.com.cn/i/eg_submit.jpg“ 替代=“提交“ />
</表单>
<段落>请在这幅图像上单击，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
<段落>注释：如果 类型 属性设置为 图片，当用户单击图像时，浏览器将以像素为单位，将鼠标相对于图像边界的偏移量发送到服务器，其中包括从图像左边界开始的水平偏移量，以及从图像上边界开始的垂直偏移量。</段落>
</主体>
</网页>

---

密码

<输入 类型="密码" /> 定义密码字段。密码字段中的字符会被掩码（显示为星号或原点）。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
邮件: <输入 类型=“文本“ 名字=“youjian“ /><换行 />
密码: <输入 类型=“密码“ 名字=“密码“ 最大值数量=“8“ /><换行 />
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---

单选

<输入 类型="单选" /> 定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
<输入 类型=“单选“ 名字=“xingbie“ 值=“nan“ /> 男<换行 />
<输入 类型=“单选“ 名字=“xingbie“ 值=“nv“ /> 女<换行 />
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---

重置 按钮

<输入 类型="重置" /> 定义重置按钮。重置按钮会清除表单中的所有数据。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
邮件: <输入 类型=“文本“ 名字=“youjian“ /><换行 />
验证: <输入 类型=“文本“ 名字=“yanzheng“ 最大值数量=“4“ /><换行 />
<输入 类型=“重置“ 值=“重置“ />
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击重置按钮，可以清空表单。</段落>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---

提交

<输入 类型="提交" /> 定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 提交地址 属性中指定的页面。

<网页>
<主体>
<表单 提交地址=“https://www.w3school.com.cn/example/html/form_action.asp“ 方法=“获取“>
<段落>邮件: <输入 类型=“文本“ 名字=“youjian“ /></段落>
<段落>验证码: <输入 类型=“文本“ 名字=“yanzhengma“ 最大值数量=“18“ /></段落>
<输入 类型=“提交“ 值=“提交“ />
</表单>
<段落>请单击确认按钮，输入会发送到服务器上名为 “form_action.asp“ 的页面。</段落>
</主体>
</网页>

---