夜光带你走进 前端工程师（二）
夜光序言：
只有毅力才会使我们成功，而毅力的来源又在于毫不动摇，坚决采取为达到成功的手段。
正文：
1：按钮属性
Type=”button”
<button></button>
2:Range型input元素
3：Checkbox型input元素
4：Radio型input元素
5：用input生成一组固定选项
6：生成选项列表（select）和数据列表（datalist）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建表单2</title>
</head>
<body>
<input type=button value="按钮">
</body>
</html>
思考提升：
<input type=button value="按钮">
<button>按钮</button>
这两种区别在哪里？
1：<input type=button value="按钮">
2：<button>按钮</button>
//第二种和js合作，并且作为绑定事件的
3：<input type="submit" value="提交">
提交表单
2:Range型input元素
<input type="range"> //一个可以滑动的长格子【自己去体会】
<input type="range" min="-100"max="500">
理解
<input type="range" min="-100"max="500">
<br><br>
<input type="range" min="-100"max="500"step="100">
夜光指点：多了一个step
<input type="range" min="-100"max="500">
<br><br>
<input type="range" min="-100"max="500"step="100">
|
<input type="range" min="-100"max="500">
|
|
<input type="number" > //可以选择上下数字 |
|
<input type="checkbox"> // 记住我，选择 |
|
|
|
|
4：Radio型input元素
<input type="radio"> 看图最下面一个
|
程序员最帅的一个是谁？ //浏览器效果见下图，嘿嘿
|
<br>
<input type="radio" value="夜光">//没有value属性
<br>
<input type="radio" value="夜光"> //没有value属性
<br>
<input type="radio" value="夜光">//没有value属性
<br>
<input type="radio" name="a">夜光
<br>
<input type="radio" name="a">夜光
<br>
<input type="radio" name="a">夜光
</body>
</html>
Ws中图：三选一代码
<br>
<input type="radio" name="a">夜光
<br>
<input type="radio" name="a">夜光
<br>
<input type="radio" name="a">夜光
</body>
</html>
高级程序员：name="a" 锁定三选一
<input type="radio" name="a" checked>夜光
Checked{默认选中一个}
6：生成选项列表（select）和数据列表（datalist）
<input type="radio" name="a">夜光-->
<select>
<option>
</option>
</select>
</body>
思考：
<select>
<option>
</option>
</select>
举个例子：
<select>
<option>苹果</option>
<option>香蕉</option>
<option>西瓜</option>
</select>