正文
Input标签使用整理
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
0 写在前面
对于程序而言I/O是一个程序的重要组成部分。程序的输入、输出接口，指定了程序与用户之间的交互方式。对于前端开发而言，input标签也有着其重要地位，它为用户向服务端提交数据提供了可能。
今天通过此博客来整理一下HTML与HTML5中的各种input标签的type类型以及其常用方法。
1 代码整理1-1 表单提交
为了能够让input的数据表单内容成功提交到指定的url中，需要在input的外面套一层<form action=“#”> </form>。
其中，action后面填写的值为目的url。
1-2 HTML原有type类型复选框checkbox：通过value的值来进行分组，在组内可以复选。
单选框radio：通过name值分组，组内选项互斥。单选框和复选框通常都搭配label使用，label的for通常与选项中的id相对应，这样鼠标点选范围更大，可以点击文字标签进行选择。
密码password：输入内容不显示给用户，在3-1节中会讲到如何显示密码。
上传文件file：可以从用户本地选择文件进行上传。
提交submit：将上述填写完毕的表单提交。
重置reset：将上述填写的内容重置成初始状态。
图片image：用src将一张图片放置在页面上，将提交鼠标点击该图片的坐标位置。
<form action="#">
<!-- HTML原有的type类型 -->
兴趣爱好：
<input type="checkbox" id="阅读" value="提交">
<label for="阅读">阅读</label>
<input type="checkbox" id="写作" value="提交">
<label for="写作">写作</label>
<input type="checkbox" id="写代码" value="提交">
<label for="写代码">写代码</label>
<br>
性别：
<input type="radio" name="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>
<br>
密码：
<input type="password" id="pwd">
<span id="showPwd">显示密码</span>
<br>
上传照片：
<input type="file" name="img">
<br>
<input type="hidden" name="avitor" id="1">
<br>
<input type="submit" id="submit">
<input type="reset" value="重置">
<!-- 可以点击图片，将点击位置传到后端 -->
<input type="image" src="./PopStars/pic/0.png">
</form>
1-3 H5新增type类型上传时间date/time/week/datetime-local：用于选择时间。
数字number：会检查输入，只有有效的数字值才能被输入。
邮箱email：会检查输入，只有有效的邮箱地址才能被提交。
链接url：会检查输入，只有有效的网址才能被提交。
颜色color：可以输入颜色。
搜索search：可以记忆搜索历史。
- 范围range：通过min max设置范围数值。
<form action="#">
选择时间：
<input type="date">
<input type="time">
<input type="week">
<input type="datetime-local">
<br>
输入学号：
<input type="number" name="number">
<br>
输入邮箱：
<input type="email" name="email">
<br>
选择颜色：
<input type="color" name="color">
<br>
输入链接：
<input type="url">
<br>
搜索内容：
<input type="search" name="search">
<input type="submit" value="search">
<br>
输入范围：
<input type="range" min="0" max="100" name="range">
</form>
1-4 注意事项
复选框checkbox：通过value的值来进行分组，在组内可以复选。
单选框radio：通过name值分组，组内选项互斥。单选框和复选框通常都搭配label使用，label的for通常与选项中的id相对应，这样鼠标点选范围更大，可以点击文字标签进行选择。
密码password：输入内容不显示给用户，在3-1节中会讲到如何显示密码。
上传文件file：可以从用户本地选择文件进行上传。
提交submit：将上述填写完毕的表单提交。
重置reset：将上述填写的内容重置成初始状态。
图片image：用src将一张图片放置在页面上，将提交鼠标点击该图片的坐标位置。
<form action="#">
<!-- HTML原有的type类型 -->
兴趣爱好：
<input type="checkbox" id="阅读" value="提交">
<label for="阅读">阅读</label>
<input type="checkbox" id="写作" value="提交">
<label for="写作">写作</label>
<input type="checkbox" id="写代码" value="提交">
<label for="写代码">写代码</label>
<br>
性别：
<input type="radio" name="sex" id="male"><label for="male">男</label>
<input type="radio" name="sex" id="female"><label for="female">女</label>
<br>
密码：
<input type="password" id="pwd">
<span id="showPwd">显示密码</span>
<br>
上传照片：
<input type="file" name="img">
<br>
<input type="hidden" name="avitor" id="1">
<br>
<input type="submit" id="submit">
<input type="reset" value="重置">
<!-- 可以点击图片，将点击位置传到后端 -->
<input type="image" src="./PopStars/pic/0.png">
</form>
上传时间date/time/week/datetime-local：用于选择时间。
数字number：会检查输入，只有有效的数字值才能被输入。
邮箱email：会检查输入，只有有效的邮箱地址才能被提交。
链接url：会检查输入，只有有效的网址才能被提交。
颜色color：可以输入颜色。
搜索search：可以记忆搜索历史。
- 范围range：通过min max设置范围数值。
<form action="#">
选择时间：
<input type="date">
<input type="time">
<input type="week">
<input type="datetime-local">
<br>
输入学号：
<input type="number" name="number">
<br>
输入邮箱：
<input type="email" name="email">
<br>
选择颜色：
<input type="color" name="color">
<br>
输入链接：
<input type="url">
<br>
搜索内容：
<input type="search" name="search">
<input type="submit" value="search">
<br>
输入范围：
<input type="range" min="0" max="100" name="range">
</form>
1-4 注意事项
注意对于每项输入而言，需要为该元素设置一个name来标识。这是为了在提交表单数据的时候，能有效的定位到是哪个部分的输入了什么类型的数据值。
2 浏览器兼容情况
表格数据来源于w3school。由于浏览器技术发展迅速，现在一些浏览器的新版本已经可以支持上述的部分type类型了。
3 与JS交互3-1 显示密码
为了实现密码显示功能，很简单，首先为显示密码的容器增加一个id，用JS为其绑定一个鼠标点击事件，当触发点击事件时，为密码input的类型由password改成text即可完成显示。
<script>
showPwd.onclick = function(e){
pwd.type = 'text';
}
</script>
3-2 禁用默认的提交功能
两种方法，一是为点击事件return false; 二是为原对象e加上e.preventDefault()方法。
<script>
var submitBtn = document.getElementById('submit');
submitBtn.onclick = function(e){
console.log(pwd.value);
e.preventDefault();
return false;
}
</script>
