这是我参与 8 月更文挑战的第 10 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

??关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴

??关于内容：

7.3_input 元素及属性

< input /> 元素是表单中最常见的元素，网页中常见的单行文本框、单选按钮、复选框等都是通过它定义的。在 HTML5 中，< input /> 标记拥有多种输入类型及相关属性。

input 元素的相关属性

属性	属性值	描述
type	text	单行文本输入框
type	password	密码输入框
type	radio	单选按钮
type	checkbox	复选框
type	button	普通按钮
type	submit	提交按钮
type	reset	重置按钮
type	image	图像形式的提交按钮
type	hidden	隐藏域
type	file	文件域
type	email	E-mal地址的输入域
type	url	URL地址的输入城
type	number	数值的输入域
type	range	一定范围内数字值的输入域
type	Date pickers (date, month, week, time, datetime, datetime-local)	日期和时间的输入类型
type	search	搜索域
type	color	颜色输入类型
type	tel	电话号码输入类型
name	由用户自定义	控件的名称
value	由用户自定义	input 控件中的默认文本值
size	正整数	input 控件在页面中的显示宽度
readonly	readonly	该控件内容为只读(不能编辑修改)
disabled	disabled	第一次加载页面时禁用该控件(显示为灰色)
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	控件允许输入的最多字符数
autocomplete	on/off	设定是否自动完成表单字段内容
autofocus	autofocus	指定页面加载后是否自动获取焦点
form	form元素的id	设定字段隶属于哪一个或多个表单
list	datalist 元素的id	指定字段的候选数据值列表
multiple	multiple	指定输入框是否可以选择多个值
min、max和step	数值	规定输入框所允许的最大值、最小值及间隔
pattern	字符串	验证输入的内容是否与定义的正则表达式匹配
placeholder	字符串	为 input 类型的输入框提供一种提示
required	required	规定输入框填写的内容不能为空

7.3.1_input 元素的 type 属性

在 HTML5 中，< input> 元素拥有多个 type 属性值，用于定义不同的控件类型。下面我们将对不同的 input 控件进行讲解。

(1) 单行文本输入框 < input type=“text”/>

单行文本输入框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有 name、value、maxlength。

(2) 密码输入框 < input type=“password”/>

密码输入框用来输入密码，其内容将以圆点的形式显示。

(3) 单选按钮 < input type=“radio”/>

单选按钮用于单项选择。如选择性别、是否操作等。需要注意的是，在定义单选按钮时，必须为同一组中的选项指定相同的 name 值，这样 “ 单选 “ 才会生效。此外，可以对单选按钮应用 checked 属性，指定默认选中项。

(4) 复选框 < input type=“checkbox”/>

复选框常用于多项选择，如选择兴趣、爱好等，可对其应用checked属性，指定默认选中项。

(5) 普通按钮 < input type=“button”/>

普通按钮常常配合 javascript 脚本语言使用，读者了解即可。

(6) 提交按钮 < input type=“submit”/>

提交按钮是表单中的核心控件，用户完成信息的输入后，一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value 属性，改变提交按钮上的默认文本。

(7) 重置按钮 < input type=“reset” />

当用户输入的信息有误时，可单击重置按钮取消已输入的所有表单信息。可以对其应用 value 属性，改变重置按钮上的默认文本。

(8) 图像形式的提交按钮 < input type= “image” />

图像形式的提交按钮与普通的提交按钮在功能上基本相同，只是它用图像替代了默认的按钮，外观上更加美观。需要注意的是，必须为其定义 src 属性指定图像的 url 地址。

(9) 隐藏域 < input type=” hidden” />

?

隐藏域对于用户是不可见的，通常用于后台的程序，读者了解即可。

(10) 文件域 < input type=“file” />

当定义文件域时，页面中将出现一个文本框和一个 “ 浏览… ” 按钮，用户可以通过填写文件路径或直接选择文件的方式，将文件提交给后台服务器。

案例：演示，

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

<form action="#" method="post">
用户名:  <!--text单行文本输入框-->
<input type="text" va1ue="张三" maxlength="6"/><br/><br/>
密码:   <!--password密码输入框-->
<input type="password" size="40"/><br/><br/>
性别: <!--radio单选按钮-->
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女<br /><br />
兴趣:  <!--checkbox复选框-->
<input type="checkbox" />唱歌
<input type="checkbox" />跳押
<input type="checkbox" />游泳<br /><br />
上传头像:
<input type="file" /><br /><br /><!--fi1e文件域-->
<input type="submit" /> <!--submit提交按钮-->
<input type="reset" />  <!--reset重置按钮-->
<input type="button" value="普通按钮" /><!--button普通按钮-->
<input type="images/login.gif" /> <!--image图像域-->
<input type="hidden" />
<!--hidden隐藏域-->
</form>

</body>
</html>
复制代码

在这里插入图片描述

在上述代码中，通过对 < input /> 元素应用不同的 type 属性值，来定义不同类型的 input 控件，并对其中的一些控件应用 < input /> 标记的其他可选属性。

例如，在代码中，通过 maxlength 和 value 属性定义单行文本输入框中允许输入的最多字符数和默认显示文本，通过 size 属性定义密码输入框的宽度，通过 name 和 checked 属性定义单选按钮的名称和默认选中项。

