HTML input标签的用法（附带实例）

input 是 HTML 表单中最基本，也是功能最丰富的标签，可以通过不同的 type 属性值创建多种类型的字段元素。

HTML文本框和密码输入框

input 标签中，type 属性的默认值是 text，即文本框；如果不指定 type 属性值或指定了无法识别的类型，input 默认就呈现为文本框。

当 type 属性设置为 password 时，input 输入的内容默认会显示为掩码。

此外，在使用文本框和密码输入框时，常用的属性还有：

maxlength，允许输入的最大字符数；
size，文本框显示的宽度，以字符数为单位；
value，显示的内容。

下面的代码创建了一个文本框和一个密码输入框：

<form id="form1" action="/demo/form.php" method="get">
    <p>
        用户 <input id="username" name="username" maxlength="15" size="25">
    </p>
    <p>
        密码 <input id="userpwd" name="userpwd" type="password" maxlength="15" size="25">
    </p>
</form>

下图中显示的是输入了一些内容的效果：

HTML按钮

input 标签可以创建四种类型的按钮，相应的 type 属性值分别是：

submit：提交按钮，单击后会向服务器提交当前表单中的所有数据；
reset：重置按钮，单击后当前表单中的所有字段元素恢复到初始状态；
button：普通按钮，需要通过 JavaScript 编码等方式定义按钮的操作，如 onclick 事件响应按钮的单击操作；
image：定义一个显示图片的按钮，可以使用 src 属性设置图片文件的路径。

下面的代码创建了一个简单的登录表单，其中使用了提交和重置按钮：

<form id="form1" action="/demo/form.php" method="get">
    <p>
        用户 <input type="text" id="username" name="username" size="25" maxlength="15" />
    </p>
    <p>
        密码 <input type="password" id="userpwd" name="userpwd" size="25" maxlength="15" />
    </p>
    <p>
        <input type="reset" value="清空" />
        <input type="submit" value="登录" />
    </p>
</form>

页面的初始效果见下图：

可以输入一些内容，然后单击“清空”按钮来观察执行结果，本例中会清空用户名和密码内容。单击“登录”按钮后，用户名和密码的数据就会提交到 /demo/form.php 页面。

请注意，表单提交的数据名称是元素的 name 属性决定的。下图显示了提交的用户登录信息：

本例中，提交方式是 get，表单数据会以参数的形式添加到接收页面URL末尾的问号（?）之后，见图 3 中的画线位置显示的“?username=user01&userpwd=123456”，其中，多个参数使用 & 符号分隔；每个参数中，等号左侧是参数名称，等号右侧是参数的数据。

在下面的代码中，使用普通按钮和 JavaScript 代码进行数据检查和提交操作，如果用户和密码输入内容少于 6 个字符，则不提交数据：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="form1" action="/demo/form.php" method="get">
    <p>
        用户 <input type="text" id="username" name="username" size="25" maxlength="15" />
    </p>
    <p>
        密码 <input type="password" id="userpwd" name="userpwd" size="25" maxlength="15" />
    </p>
    <p>
        <input type="reset" value="清空" />
        <input type="button" value="登录" onclick="login();" />
    </p>
</form>
</body>
</html>
<script>
    function login() {
        var user = document.getElementById("username");
        var pwd = document.getElementById("userpwd");
        if (user.value.length < 6 || pwd.value.length < 6) {
            window.alert("用户和密码至少需要 6 个字符");
        } else {
            form1.submit();
        }
    }
</script>

没有输入用户或密码，或者输入的内容少于 6 个字符时，会显示一个消息对话框，见下图：

此外，在 JavaScript 代码中，表单元素可以使用的方法包括：

submit() 方法：提交表单数据；
reset() 方法：重置表单。

HTML复选框

复选框（checkbox）可用于类似“是／否”“开／关”的数据类型，在 input 标签中，将 type 属性设置为 checkbox 就可以显示为复选框。设置复选框是选中状态时，可以添加 checked 属性。

