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

感激相遇你好我是阿ken

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

🌊🌈关于前言：

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

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

🌊🌈关于内容：

7.3.2_input 元素的其他属性

除了 type 属性之外，< input/> 标记还可以定义很多其他的属性，以实现不同的功能。

(1) autofocus 属性

在访问 Google 主页时，页面中中的文字输入框会自动获得光标焦点，以便输入关键词。在 HTML5 中，autofocus 属性用于指定页面加载后是否自动获取焦点。

案例：演示 : autofocus 属性的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autofocus属性的使用</title>
</head>
<body>

<form action="#" method="get">
请输入搜索关键词: 
<input type="text" name="user_name" autocomplete="off" autofocus="autofocus"/>
<br/>
<input type="submit" value="提交" />
</form>

</body>
</html>

在这里插入图片描述

在上述代码中，首先向表单中添加一个 < input /> 元素，然后通过 “ autocomplete= " off " 将自动完成功能设置为关闭状态。同时，将 autofocus 属性设置为 autofocus , 指定在页面加载完毕后自动获取焦点。

运行后可以看出，< input /> 元素输入框在页面加载后自动获取焦点，并且关闭了自动完成功能。

(2) form 属性

在 HTML5 之前，如果用户要提交一个表单，必须把相关的控件元素都放在表单内部，即 < form> 和 < /form> 标签之间。在提交表单时，会将页面中不是表单子元素的控件直接忽略掉。

HTML5 中的 form 属性，可以把表单内的子元素写在页面中的任一位置，只需为这个元素指定 form 属性并设置属性值为该表的 id 即可。此外，form 属性还允许规定一个表单控件属于多个表单。

案例：演示 form 属性的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>autofocus 属性的使用</title>
</head>
<body>

<form action="#" method="get" id="user_form">
请输入您的姓名: 
<input type="text" name="first_name"/> 
<input type="submit" value="提交" />
</form>

<p>下面的输入框在form元素外，但因为指定了form属性为表单的id,所以该输入框仍然属于表单的一部分。</p>

请输入您的呢称: 
<input type="text" name="last_name" form="user_form"/><br/>

</body>
</html>

在这里插入图片描述

上述案例中，分别添加两个 < input /> 元素，并且第二个 < input /> 元素不在 < form> < /form> 标记中。另外，指定第二个 < input /> 元素的 form 属性值为该表单的 id。

此时，如果在输入框中分别输入姓名和昵称，则 first_name 和 last_name 将分别被赋值为输入的值。例如，在姓名处输入“张三”，昵称处输入“小张”
在这里插入图片描述

然后单击 " 提交 " 按钮，在测览器的地址栏中可以看到 " first_name=张三&last_name=小张 " 的字样，表示服务器端接收到 " name = " 张三 " 和 " name = " 小张 " 的数据。
在这里插入图片描述

如果第二个 < input/> 标签没有 form= " user_form " ，重复上述步骤，则服务器端只接收到 " name = " 张三 " 的数据。
在这里插入图片描述

注意:
_
form 属性适用于所有的 input 输入类型。在使用时，只需引用所属表单的 id 即可。

(3) list 属性

在上面的小节中，已经学习了如何通过 datalist 元素实现数据列表的下拉效果。而 list 属性用于用于指定输入框所绑定的 datalist 元素，其值是某个 datalist 元素的 id。

案例：来进步学习 list 属性的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>list 属性的使用</title>
</head>
<body>

<form action="#" method="get">
请输入网址: 
<input type="url" list="url_list" name="weburl"/>
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn"></option>
<option label="搜狐" value="http://www.sohu.com"></option>
<option label="阿ken的博客" value="https://blog.csdn.net/kenken_"></option>
</datalist>
<input type="submit" value="提交"/>
</form>

</body>
</html>

在这里插入图片描述上述案例中，分别向表单中添加 input 和 datalist 元素，并且将 < input /> 元素的 list 属性指定为 datalist 元素的 id 值。

单击输入框，就会弹出已定义的网址列表，
在这里插入图片描述

(4) multiple 属性

multiple 属性指定输入框可以选择多个值，该属性适用于 email 和 file 类型的 input 元素。muliple 属性用于 email 类型的 input 元素时，表示可以向文本框中输入多个 E-mail 地址，多个地址之间通过逗号隔开; multiple 属性用于 file 类型的 input 元素时，表示可以选择多个文件。

案例: 演示 muliple 属性的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>multiple 属性的使用</title>
</head>
<body>

<form action="#" method="get">
电子邮箱: 
<input type="email" name="myemal1" multiple="multiple"/>&nbsp;&nbsp; (如果电子邮箱有多个，请使用逗号分隔) 
<br/><br/>
上传照片: 
<input type="file" name="selfile" multiple="multiple"/>
<br/><br/>
<input type="submit" value="提交"/>
</form>

</body>
</html>

在这里插入图片描述
在上述案例中，分别添加 email 类型和 file 类型的input元素，并且使用 mulitiple 属性指定输入框可以选择多个值。

如果想要向文本框中输入多个E-mal地址，可以将多个地址之间通过逗号分隔: 如果想要选择多张照片，可以按下ctrl键选择多个文件，
在这里插入图片描述

(5) min、 max和step属性

HTML5 中的 min、max 和 step 属性用于为包含数字或日期的 input 输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于date、pickers、 number 和 range 标签。具体属性说明如下：

max: 规定输入框所允许的最大输入值。
min: 规定输入框所允许的最小输入值。
step: 为输入框规定合法的数字间隔，如果不设置，默认值是1。

由于前面介绍 input 元素的 number 类型时，已经讲解过 min、max 和 step 属性的使用，这里不再举例说明。

(6) pattern 属性

