这是我参与 8 月更文挑战的第 12 天，活动详情查看： 8月更文挑战
感激相遇 你好 我是阿ken
作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)
本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴
🌊🌈关于内容：
7.4 其他表单元素
在7.3节中，介绍了一系列的input控件。除了input元素外，HTML5 表单元素还包括textarea、select、 datalist、 keygen、 output 等，本节将对它们进行详细讲解。
7.4.1 textarea 元素
当定义 input 控件的 type 属性值为 text 时，可以创建一个单行文本输入框。 但是，如果需要输入大量的信息，单行文本输入框就不再适用，为此 HTML 语言提供了< textarea> < /textarea> 标记。通过 textarea 控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
复制代码
在上面的语法格式中，cols 和 rows 为 < textarea> 标记的必须属性，其中 cols 用来定义多行文本输入框每行中的字符数，rows 用来定义多行文本输入框显示的行数，它们的取值均为正整数。
值得一提的是， < textarea> 元素除了 cols 和 rows 属性外，还拥有几个可选属性，分别为disabled、name 和 readonly,
textarea 可选属性
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 控件的名称 |
| readonly | readonly | 该控件内容为只读(不能编辑修改) |
| disabled | disabled | 第一次加载页面时禁用该控件(显示为灰色) |
案例：演示 textarea 元素的使用，
<!doctype html>
<html>
<head?
<meta charset="utf-8">
<title>textarea控件</title>
</head>
<body>
<form action="#" method="post">
评论: <br/>
<textarea co1s="60" rows="8">
评论的时候，请遵纪守法并注意语言文明，多给文档分享人一些支持。
</textarea><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
复制代码
在上述案例中，通过 < textarea> < /textarea> 标记定义一个多行文本输入框，并对其应用 clos 和 rows 属性来设置多行文本输入框每行中的字符数和显示的行数。在多行文本输入框之后，通过将 input 控件的 type 属性值设置为 submit ，定义了一个提交按钮。同时，为了使网页的格式更加清晰，在代码中的某些部分应用了换行标记 < br />。
- 注意:
_
各浏览器对 cols 和 rows 属性的理解不同，当对 textarea 控件应用 cols 和 rows 属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，更常用的方法是使用 CSS 的 width 和 height 属性来定义多行文本输入框的宽高。
7.4.2 select 元素
用于制作包含多个选项的下拉菜单
使用 select 元素定义下拉菜单的基本语法格式如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</opt1on>
</select>
复制代码在上面的语法中，< select> < /select> 标记用于在表单中添加一个下拉菜单，< option> < /option> 标记嵌套在 < select> < /select> 标记中，用于定义下拉菜单中的具体选项，每对 < select> < /select> 中至少应包含一对 < option> < /option>。
值得一提的是，在 HTML5 中，可以为 < select> 和 < option> 标记定义属性，以改变下拉菜单的外观显示效果，具体如表所示：
< select>和< option>标记的常用属性
| 标记名 | 常用属性 | 描述 |
|---|---|---|
| < select> | size | 指定下拉菜单的可见选项数(取值为正整数) |
| < select> | multiple | 定义multiple="muliple"时，下拉菜单将具有多项选择的功能，方法为按住 Ctrl 键的同时选择多项 |
| < option> | selected | 定义 selected = " selected " 时，当前项即为默认选中项 |
案例：演示几种不同的下拉菜单效果，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>select控件</title>
</head>
<body>
<form action="#" method="post">
所在校区: <br />
<!--最基本的下拉菜单-->
<select>
<option>-请选择-</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>武汉</option>
<option>成都</option>
</select><br /><br />
特长(单选):<br />
<select>
<option>唱歌</option>
<option selected="selected">画面</option>
<!--设置默认选中项-->
<option>跳舞</option>
</select><br/><br />
爱好(多选): <br />
<select multiple="multiple" size="4">
<!--设置多选和可见选项数-->
<option>读书</option>
<option selected="selected">写代码</option>
<!--设置默认选中项-->
<option>旅行</option>
<option selected="selected">听音乐</option>
<!--设置默认选中项-->
<option>踢球</option>
</select><br /><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
复制代码
在上述案例中，通过 < select>、< option> 标记及相关属性创建了 3 个不同的下拉菜单，其中第1个为最基本的下拉菜单，第 2 个为设置了默认选项的单选下拉菜单，第 3 个为设置了两个默认选项的多选下拉菜单。在下拉菜单之后，通过 input 控件定义了一个提交按钮。同时，为了使网页的格式更加清晰，在代码中的某些部分应用了换行标记< br />。
上面实现了不同的下拉菜单效果，但是，在实际网页制作过程中，有时候需要对下拉菜中的远项进行分组。这样当存在很多选项时，要想找到相应的选项就会更加容易，如图7-5所示即为选项分组后的F拉菜单中选项的展示效果。
案例：演示 使用 < optgroup> < /optgroup> 为下拉菜单中的选项分组的方法和效果，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>为下拉菜单中的选项分组</title>
</head>
<body>
<form action="#" method="post">
城区: <br />
<select>
<optgroup label="北京">
<option>东城区</option>
<option>西城区</option>
<option>朝阳区</option>
<option>海淀区</option>
</optgroup>
<optgroup label="上海">
<option>浦东新区</option>
<option>徐汇区</option>
<option>虹口区</option>
</optgroup>
</select>
</form>
</body>
</html>
复制代码
在上述案例中，< optgroup> < /optgroup> 标记用于定义选项组，必须嵌套在 < select> < /select> 标记中，一对 < select> < /select> 中通常包含多对 < optgroup> < /optgroup>。在 < optgroup> 与 < /optgroup> 之间为 < option> < /option> 标记定义的具体选项。需要注意的是，< optgroup> 标记有一个必需属性 label，用于定义具体的组名。
7.4.3 datalist 元素
datalist 元素用于定义输入框的选项列表，
列表通过 datalist 内的option元素进行创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。datalist 元素通常与 input 元素配合使用来定义 input 的取值。在使用 < datalist> 标记时，需要通过 id 属性为其指定一个唯一的标识，然后为 input 元素指定 list 属性，将该属性值设置为 option 元素对应的 id 属性值即可。
案例：演示 datalist 元素的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>datalist 元素</title>
</head>
<body>
<form action="#" method="post">
请输入用户名:
<input type="text" list="namelist"/>
<datalist id="namelist">
<option>admin</option>
<option>lucy</option>
<option>lily</option>
</datalist>
<input type="submit" value="提交" />
</form>
</body>
</html>
复制代码
鼠标指针放在文本框上会出现倒立的三角，然后将指针单击一下倒立的三角，
在上述案例中，首先向表单中添加一个input 元素，并将其 list 属性值设置为 “namelist” 。然后，添加 id 名为 " namelist " 的 datalist 元素，并通过 datalist 内的 option 元素创建列表。
7.4.4 keygen 元素
keygen 元素用于表单的密钥生成器，能够使用户验证更为安全、可靠。当提交表单时会生成两个键: 一个是私钥，它存储在客户端; 另一个是公钥，它被发送到服务器，验证用户的客户端证书。如果新的浏览器能够对 keygen 元素的支持度再增强一些， 则有望使其成为一种有用的安全标准。
keygen 元素的常用属性
| 属性 | 说明 |
|---|---|
| autofocus | 使 keygen 字段在页面加载时获得焦点 |
| challenge | 如果使用，则将keygen 的值设置为在提交时询问 |
| disabled | 禁用 keytag 字段 |
| form | 定义该 keygen 字段所属的一个或多个表单 |
| keytype | 定义 keytype 。 rsa 生成 RSA 密钥 |
| name | 定义 keygen 元素的唯一名称。 nane属性用于在提交表单时搜集字段的值 |
案例：演示 keygen 元素的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>keyge元素</title>
<body>
<form action="#" method="get">
请输入用户名:
<input type="text" name="user_name"/><br/>
请选择加密强度:
<keygen name="security"/><br/>
<input type="submit" value="提交" />
</form>
</body>
</html>
复制代码
在上述案例中，使用 keygen 元素并且设置其 name 属性值为 " security " 来定义提交表单时搜集字段的值。
已废弃
该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
7.4.5 output 元素
output 元素用于不同类型的输出，可以在浏览器中显示计算结果或脚本输出。
output 元素常用属性
| 属性 | 说明 |
|---|---|
| for | 定义输出域相关的一个或多个元素 |
| form | 定义输入字段所属的一个或多个表单 |
| name | 定义对象的唯名称 |
关于 output 元素及其相关属性，读者只需了解即可，不必做过多研究。
7.5 CSS 控制表单样式
使用表单的目的是为了提供更好的用户体验，在网页设计时，不仅需要设置表单相应的功能，而且希望表单控件的样式更加美观，使用 CSS 可以轻松控制表单控件的样式。
案例：讲解 CSS 对表单样式的控制
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 控制表单样式</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>账号: </span>
<input type="text" name="username" value="admin" class="num" pattern="^[a-zA-Z] [a-zA-Z0-9_]{ 4,15 }$"/>
</p>
<p>
<span>密码: </span>
<input type="password" name="pwd" class="pass" pattern="^[a-zA-Z]\w{ 5, 17 }$"/>
</p>
<p>
<input type="button" class="btn01" value="登录"/>
<input type="button" class="btn02" value="注册"/>
</p>
</form>
</body>
</html>
复制代码
在上述案例中，使用表单 form 嵌套 < p> 标记进行整体布局，并分别使用 < span> 标记和 < input> 标记来定义提示信息及不同类型的表单控件。
接下来用 CSS 对其进行修饰，具体代码如下：
<style type="text/css">
body{
font-size: 12px;
font-family: "宋体";
} /*全局控制*/
body, form, input, p{
padding: 0;
margin: 0;
border: 0;
} /*重置浏览览器的默认样式*/
form{
width: 320px;
height: 150px;
padding-top: 20px;
margin: 50px auto; /*使表单在浏览器中居中*/
background:#f5f8fd; /*为表单添加背景颜色*/
border-radius: 20px; /*设置圆角边框*/
border:3px solid #4faccb;
}
p{
margin-top: 15px;
text-align: center;
}
P span{
width: 40px;
display: inline-block;
text-align: right;
}
.num, .pass{ /*对文本框设置共同的宽、高、边框、内边距*/
width: 152px;
height: 18px;
border: 1px solid #38albf;
padding: 2px 2px 2px 22px;
}
.num{ /*定义第一个文本框的背景、文本颜色*/
background: url(images/1.jpg) no-repeat 5px center #FFE;
color: #999;
}
.pass{
background: url(imags/2.jpg) no-repeat 5px center #FFF;
}
.btn01, .btn02{
width: 60px;
height: 25px;
border-radius: 3px; /*设置圆角边框*/
border: lpx solid #6b5d50;
margin-left: 30px;
}
.btn01{
background: #3bb7ea; /*设置第一个按钮的背景色*/
}
.btn02{
background: #fb8c16; /*设置第二个按钮的肯景色/
}
</style>
复制代码上面的案例中使用 CSS 轻松实现了对表单控件的字体、边框、背景和内边距的控制。
在使用 CSS 控制表单样式时，还需要注意以下几个问题：
- (1) 由于 form 是块元素，重置浏览器的默认样式时，需要清除其内边距 padding 和外边距 margin , 如上面 CSS 样式代码中的第二个选择器 —— 并集选择器。
- (2) input 控件默认有边框效果，当使用 < input /> 标记定义各种按钮时，通常需要清除其边框，如上面 CSS 样式代码中的第二个选择器 —— 并集选择器。
- (3) 通常情况下需要对文本框和密码框设置 2 ~ 3 像素的内边距，以使用户输入的内容不会紧贴输入框，如上面 CSS 样式代码中的第 26 行代码所示。
今日入门学习暂时告一段落
Peace
🌊🌈往期回顾：
阿ken的HTML、CSS的入门指南(一)_HTML基础
阿ken的HTML、CSS的入门指南(二)_HTML页面元素和属性
阿ken的HTML、CSS的入门指南(三)_文本样式属性
阿ken的HTML、CSS的入门指南(四)_CSS3选择器
阿ken的HTML、CSS的入门指南(五)_CSS盒子模型
阿ken的HTML、CSS的入门指南(六)_CSS盒子模型
阿ken的HTML、CSS的入门指南(七)_CSS盒子模型
阿ken的HTML、CSS的入门指南(八)_CSS盒子模型
阿ken的HTML、CSS的入门指南(九)_浮动与定位
阿ken的HTML、CSS的入门指南(十)_浮动与定位
阿ken的HTML、CSS的入门指南(十一)_浮动与定位
阿ken的HTML、CSS的入门指南(十二)_表单的应用
阿ken的HTML、CSS的入门指南(十三)_表单的应用
阿ken的HTML、CSS的入门指南(十四)_表单的应用
🌊🌈关于后记：
感谢阅读，希望能对你有所帮助 博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我 感谢每一位小伙伴不吝赐教
原创不易，「点赞」+「评论」 谢谢支持❤