下面的代码定义了三个复选框，其中，第三个复选框设置为选中状态：

<input id="auto" name="auto" type="checkbox" checked>汽车

复选框数据的提交比较特殊，默认情况下，如果复选框被选中，提交的数据为 on，如果没有被选中，则不提交元素数据，见下图中所示的效果。

此外，如果 input 标签中设置了 value 属性，选中的复选框提交的数据就是 value 属性的值。开发工作中，应在项目中做好约定，以便正确处理复选框提交的数据。

HTML单选按钮

input 标签中将 type 属性设置为 radio 值会生成一个单选按钮，而单选按钮一般会是两个或更多一起使用，从而形成一个具有排他性的单选组合，如性别只能选择一个。

当多个单选按钮在一组时，需要将它们的 name 属性设置为相同的值，如下面的代码定义了一个选择性别的单选按钮组，默认选择“保密”。

<input id="sex_unknow" name="sex" type="radio" value="0" checked>保密
<input id="sex_male" name="sex" type="radio" value="1">男
<input id="sex_female" name="sex" type="radio" value="2">女

代码中，三个 input 标签的类型都设置为 radio，name 属性都设置为 sex，value 属性值分别设置为 0（保密）、1（男）、2（女）。单选按钮组提交数据时，数据名称为 name 值，提交的值是选中元素的 value 属性值。

数据提交的操作效果见下图：

单选按钮组中，使用 checked 属性设置一个合理的默认值是比较常见的操作，这样可以避免提交空白数据；如果没有合适的默认值，也可以通过 JavaScript 代码进行判断，如下面的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="form1" action="/demo/form.php" method="get">
    <p>
        <input id="sex_unknown" name="sex" type="radio" value="0"> 保密
        <input id="sex_male" name="sex" type="radio" value="1"> 男
        <input id="sex_female" name="sex" type="radio" value="2"> 女
    </p>
    <p>
        <input type="reset" value="重置" />
        <input type="button" value="提交" onclick="btnSubmit();" />
    </p>
</form>
</body>
</html>
<script>
    function btnSubmit() {
        var sex = document.getElementsByName("sex");
        for (i = 0; i < sex.length; i++) {
            if (sex[i].checked == true) {
                form1.submit();
            }
        }
        window.alert("请选择性别");
    }
</script>

如果没有选择一个选项，表单不会提交数据，见下图：

HTML隐藏元素

有时候，页面中的一些信息并不需要在浏览器中呈现，此时，可以将它们保存到 input 标签的 value 属性中，同时将 type 属性设置为 hidden。

下面的代码使用 JavaScript 代码读取隐藏元素中的 value 属性：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="form1" action="/demo/form.php" method="get">
    <p>
        <input id="data1" name="data1" type="hidden" value="隐藏数据">
    </p>
    <p>
        <input type="button" value="提交" onclick="btnSubmit();" />
    </p>
</form>
</body>
</html>
<script>
    function btnSubmit() {
        var data1 = document.getElementById("data1");
        window.alert(data1.value);
    }
</script>

单击“提交”按钮后的效果见下图：

隐藏元素中的数据同样可以提交到服务器。如下面的代码在 btnSubmit() 函数中添加一行提交表单数据的代码。

<script>
function btnSubmit() {
    var data1 = document.getElementById("data1");
    window.alert(data1.value);
    //
    form1.submit();
}
</script>

提交数据后的效果见下图：

HTML5 input新特性

HTML5 标准中，input 标签又添加了一些新的特性。

1) placeholder属性

首先了解 placeholder 属性，它可以指定字段的提示信息，例如字段应该填什么、以什么样的格式填写。

下面的代码展示了 placeholder 属性的使用：

<form id="form1" action="/demo/form.php" method="get">
     <input type="text" placeholder="请输入登录名" />
</form>

