【前端】input表单 type属性详解

最新推荐文章于 2025-09-23 22:24:18 发布

原创

最新推荐文章于 2025-09-23 22:24:18 发布 · 置顶 · 8k 阅读

75 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文详细介绍了HTML表单中input元素及其type属性的使用，包括各种类型如文本框、密码框、复选框等，以及HTML5新增的表单类型和属性，帮助开发者更好地理解和应用在前端页面开发中。

前言

前端页面开发中，html表单是网页中最常见元素之一，通过form元素定义表单,表单中包含各种表单项。

input 元素可以用来生成一个供用户输入数据的简单文本框。在默认的情况下，什么样的数据均可以输入。而通过不同的type属性值，可以限制输入的内容。

代码实例：

<input type="text" name="userName" required> 定义一个单行输入文本框。

<form>
  <input type="text" name="yourname"size="30" maxlength="20" 
    readonly value="你只能读不能修改">
</form>

常见的type属性值

1、text 一个单行文本框，默认属性值
2、password 隐藏字符的密码框
3、search 搜索框，在某些浏览器中输入内容会出现叉形标记
4、submit、reset、button 依次是：提交按钮、重置按钮、普通按钮
5、number、range 依次是：只能输入数值的框、只能输入在一个指定范围的数值框
6、checkbox 复选框，一组复选框(name属性值相同)用户可以勾选多个；其中name的值可写可不写，可以一致也可以不一致，没有多大影响。但是必须设置value值。checked=“checked”：设置单选框默认选中项。

radio 单选按钮，一组单选按钮(name属性值要相同)用户只可以选中一个，其中name的值必须一致，