HTML <input>标签用法详解（附带实例）

输入标记 <input> 是表单中最常用的标记之一。常用的文本域、按钮等都使用这个标记。具体语法如下：

<form>
  <input name="field_name" type="type_name">
</form>

• field_name：控件名称。
• type_name：控件类型，可选的控件类型如下表所示。

表：可选的控件类型

取值	描述
text	文本框
password	密码域，用户在页面中输入密码时不显示具体内容，以 * 代替
radio	单选按钮
checkbox	复选框
button	普通按钮
submit	提交按钮
reset	重置按钮
image	图形域，也称图像提交按钮
hidden	隐藏域，不显示在页面中，只把内容传递到服务器
file	文件域

下面介绍常用的控件。

text文本框

文本框 text 用来设定在表单的文本域中，可输入的文本、数字或字母。具体语法如下：

<input type="text" name="field_name" maxlength="max_value" size="size_value" value="field_value">

文本框属性如下表所示：

<table>
  <tbody>
    <tr><th>取值</th><th>描述</th></tr>
    <tr><td>name</td><td>文本框的名称</td></tr>
    <tr><td>maxlength</td><td>文本框的最大输入字符数</td></tr>
    <tr><td>size</td><td>文本框的宽度（以字符为单位）</td></tr>
    <tr><td>value</td><td>文本框的默认值</td></tr>
  </tbody>
</table>

【实例】在页面中使用文本框，创建一个人口调查的表单页面。代码如下：

<form>
  <h3 align="center">人口调查</h3>
  <!-- 设置表示姓名的文本框 -->
  姓名: <input type="text" name="username" size="20"><br />
  <!-- 设置表示性别的文本框宽度为 4，最大输入字符数为 1 -->
  性别: <input type="text" name="sex" size="4" maxlength="1">&nbsp;&nbsp;
  <!-- 设置表示年龄的文本框宽度为 4，最大输入字符数为 3 -->
  年龄: <input type="text" name="age" size="4" maxlength="3"><br />
  <!-- 设置表示居住地址的文本框宽度为 50，文本框的默认值为吉林省长春市 -->
  居住地址：<input type="text" name="address" size="50" value="吉林省长春市">
</form>

运行效果如下图所示（页面显示“人口调查”标题及四个文本框：姓名、性别、年龄、居住地址）。

password密码域

在表单中还有一种文本域的形式为密码域，输入密码域的内容均以星号“*”或圆点“.”显示。具体语法如下：

<input type="password" name="field_name" maxlength="max_value" size="size_value">

密码域属性如下表所示：

取值	描述
name	密码域的名称
maxlength	密码域的最大输入字符数
size	密码域的宽度（以字符为单位）
value	密码域的默认值（一般不预设）

【实例】在网络中常常有需要修改密码的时候，现在使用密码域创建一个修改密码的表单页面。代码如下：

<form>
  <h3 align="center">修改密码</h3>
  用户名：<input type="text" name="username" size="15"><br>
  原密码：<input type="password" name="oldpassword" maxlength="8" size="15"><br>
  新密码：<input type="password" name="newpassword1" maxlength="8" size="15"><br>
  确认新密码：<input type="password" name="newpassword2" maxlength="8" size="15">
</form>

运行效果如下图所示：

radio单选按钮

在网页中，单选按钮用来让用户进行单一选择，在页面中以圆框表示。单选按钮必须设置属性 value 的值。

而对于一个选择中的所有单选按钮，往往要为其设定同样的名称，这样在传递数值时才能更好地对某一个选择内容的取值进行判断。

radio单选按钮的语法如下：

<input type="radio" name="field_name" checked value="value">

• checked：表示此项为默认选中；
• value：表示选中项目后传递到服务器端的值。

【实例】在页面中使用单选按钮，创建一个外来人员登记的表单页面。代码如下：

<form>
  <h3 align="center">外来人员登记表</h3>
  姓名：<input type="text" name="username" size="15"><br>
  性别：<input type="radio" name="field_name" checked value="男">男
        <input type="radio" name="field_name" value="女">女<br>
  身份证号：<input type="text" name="IDcard" size="20"><br>
  原因：<input type="text" name="causation" size="50">
</form>

运行效果如下图所示（页面显示“外来人员登记表”标题、姓名文本框、性别单选、身份证号文本框、原因文本框）。

checkbox复选框

在用户在填写表单时，有一些内容可以通过让用户进行选择的形式来填写。

例如在常见的网上调查中，首先提出调查的问题，然后让用户在若干项目中进行选择。又例如在收集个人信息时，要求用户在个人爱好的若干项目中进行选择等。复选框能用于进行项目的多项选择，以方框表示。具体语法如下：

<input type="checkbox" name="field_name" checked value="value">

• checked：表示此项为默认选中；
• value：表示选中项目后传递到服务器端的值。

【实例】在页面中使用复选框，选择你喜欢的运动。代码如下：

<form>
  <h3 align="center">选择你喜欢的运动</h3>
  <input type="checkbox" name="hobby" value="游泳">游泳
  <input type="checkbox" name="hobby" value="足球">足球
  <input type="checkbox" name="hobby" value="篮球">篮球<br/>
  <input type="checkbox" name="hobby" value="滑冰">滑冰
  <input type="checkbox" name="hobby" value="滑雪">滑雪
  <input type="checkbox" name="hobby" value="乒乓球">乒乓球
</form>

运行效果如下图所示（页面显示“选择你喜欢的运动”标题及 6 个复选框）：

button普通按钮

在网页中按钮也很常见，其在提交页面、恢复选项时常常会用到。普通按钮一般情况下要配合脚本来进行表单处理。

button 按钮的语法如下：

<input type="button" name="field_name" value="button_text">

• field_name：普通按钮的名称；
• button_text：按钮上显示的文字。

submit提交按钮

提交按钮是一种特殊的按钮，在单击该按钮时可以实现表单内容的提交。具体语法如下：

<input type="submit" name="field_name" value="submit_text">

• field_name：提交按钮的名称；
• submit_text：按钮上显示的文字。

【实例】在页面中分别创建一个普通按钮和一个提交按钮，普通按钮用来关闭当前页面，提交按钮用来提交表单页面。代码如下：

<!-- 将表单页面提交到一个邮箱地址 -->
<form action="mailto:muxi@muxi.com">
  <!-- 使用提交按钮提交表单页面 -->
  提交按钮：<input type="submit" value="提交表单页面"><br>
  <!-- onclick 为鼠标单击事件，window.close() 为关闭当前页面的方法 -->
  普通按钮：<input type="button" value="关闭当前页面" onclick="window.close();">
</form>

运行效果如下图所示（页面显示“提交按钮：提交表单页面”按钮和“普通按钮：关闭当前页面”按钮）。