VOL 405
05
2022-07
今天距2023年180天
ITester软件测试小栈第405次推文
点击上方蓝字“ITester软件测试小栈“关注我，每周一、三、五早上 09:00准时推送，每月不定期赠送技术书籍。
微信公众号后台回复“资源”、“测试工具包”领取测试资源，回复“微信交流群”、“内推群”一起进群打怪。
本文7967字，阅读约需20分钟
Hi，大家好，我是CoCo。HTML 和 CSS 是前端开发世界的支柱。虽然精通 CSS 和 JavaScript 对于创建出色的网站至关重要，但人们经常低估HTML 文件就可以完成的工作。只有熟悉常用的HTML代码，才能在编写网页的时候做到行云流水，今天介绍10个基本的组件代码。
一
文本输入框
1
简介
在HTML的表单控件中，用得最多就是文本框控件，支持输入中文，英文，特殊字符，汉字等。
2
说明
文本款使用<input> 标签，根据不同的type属性值来判断各种不同的类型的子控件，作为文本框使用时，type属性的值为“text”。基本属性如下：
- type：不同的type类型，将<input>标签标记不同的<form>控件，值为text时表示文本框。
- name：用于标记此<input>标签的名称，在JavaScript中，可以很方便的通过<form>标签的name属性来找到这个表单，并进一步通过子控件<input>标签的名称，从而找到下面的控件对象。从而就可以实现“用户名不能为空”这样的判断。
- size：用于表示控件的长度，使用字符数量来表示长度。
- maxlength：用于表示文本框可输入的最大字符数。
- value：对于文本框来说，value属性的值即为显示在文本框中的内容。
3
示例
实现一个用户名的文本框控件，名称为“username”，宽度为20个字符长度，文档框中最多可以输入10个字符，默认值为空。示例代码如下：
代码语言：javascript复制用户名：<input type="text" name="username" size="20" maxlength="10" value=""/>
效果如下所示：
二
密码输入框
1
简介
在HTML的控件中，密码框也是经常使用的控件，它主要用户密码验证、密码修改、密码校验等地方。基本上网站的密码框内输入的内容都是保密的，一输入就是以星号或者以小圆点的方式显示。
2
说明
密码框使用的也是<input>标签，作为密码框使用时，type属性的值为“password”。基本属性如下：
- type：不同的type类型，将<input>标签标记不同的<form>控件，值为password时表示密码框。
- name：用于标记此<input>标签的名称，在JavaScript中，可以很方便的通过<form>标签的name属性来找到这个表单，并进一步通过子控件<input>标签的名称，从而找到下面的控件对象。从而就可以做出“密码不能为空、“密码不能太短”这样的判断。
- size：用于表示控件的长度，这里貌似是使用字符数量来表示长度。
- maxlength：用于表示密码框可输入的最大字符数。
- value：对于密码框来说，value属性的值即为显示在密码框中的内容，当然，这个内容是用黑点遮盖之后的，我们无法看到真实的内容，但却可以看到是多少位。
3
示例
实现一个密码框控件，名称为“password”，宽度为20个字符长度，文档框中最多可以输入10个字符，默认值为空。示例代码如下：
代码语言：javascript复制密 码：<input type="password" name="pass" size="20" maxlength="10" value="" />
效果如下所示：
三
单选框
1
简介
在HTML的控件中，单选框也是经常使用的控件，它一般是成组出现的，一组单选框有相同的名称，但只能选择一个。
2
说明
单选框使用的是<input>标签，作为单选框使用时，type属性的值为“radio”。基本属性如下：
- type：不同的type类型，将<input>标签标记不同的<form>控件，值为radio时表示单选框。
- name：用于标记此<input>标签的名称，在JavaScript中，可以很方便的通过<form>标签的name属性来找到这个表单，并进一步通过子控件<input>标签的名称，从而找到下面的控件对象。从而就可以做出“至少选择一项”这样的判断。
- value：对于单选框来说，value属性的值即为当前选项被选中之后，整个<input>标签的值。
- checked：这个是一个孤立的属性，没有值。如果非要给它加个值，那就是它自己。
3
示例
实现一组单选框控件，名称为“radio”。这组单选框有2个选项，选项的名称分别为“男”、“女”，默认选中“男”。2个选项对应的值分别为“male”、“female”。所谓单选框，就2个选项就只能选择其一。示例代码如下：
代码语言：javascript复制 性 别：
<input type="radio" name="sex" value="male" checked="checked">男
<input type="radio" name="sex" value="female" >女
效果如下所示：
四
复选框
1
简介
在HTML的控件中，复选框也是经常使用的控件，它可以让用户选择勾选或取消勾选。
2
说明
复选框使用的是<input>标签，作为单选框使用时，type属性的值为“checkbox”。基本属性如下：
- type：不同的type类型，将<input>标签标记不同的<form>控件，值为checkbox时表示复选框。
- name：用于标记此<input>标签的名称，在JavaScript中，可以很方便的通过<form>标签的name属性来找到这个表单，并进一步通过子控件<input>标签的名称，从而找到下面的控件对象。从而就可以做出“您必须要同意我们的注册协议”这样的判断。
- value：对于复选框来说，value属性的值即为当前选项被选中之后，<input>标签的值。
- checked：这个是一个孤立的属性，没有值。如果非要给它加个值，那就是它自己。
3
示例
实现一组复选框控件，名称为“checkbox”。这组复选框的内容为“选项名”，选项对应的值为“value”。示例代码如下：
代码语言：javascript复制 爱 好：
<input type="checkbox" name="cb1" checked="checked">看书
<input type="checkbox" name="cb2">健身
<input type="checkbox" name="cb3">码文
效果如下所示：
五
下拉选择框
1
简介
在HTML的控件中，下拉选择框是常用的控件，用来选择对应的选项，每条数据项称为列表项。下拉列表是网页中一种最节省页面空间的选择方式，只有单击下拉按钮后才能看到全部的选项。例如很多网站的选择地区一栏，用到的就是下拉列表。
2
说明
下拉框使用的是<select>标签，每个菜单选项由 <select> 中的一个 <option> 元素定义。<select>属性如下：
- autofocus：在页面加载时下拉列表自动获得焦点。
- disabled：属性值为true时，禁用下拉列表。
- form：定义select字段所属的一个或多个表单。
- multiple：属性值为true时，可选择多个选项。
- name：下拉列表的名称。
- required：规定用户在提交表单前必须选择一个下拉列表中的选项。
- size：下拉列表中可见选项的数目，下拉列表默认状态下只显示一个选项。如果需要让页面显示多个选项，就要使用 size 属性，不同浏览器对于一些标签会有不同的效果。
3
示例
实现一组下拉框控件，可以选择所在城市和区域。HTML示例代码如下：
代码语言：javascript复制 城 市：
<input id="type" type="text" list="typelist" placeholder="请选择所在城市">
<datalist id="typelist">
<option>广东省</option>
<option>湖南省</option>
<option>四川省</option>
</datalist>
区 域：
<select id="group" value="1" size="1">
<option value="0"> -请选择区域- </option>
<option value="1"> 南山区 </option>
<option value="2"> 福田区 </option>
<option value="2"> 罗湖区 </option>
<option value="1"> 宝安区 </option>
<option value="2"> 龙华区 </option>
<option value="2"> 龙岗区 </option>
<option value="2"> 盐田区 </option>
</select>
效果如下所示：
六
上传文件
1
简介
上传文件功能可以说是项目经常出现的需求，从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在，实现 HTML文件上传文件的方法也多种多样。
2
说明
HTML上传文件时可以单个文件上传或同时上传多个文件。
- 单个文件上传：使用input，指定类型为file，来完成文件上传功能。
- 多个文件上传：如果想上传多个文件，需要在标签上添加 multiple 属性。
3
示例
实现单个文件上传和多个文件上传，示例代码如下：
代码语言：javascript复制 单文件：
<input type="file" id="file-uploader">
<br>
多文件：
<input type="file" multiple id="file_uploads"/>
效果如下所示：
七
搜索框控件
1
简介
搜索控件是常用的控件之一，可以帮助快速检索想查阅的信息。
2
说明
搜索框的组成由input标签和button标签构成。作为文本搜索框使用时，type属性的值为“text”。
3
示例
实现一个搜索框
