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 注意事项

　　注意对于每项输入而言，需要为该元素设置一个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>