HTML 输入类型
本章介绍了 HTML <input> 元素的不同类型。
HTML 输入类型
以下是 HTML 中可以使用的不同输入类型：
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
提示：type 属性的默认值为 "text"。
文本输入类型
<input type="text"> 定义单行文本输入字段：
实例
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
上面的 HTML 代码在浏览器中会显示为：
密码输入类型
<input type="password"> 定义密码字段：
实例
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"> </form>
上面的 HTML 代码在浏览器中会显示为：
密码字段中的字符会被遮蔽（显示为星号或圆点）。
提交输入类型
<input type="submit"> 定义用于将表单数据提交给表单处理程序的按钮。
表单处理程序通常是服务器上包含处理输入数据脚本的页面。
表单处理程序在表单的 action 属性中指定：
实例
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Bill"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Gates"><br><br> <input type="submit" value="提交"> </form>
上面的 HTML 代码在浏览器中会显示为：
如果省略提交按钮的 value 属性，按钮将获得默认文本：
实例
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Bill"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Gates"><br><br> <input type="submit"> </form>
重置输入类型
<input type="reset"> 定义重置按钮，可将所有表单值重置为其默认值：
实例
<form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Bill"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Gates"><br><br> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </form>
上面的 HTML 代码在浏览器中会显示为：
如果您更改了输入值，然后单击“重置”按钮，表单数据将重置为默认值。
单选按钮输入类型
<input type="radio"> 定义单选按钮。
单选按钮允许用户从有限数量的选项中选择仅一个：
实例
<p>选择你最喜欢的 Web 语言：</p> <form> <input type="radio" id="html" name="fav_language" value="HTML"> <label for="html">HTML</label><br> <input type="radio" id="css" name="fav_language" value="CSS"> <label for="css">CSS</label><br> <input type="radio" id="javascript" name="fav_language" value="JavaScript"> <label for="javascript">JavaScript</label> </form>
上面的 HTML 代码在浏览器中会显示为：
选择你最喜欢的 Web 语言：
复选框输入类型
<input type="checkbox"> 定义复选框。
复选框允许用户从有限数量的选项中选择零个或多个。
实例
<form> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1">我有一辆自行车</label><br> <input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> <label for="vehicle2">我有一辆汽车</label><br> <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat"> <label for="vehicle3">我有一艘船</label> </form>
上面的 HTML 代码在浏览器中会显示为：
按钮输入类型
<input type="button"> 定义按钮：
实例
<input type="button" onclick="alert('Hello World!')" value="点击我！">
上面的 HTML 代码在浏览器中会显示为：
颜色输入类型
<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持情况，输入字段中可能会出现颜色选择器。
实例
<form> <label for="favcolor">选择你最喜欢的颜色：</label> <input type="color" id="favcolor" name="favcolor"> </form>
日期输入类型
<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持情况，输入字段中可能会出现日期选择器。
实例
<form> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"> </form>
您还可以使用 min 和 max 属性来限制日期：
实例
<form> <label for="datemax">请输入 1980-01-01 之前的日期：</label> <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> <label for="datemin">请输入 2000-01-01 之后的日期：</label> <input type="date" id="datemin" name="datemin" min="2000-01-02"> </form>
本地日期时间输入类型
<input type="datetime-local"> 指定日期和时间输入字段，不带时区。
根据浏览器支持情况，输入字段中可能会出现日期选择器。
实例
<form> <label for="birthdaytime">生日（日期和时间）：</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime"> </form>
电子邮件输入类型
<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持情况，提交时电子邮件地址可以自动验证。
一些智能手机能识别电子邮件类型，并在键盘上添加 ".com" 以匹配电子邮件输入。
实例
<form> <label for="email">请输入你的邮箱：</label> <input type="email" id="email" name="email"> </form>
图像输入类型
<input type="image"> 将图像定义为提交按钮。
图像的路径在 src 属性中指定。
实例
<form> <input type="image" src="submit.gif" alt="提交" width="48" height="48"> </form>
文件输入类型
<input type="file"> 定义了文件选择字段和用于文件上传的“浏览”按钮。
实例
<form> <label for="myfile">请选择一个文件：</label> <input type="file" id="myfile" name="myfile"> </form>
隐藏输入类型
<input type="hidden"> 定义隐藏的输入字段（对用户不可见）。
隐藏字段允许 Web 开发人员包含在提交表单时用户无法看到或修改的数据。
隐藏字段通常存储提交表单时需要更新的数据库记录。
注意：虽然该值不会在页面内容中显示给用户，但使用任何浏览器的开发者工具或“查看源代码”功能都可以看到（并且可以编辑）。不要将隐藏输入用作安全手段！
实例
<form> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <input type="hidden" id="custId" name="custId" value="3487"> <input type="submit" value="提交"> </form>
月份输入类型
<input type="month"> 允许用户选择月份和年份。
根据浏览器支持情况，输入字段中可能会出现日期选择器。
实例
<form> <label for="bdaymonth">生日（月份和年份）：</label> <input type="month" id="bdaymonth" name="bdaymonth"> </form>
数字输入类型
<input type="number"> 定义数字输入字段。
您还可以设置对接受数字的限制。
下面的例子显示了一个数字输入字段，您可以在其中输入 1 到 5 之间的值：
实例
<form> <label for="quantity">数量（在 1 到 5 之间）：</label> <input type="number" id="quantity" name="quantity" min="1" max="5"> </form>
输入限制
以下是一些常见的输入限制属性列表：
| 属性 | 描述 |
|---|---|
| checked | 指定页面加载时应预选输入字段（用于 type="checkbox" 或 type="radio"） |
| disabled | 规定输入字段应被禁用。 |
| max | 规定输入字段的最大值。 |
| maxlength | 规定输入字段的最大字符数。 |
| min | 规定输入字段的最小值。 |
| pattern | 规定用于检查输入值的正则表达式。 |
| readonly | 规定输入字段为只读（无法更改）。 |
| required | 规定输入字段为必填项（必须填写）。 |
| size | 规定输入字段的宽度（以字符计）。 |
| step | 规定输入字段的合法数字间隔。 |
| value | 规定输入字段的默认值。 |
您将在下一章了解更多关于输入限制的内容。
下面的例子显示了一个数字输入字段，您可以在其中输入从 0 到 100 的值，步长为 10。默认值为 30：
实例
<form> <label for="quantity">数量：</label> <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30"> </form>
范围输入类型
<input type="range"> 定义了用于输入数字的控件，其精确值不重要（如滑块控件）。默认范围是 0 到 100。但是，您可以使用 min、max 和 step 属性设置接受的数字限制：
实例
<form> <label for="vol">音量（0 到 50 之间）：</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>
搜索输入类型
<input type="search"> 用于搜索字段（搜索字段的行为类似于常规文本字段）。
实例
<form> <label for="gsearch">搜索 Google：</label> <input type="search" id="gsearch" name="gsearch"> </form>
电话输入类型
<input type="tel"> 用于应包含电话号码的输入字段。
实例
<form>
<label for="phone">请输入您的电话号码：</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
时间输入类型
<input type="time"> 允许用户选择时间（无时区）。
根据浏览器支持情况，输入字段中可能会出现时间选择器。
实例
<form> <label for="appt">请选择一个时间：</label> <input type="time" id="appt" name="appt"> </form>
URL 输入类型
<input type="url"> 用于应包含 URL 地址的输入字段。
根据浏览器支持情况，提交时可以自动验证 URL 字段。
一些智能手机能识别 URL 类型，并在键盘上添加 ".com" 以匹配 URL 输入。
实例
<form> <label for="homepage">添加您的主页：</label> <input type="url" id="homepage" name="homepage"> </form>
周输入类型
<input type="week"> 允许用户选择周和年份。
根据浏览器支持情况，输入字段中可能会出现日期选择器。
实例
<form> <label for="week">请选择一个周：</label> <input type="week" id="week" name="week"> </form>
HTML 输入类型属性
| 标签 | 描述 |
|---|---|
| <input type=""> | 规定要显示的输入类型。 |