页面打开时，文本框背景会显示 placeholder 属性指定的内容。输入内容后，placeholder 属性指定的内容就会消失，操作效果见下图：

2) 新的type属性

在 HTML5 标准中，还增加了一些新的 type 属性值，用于定义更多的元素类型，如：

email：定义输入电子邮箱地址的元素；
url：定义输入URL地址的元素；
search：定义输入搜索内容的元素；
tel：定义输入电话号码的元素；
number：定义一个只能输入数字的元素。其中，可以使用 min 属性设置最小值，使用 max 属性设置最大值，使用 step 属性设置单击上下箭头一次增加或减少的数值；
range：定义滑块元素，使用 min 和 max 属性设置最小值和最大值，使用 value 属性获取当前值；
date、time、datetime、datetime-local：定义日期和时间的选择或输入元素。

此外，required 属性要求元素必须填写数据。

下面的代码演示了 email 元素、placeholder 和 required 属性的配合使用。

<!doctype html>
<html>
<head>
     <meta charset="utf-8" />
     <title></title>
</head>
<body>
     <form id="form1" action="/demo/form.php" method="get">
          <p>
               E-mail<input type="email" placeholder="xxx@xxx.xxx" required />
          </p>
          <p>
               <input type="submit" value="提交">
          </p>
     </form>
</body>
</html>

在 Google Chrome 浏览器中提交表单数据时，如果没有输入内容，会显示下图 (a) 中的提示，如果输入的内容不是 E-mail 地址，会显示下图 (b) 中的提示。

如果需要临时关闭表单验证，可以在 <form> 标记中添加 novalidate 属性，此时，表单中的所有数据不会进行客户端验证。

下面的代码演示了 range 元素的应用，改变滑块位置后，会在 cur_value 文本框中显示滑块的当前值。

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="/demo/form.php" method="get">
    <input id="cur_value" type="text" />
    <input type="range" min="0" max="100" value="15" onchange="document.getElementById('cur_value').value = this.value;" />
</form>
</body>
</html>

下图中分别是 IE11、Firefox 和 Google Chrome 浏览器中显示的初始界面，可以通过移动滑块来观察执行效果。

3) datalist标签

datalist 是 HTML5 标准中的新标签，主要配合 input 标签使用，其功能是给出元素内容的输入建议。

datalist 标签会创建一个内容列表，其中的项目使用 option 元素定义；在 input 标签中使用 list 属性指定关联 datalist 标签的 id。

下面的代码演示了 datalist 标签和 input 标签的配合使用：

<!doctype html>
<html>
<head>
     <meta charset="utf-8" />
     <title></title>
</head>
<body>
     <form id="form1" action="/demo/form.php" method="get">
          <input type="text" list="car_type" />
          <datalist id="car_type">
          <option>轿车</option>
          <option>SUV</option>
          <option>轿跑</option>
          <option>越野</option>
          <option>旅行车</option>
          </datalist>
     </form>
</body>
</html>

下图中显示了文本框输入“轿”字后的效果：

可以看到，文本框可以根据输入的内容自动匹配 datalist 中的项目，方便用户选择。

实际应用中，可以配合 JavaScript 和 Ajax 技术，自动从服务器读取匹配的数据，这样就可以为用户提供最新、最适合的内容建议。

此外，input 标签中还可以使用日期和时间类型，可用的 type 属性值包括 date、time、datetime 或 datetime-local，分别用于日期、时间、日期时间的选择，如下面的代码：

<!doctype html>
<html>
<head>
     <meta charset="utf-8" />
     <title></title>
</head>
<body>
     <input type="date" />
</body>
</html>

下图分别显示了 Google Chrome 浏览器和 Firefox 浏览器中选择日期的操作效果：

目前，Google Chrome、Firefox、Edge 等浏览器都已支持 date 和 time 元素。IE 浏览器不支持日期和时间类型，Firefox 浏览器不支持 datetime 和 datetime-local 类型，而 Google Chrome 浏览器不支持 datetime 类型。