前端小技能，10个基本组件的代码片段
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个字符，默认值为空。示例代码如下：
用户名：<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个字符，默认值为空。示例代码如下：
密 码：<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个选项就只能选择其一。示例代码如下：
性 别：
<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”。示例代码如下：
爱 好：
<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示例代码如下：
城 市：
<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
示例
实现单个文件上传和多个文件上传，示例代码如下：
单文件：
<input type="file" id="file-uploader">
<br>
多文件：
<input type="file" multiple id="file_uploads"/>
效果如下所示：
七
搜索框控件
1
简介
搜索控件是常用的控件之一，可以帮助快速检索想查阅的信息。
2
说明
搜索框的组成由input标签和button标签构成。作为文本搜索框使用时，type属性的值为“text”。
3
示例
实现一个搜索框🔍，HTML部分示例代码如下：
<div class="search">
<input type="text" placeholder=" 🔍 请输入关键词..." name="" id="" value="" />
<button><i>搜索</i></button>
</div>
添加一些美化效果，CSS部分示例代码如下：
效果如下所示：
八
日期控件
1
简介
日期选择框也是较为常用的控件，根据实际需要选择对应的时间范围。
2
说明
HTML5定义了几个与日期有关的新控件。支持日期控件的浏览器会提供一个方便的下拉式日历，供用户选择。HTML5 拥有多个可供选取日期和时间的新输入类型：
- date：选取日、月、年;
- month：选取月、年;
- week：选取周和年;
- time：选取时间（小时和分钟）;
- datetime：选取时间、日、月、年（本地时间）;
3
示例
实现一组天气➕日期组件，HTML部分示例代码如下：
<!-- 天气组件 -->
<div class="tq"><iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ta&skin=orange" frameborder="0" width="400" height="24" allowtransparency="true"></iframe></div>
<!-- 显示当前时间 -->
<div id="timeShow"></div>
<!-- 日期控件 - date -->
日 期：
<input type="date" value="2022-06-27"/>
<!-- 月控件 - month -->
<br/>
月 份：
<input type="month" value="2022-06"/>
<!-- 周控件 - week -->
<br/>
周 数：
<input type="week" value="2022-W30"/>
<br/>
<!-- 时间控件 - time -->
时 间：
<input type="time" value="09:00"/>
<!-- 日期时间控件 - datetime-local -->
<input type="time" value="09:00:01"/>
<br>
日期时间：
<input type="datetime-local" value="2022-06-27T09:00:00"/>
}
效果如下所示：
九
多行文本框
1
简介
单行文本框只能输入一行文本，而多行文本框支持输入多行文本。
2
说明
- 在HTML中，多行文本框使用的是textarea标签。与 <input> 标签不同，<textarea> 标签是单闭合标签，它包含起始标签和结束标签，文本内容需要写在两个标签中间。<textarea>属性如下：
- autofocus：当页面加载时，文本区域自动获得焦点（值：autofocus）。
- cols：文本区域内可见的列数（值：number）。
- disabled：禁用文本区域（值：disabled）。
- form：定义文本区域所属的一个或多个表单（值：form_id）。
- maxlength：文本区域允许的最大字符数（值：number）。
- name：文本区域的名称（值：text）。
- placeholder：一个简短的提示，描述文本区域期望的输入值（值：text）。
- readonly：文本区域为只读（值：readonly）。
- required：文本区域是必需的/必填的（值：required）。
- rows number：文本区域内可见的行数（值：number）。
- wrap：当提交表单时，文本区域中的文本应该怎样换行（值：hard、soft）
3
示例
实现多行文本输入框并动态获取IP地址，示例代码如下：
<!-- 多行文本框 -->
<br><br><br>
简 介：
<textarea rows="2" cols="40" placeholder="简单介绍一下自己..."></textarea>
<!-- IP地址-->
<br>
IP：<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script type="text/javascript">
document.write(returnCitySN["cip"] + ' , ' + returnCitySN["cname"])
</script>
为保护个人隐私👤，此处动图将具体IP地址xxx.xx.xxx.xx 隐去，暂显示为(undefined)，效果如下所示：
十
音视频控件
1
简介
插入音视频流媒体会使网页更丰富生动，展现更多的信息。
2
说明
(1) 音频
插入音频主要用到<audio>与<source>两个标签，其中，<audio>用于控制音频的呈现形式，播放是否循环，是否默认静音等等。<source>用于指定来源及音频格式。属性如下：
- loop：循环，音视频是否进行循环播放。
- controls ：控制器，是否允许用户自己控制播放。
- autoplay ：自动播放（已失效），音视频文件是否自动播放。
- muted：静音。
- preload ：页面加载时同时加载音频。
常见音频格式：mp3、aac/mp4、ape/flac、wav、wma、amr、mid等。
(2) 视频
使用<video>标签在网页中引入一个视频，使用方法和<audio>基本上是一样的，各种<audio>拥有的属性，<video>也有。
常见视频格式有：mp4/m4v/3gp/mpg、flv/f4v/swf、avi、gif、wmv、rmvb等。
3
示例
添加音视频控件，示例代码如下：
<!-- <!– 音频播放器 –>-->
<br><br>
听 歌：
<audio controls="controls" loop="loop">
<source src="https://y.qq.com/n/ryqq/player" type="audio/mp3"></source>
</audio>
<!-- 视频播放器 -->
<br><br>
视 频：
<!-- <video src="https://mp.weixin.qq.com/s/nvQ8di6rHgdkgTOQk393Mw" poster = "http://wx.qlogo.cn/mmhead/Q3auHgzwzM6h0QgTMSjYavc1h3yODa0xnS5iaI09GXpM49gpncZcYhw/132"></video>-->
<video width="320" height="240" poster = "http://wx.qlogo.cn/mmhead/Q3auHgzwzM6h0QgTMSjYavc1h3yODa0xnS5iaI09GXpM49gpncZcYhw/132" controls>
<source src="https://mp.weixin.qq.com/s/nvQ8di6rHgdkgTOQk393Mw" type="video/mp4">
<source src="https://mp.weixin.qq.com/s/nvQ8di6rHgdkgTOQk393Mw" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
效果如下所示：
以上就是今天的分享，如果大家想要获取今天以及后续的前端实例代码（HTML,CSS,JS），可以在ITester软件测试小栈微信公众号后台回复“前端实例”4个字，CoCo会持续更新。😇
以上
That‘s all
更多系列文章
敬请期待
ITester软件测试小栈（ID：ITestingA），专注于软件测试技术和宝藏干货分享，每周准时更新原创技术文章，每月不定期赠送技术书籍，愿我们在更高处相逢。喜欢记得星标⭐我，每周及时获得最新推送，第三方转载请注明出处。