pattern 属性用于验证 input 类型输入框中，用户输入的内容是否与所定义的正则表达式相匹配。pattern 属性适用于的类型是: text、search、url、tel、email 和 password 的 < input/> 标记。

常用的正则表表达式和说明

正则表达式	说明
^ [0-9]*$	数字
^\d{ n }$	n 位的数字
^\d{ n, }$	至少 n 位的数字
^\d( m,n )$	m - n 位的数字
^(0竖线[1-9] [0-9] *)$	零和非零开头的数字
^([1-9][0-9]*)+(.[0-9] { 1,2 } ?$	非零开头的最多带两位小数的数字
^(-竖线+)?\d+(.\d+)?$	正数、负数和小数
^\d+ $或 ^ [1-9]\d*竖线0$	非负整数
^-[1-9]\d*竖线0 $或 ^((-\d+)竖线(0+))$	非正整数
^ [\u4e00-\u9fa5] { 0, }$	汉字
^ [A-Za-z0-9]+ $或^ [A-Za-z0-9]{ 4,40 }$	英文和数字
^ [A-Za-z]+$	由26个英文字母组成的字符串
^ [A-Za-z0-9]+$	由数字和26个英文字母组成的字符串
^ \w+ $或^\w{ 3,20 }$	由数字、26个英文字母或者下划线组成的字符串
^\u4E00-\u9FA5A-Za-z0-9_ ]+$	中文、英文、数字包括下划线
^\w+([-+.]\w+)* @\w+([-.]\w+)* \ .\w+([-.])\w+)*$	E-mail 地址
(a-zA-z]+://[ ^\s ]* 或^http://([\w-]+.)+[\w-]+(/[\w-./?%&=]* )?$	URL地址
^\d{ 15 }竖线\d{ 18 }$	身份证号(15位、18位数字)
^([0-9]){ 7,18 }(x竖线X)? $或 ^ \d{ 8,18 }竖线[0-9x]{ 8,18 }竖线[0-9X]{ 8,18 }?$	以数字、字母x结尾的短身份证号码
^ [a-zA-Z] [ a-zA-Z0-9_]{ 4,15 }$	账号是否合法(字母开头，允许5~16字节，允许字母数字下划线)
^ [a-zA-Z]\w{ 5,17 }$	密码(以字母开头，长度为6~18.只能包含字母、数字和下划线)年

案例: 演示了解 pattern 属性以及常用的正则表达式，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pattern 属性</title>
</head>
<body>

<form action="#" method="get">
帐&nbsp;&nbsp;&nbsp;&nbsp;号: 
<input type="text" name="username" pattern="^ [a-zA-z] [a-zA-Z0-9_] { 4,15 }$" />(以字母开头，允许 5 ~ 16 字节，允许字母数字下划线) 
<br/>
密&nbsp;&nbsp;&nbsp;&nbsp;码: 
<input type="paasword" name="pwd" pattern=" ^[a-zA- Z]\w{ 5,17 }$" /> (以字母开头，长度在6~18，只能包含字母、数字和下划线) <br/>
身份证号: 
<input type="text" name="mycard" pattern="^\d{ 15 }|\d{ 18 }$" /> (15位、18位数字) 
<br/>
E-mail 地址: 
<input type="email" name="myemail" pattern="^\w+([-+.J]\w+)*@\w+([-.]\ W+)*\.\w+([-.]\w+)*$"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>

在这里插入图片描述

在上述案例中，第 9 ~ 12 行代码分别用于插入 " 账号 " " 密码 " " 身份证号 " " E-mail 地址 " 的输入框，并且通过 pattern 属性来验证输入的内容是否与所定义的正则表达式相匹配。

当输入的内容与所定义的正则表达式格式不相匹配时，单击 " 提交 " 按钮，

(7) placeholder 属性

placeholder 属性用于为 input 类型的输入柜提供相关提示信息，以描述输入框期待用户输入何种内容。在输入框为空时显式出现，而当输入框获得焦点时则会消失。

案例：演示 placeholder 属性的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder 属性</title>
</head>
<body>

<form action="#" method="get">
请输入邮政编码:
<input type="text" name="code" pattern="[0-9]{ 6 }" placeholder="请输入6位数的邮政编码"/>
<input type="submit" value="提交"/>
</form>

</body>
</html>

在这里插入图片描述

在上述案例中，使用 pattern 属性来验证输入的邮政编码是否是6位数的数字，使用 placeholder 属性来提示输入框中需要输入的内容。

注意:
_
placeholder 属性适用于 type 属性值为 text、search、url、tel、email 及 password 的< input/>标记。

(8) required 属性

HTML5 中的输入类型，不会自动判断用户是否在输入框中输入了内容，如果开发者要求输入框中的内容是必须填写的，那么需要为 input 元素指定 required 属性。required 属性用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

案例：演示 required 属性的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>required 属性</title>
</head>
<body>

<form action="#" method="get">
请输入姓名: 
<input type="text" name="user_name" required=" required"/> 
<input type="submit" value="提交"/>
</form>

</body>
</html>

在这里插入图片描述

在上述案例中，为 < input/> 元素指定了 required 属性。当输入柜中内容为空时，单击 " 提交按钮 “，将会出现提示信息，用产必须在输入内容后，才允许提交表单。

今日入门学习暂时告一段落

Peace

🌊🌈往期回顾：

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「评论」 谢谢支持❤

阿ken的HTML、CSS的入门指南（十四）_表单的应用

🌊🌈关于前言：

🌊🌈关于内容：

7.3.2_input 元素的其他属性

(1) autofocus 属性

(2) form 属性

(3) list 属性

(4) multiple 属性

(5) min、 max和step属性

(6) pattern 属性

(7) placeholder 属性

(8) required 属性

🌊🌈往期回顾：

🌊🌈关于后记：