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>