(11) email 类型 < input type=“email” />

email 类型的 input 元素是一种专门用于输入 E-mail 地址的文本输入框，用来验证 email 输入框的内容是否符合 E-mail 邮件地址格式；如果不符合，将提示相应的错误信息。

(12) url 类型 < input type=“url” />

url 类型的 input 元素是一种用于输入 URL 地址的文本框。如果所输入的内容是 URL 地址格式的文本，则会提交数据到服务器；如果输入的值不符合 URL 地址格式，则不允许提交，并且会有提示信息。

(13) tel 类型 < input type=“tel” />

tel 类型用于提供输入电话号码的文本框，由于电话号码的格式干差万别，很难实现一个通用的格式。因此，tel 类型通常会和 pattern 属性配合使用，关于 pattern 属性将在下面的小节中进行讲解。

(14) search 类型 < input type=“search” />

search 类型是一种专门用于输入搜索关键词的文本框，它能自动记录一些字符，如站点搜索或者 Google 搜索。在用户输入内容后，其右侧会附带一一个删除图标，单击这个图标按钮可以快速清除内容。

(15) color 类型 < input type=“color” />

color 类型用于提供设置颜色的文本框，用于实现一个 RGB 颜色输入。其基本形式是 #RRGGBB，默认值为 #000000，通过 value 属性值可以更改默认颜色。单击 color 类型文本框，可以快速打开拾色器面板，方便用户可视化选取一种颜色。

案例：通过设置input元素的type属性来演示不同类型的文本框的用法，

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

<form action="#" method="get">
请输入您的邮箱: <input type="email" name="formmail"/><br/>
请输入个人网址: <input type="url" name="user_url"/><br/>
请输人电话号码: <input type="tel" name="telphone" pattern="^\d{ 11 } $"/><br/>
输人搜索关键词: <input type="search" name="searchinfo"/><br/>
请选取一种颜色: <input type="color" value="#FF3E96"/>
<input type="color" name="color" name="color1"/>
<input type="submit" value="提交"/>
</form>

</body>
</html>
复制代码

在这里插入图片描述

在上述代码中，通过 input 元素的 type 属性将文本柜分别设置为 email 类型、url 类型、tel 类型、search 类型以及 color 类型。其中，第 11 行代码，通过 pattern 属性设置 tel 文本框中的输入长度为 11 位。

注意:
_
需要注意的是，不同的浏览器对 url 类型的输入框的要求有所不同，在多数浏览器中，要求用户必须输入完整的 URL 地址，并且允许地址前有空格的存在。
例如，在输入网址时输入” www.itcast.cn/ “，则可以提交成功。

(16) number 类型 < input type=“number” />

number 类型的 input 元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。

number 类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等，具体属性说明如下。

value: 指定输入框的默认值。
max: 指定输入框可以接受的最大的输入值。
min: 指定输入框可以接受的最小的输入值。
step: 输入域合法的间隔，如果不设置，默认值是 1。

案例：演示 number 类型的 input 元素的用法，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>number类型的使用</title>
</head>

<body>
<form action="#" method="get">
请输入数值: 
<input type="number" name="number1" value="1" min="1" max="20" step="4"/>
<br/>
<input type="submit" value="提交"/>
</form>

</body>
</html>
复制代码

在这里插入图片描述

在上述代码中，将 input 元素的 type 属性设置为 number 类型，并且分别设置 min、max 和 step 属性的值。

运行后可知 number 类型文本框中的默认值为 “ 1 ” ；读者可以手动在输入框中输入数值或者通过单击输入框的数值按钮来控制数据。

(17) range 类型 < input type= “range” />

range 类型的 input 元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与 number 类型一样，通过 min 属性和 max 属性，可以设置最小值与最大值，通过 step 属性指定每次滑动的步幅。

(18) Date pickers 类型< input type= “date, month, week…” />

Date pickers 类型是指时间日期类型，HTML5 中提供了多个可供选取日期和时间的输入类型，用于验证输入的日期。

时间和日期类型：

时间和日期类型	说明
date	选取日、月、年
month	选取月、年
week	选取周和年
time	选取时间(小时和分钟)
datetime	选取时间、日、月、年(UTC时间)
datetime-local	选取时间、日、月、年(本地时间)

在上表中，UTC 是 Universal Time Coordinated 的英文缩写，即 “ 协调世界时 ” ，又称世界标准时间。简单地说，UTC 时间就是 0 时区的时间。
例如如果北京时间为早上 8 点，则 UTC 时间为 0 点，即 UTC 时间比北京时间晚 8 小时。

案例：在 HTML5 中添加多个 input 元素，分别指定这些元素的 type 属性值为时间日期类型，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>时间日期类型的使用</title>
</head>
<body>

<form action="#" method="get">
<input type="date"/>&nbsp;
<input type="month"/>&nbsp;
<input type="week"/> &nbsp;
<input type="time"/>&nbsp;
<input type="datetime"/>&nbsp;
<input type="datetime-local"/>
<input type="submit" value="提交"/>
</form>

</body>
</html>
复制代码