Javascript——＜input＞: 输入（表单输入）元素的type和样式属性

最新推荐文章于 2025-09-30 08:44:25 发布

原创最新推荐文章于 2025-09-30 08:44:25 发布 · 2.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #js

学习笔记同时被 3 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

css

32 篇文章

订阅专栏

本文详细探讨了JavaScript中＜input＞元素的type属性，介绍了不同type值对输入框功能的影响。同时，文章还涵盖了与输入元素相关的样式设置，帮助开发者更好地控制表单输入的外观和行为。

<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

type:

< input >的工作方式相当程度上取决于type属性的值，如果未指定此属性，则采用的默认类型为text。
可用的值：

Type	描述	Spec
Button	没有默认行为的按钮，上面显示value属性的值，默认为空
checkbox	复选框，可设为选中或未选中
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器	HTML5
date	输入日期的控件（年/月/日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮	HTML5
datetime-local	输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮	HTML5
email	编辑邮箱地址的区域。类似text输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘
file	让用户选择文件的控件，使用accept属性规定控件能选择的文件类型
hidden	不显示的控件，其值仍会提交到服务器
image	带图像的submit按钮，显示的图像由src属性规定，如果src缺失，alt属性就会显示
month	输入年和月的控件，没有时区	HTML5
number	用于输入数字的控件。如果支持，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户
radio	单选按钮，允许在多个拥有相同name值的选项中选中其中一个
range	用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值，同时使用htmlattrdefmin和htmlattrdefmax来规定值的范围	HTML5
reset	将表单的所有内容重置为默认值，不推荐
search	用于搜索字符串的单行文字区域，输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标	HTML5
submit	用于提交表单的按钮
tel	输入电话号码的控件，拥有动态键盘的设备上会显示电话数字键盘	HTML5
text	默认值，单行的文本区域，输入中的换行会被自动去除
time	用于输入时间的控件，不包括时区	HTML5
url	用于输入URL的控件，类似text输入，但有验证参数，在支持动态键盘的设备上有相应的键盘	HTML5
week	用于输入以年和周数组成的日期，不带时区

属性

< input >元素属性包括全局HTML属性和以下属性：

属性	相关的type	描述
accept	file	用于规定文件上传控件中期望的文件类型
alt	image	image type的alt属性，是可访问性的要求
autocomplete	所有	用于表单的自动填充功能
autofocus	所有	页面加载时自动聚焦到此表单控件
capture	file	文件上传控件中媒体拍摄的方式
checked	radio，checkbox	用于控制控件是否被选中
dirname	text，search	表单区域的一个名字，用于在提交表单时发送元素的方向性
disabled	所有	表单控件是否被禁用
form	所有	将控件和一个form元素联系在一起
formaction	image，submit	用于提交表单的url
formenctype	image，submit	表单数据集的编码方式，用于表单提交
formmethod	image，submit	用于表单提交的HTTP方法
formnovalidate	image，submit	提交表单时绕过对表单控件的验证
formtarget	image，submit	表单提交的浏览上下文
height	image	和< img>的height属性相同，垂直方向
list	绝大部分	自动填充选项的< datalist>的id值
max	数字type	最大值
maxlength	password，search，tel，text，url	value的最大长度（最多字符数目）
min	数字type	最小值
minlength	password，search，tel，text，url	value的最小长度（最少字符数目）
multiple	email，file	布尔值。是否允许多个值
name	所有	input表单控件的名字。以名字/值对的形式随表单一起提交
pattern	password，text，tel	匹配有效value的模式（pattern）
placeholder	password，search，tel，text，url	当表单控件为空时，控件中显示的内容
readonly	绝大部分	布尔值。存在时表示控件的值不可编辑
required	绝大部分	布尔值。表示此值为必填项或者提交表单前必须先检查该值
size	email，password，tel，text	控件的大小
src	image	和< img>的src属性一样；图像资源的地址
step	数字type	有效的递增值
type	所有	input表单控件的type
value	所有	表单控件的值，以名字/值对的形式随表单一起提交
width	image	与< img>的width属性一样