H5选项栏三种基本类型

提示 ：如有错误，敬请支持哦！互相学习，共同进步！

选项栏三大常用形式

---

前言

选项栏在网页中多次被使用，属于一种常用的形式，也是我们必要掌握的内容之一。因此，在此小编为大家整理了三种常用的选项栏，如有错误，敬请指出哦

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、3种实现方式

1. 使用type中radio属性，但是选择之后便不可以取消了，生成name属性，当多个选项出现后，可以实现多选一的效果
   2.使用select属性，要搭配option来使用，属于下拉式选项栏
   3.使用datalist属性，要用到type中text属性，并且datalist要用到id引导 input要用到list引导

二、代码实现

1.radio属性

代码如下（示例）：

<form>选择你喜欢的水果
				<br>
				<input type="radio" name="a" checked="" />苹果
				<!-- checked设置默认值 -->
				<input type="radio" name="a" />芒果
				<input type="radio" name="a" />香蕉
			</form>

2.select属性

代码如下（示例）：

<form>你喜欢的水果
				<br>
				<select>
					<option>香蕉</option>
					<option>橙子</option>
					<option>黄桃</option>
				</select>
			</form>

3.datalist属性

代码如下（示例）：

<form>你最喜欢的水果
				<br>
				<input type="text" list="1" />
				<datalist id="1">
					<option>香蕉</option>
					<option>橙子</option>
					<option>黄桃</option>
				</datalist>
			</form>

总结

这是三种比较基本的选项栏的实现方式，并且还有很大的可拓展性，欢迎各位评论区交流补充嗷。
心得：
初次写blog可能写作手法有些生疏，未来会在此账号更新很多有意思的前端知识，不出意外的话会持续更新，因为鄙人也是学生党，哈哈哈，所以不太能固定更新时间，但我尽力固定时间嗷。
如果觉得文章还不错的话，在这里求一个素质三连，将是我写文章最大的帮助。