WEB前端之HTML5[4]~HTML5改良的input元素的种类

HTML5改良的input元素的种类

增加与改良的input元素

在HTML5中，大幅度增加了与改良了input元素的种类，可以简单的使用元素来实现HTML5之前需要使用js脚本才能实现的许多功能。
1.url类型，email类型，date类型，time类型，datetime类型，datetime-local类型，month类型，week类型，number类型，range类型，search类型，Tel类型，color类型。

url类型

url元素是用来验证网址的

<!--示例代码--><form>    <!--url类型-->    <input name="urlType" type="url" value="http://www.baidu.com">    <input type="submit" name="btnSubmit" value="提交"></form>

运行结果图：

代码分析：从运行结果可以看出，当把input的type类型设置为url的时候，在提交表单的时候回做一个验证，验证当前文本框中是否输入的是一个正确的url http:// 开头的，如果不是，就会出现如图上提示！

email类型

email类型的input元素是一种专门用来输入email地址的文本框，如果表单提交时，该文本框的内容不是一个标准的email，则会给出相应的提示。

<!--示例代码--><input type="email" name="emailAddress">

运行结果如下图：

date类型

date类型的input元素呢，是深受开发着喜爱的一种元素，在网页中经常需要输入各种各样的日期。例如生日，购买日期，新闻发布日期等等。date类型的元素 以日历的形式方便用户的输入，

<!--示例代码--><input type="date" name="dateName">

运行结果图：

time类型

time类型是一种专门用来输入时间的文本框，并且在提交时对输入时间的有效性进行检查。

<!--示例代码--><input type="time" name="timeName">

运行结果图如下：

datetime类型

datetime类型是input元素一种专门用来输入UTC时间和日期的文本框，并且在表单提交时，对日期和时间进行有效性的检查。跟time类型的区别就是 datetime是UTC的日期和时间。

<!--示例代码--><input type = "datetime" name="timeName">

运行结果如下：

datetime-local类型

datetime-local类型是input元素一种专门用来输入本地日期和时间的文本框，并且在提交时，对输入的日期和时间进行有效性的检查。

<!--示例代码--><input type="datetime-local" name="dlName">

运行结果如下：

month类型

input元素的month类型是一个专门用来输入月份的文本框，并且在提交时，对输入的月份进行有效性的检查。

<!--示例代码--><input name="month" type="month" value="2010-01-04">

运行结果图：

week类型

input元素的week类型是一种专门输入”周”的文本框。

<!--示例代码--><input name="week" type="week">

运行结果图：

number类型

input元素的number类型，是用来专门输入数字的文本框，并且在提交时进行检查,检查其中内容是否为数字，如果不为数字，则提交空，这里注意，输入框不为数字，也是可以提交的，只不过是空。同时与输入日期和时间的类型相同，有代表最大值，最小值的max，min 属性，还有每次增长的值的 step 属性

<!--示例代码--><form>    <input type="number" name="number" min="10" max="100" step="5" >    <input type = "submit" value = "提交"></form>

运行结果图：

除此之外呢，我们可以用number类型的 valueAsNumber 来获取number的值，下面用一个简单的计算器demo来看一下valueAsNumber的用法。

<!--代码示例（简单计算器）--><form>    <input type="number" id="num1">+    <input type="number" id="num2">=    <input type="number" id="result" readonly>    <input type="button" value="计算" onclick="jdjs()">    <script>        function jdjs() {            var number1 = document.getElementById("num1").valueAsNumber;            var number2 = document.getElementById("num2").valueAsNumber;            document.getElementById("result").valueAsNumber = number1 + number2;        }    </script></form>

range属性

range类型的input元素，是一种只允许输入一段范围数值的文本框，具有最大值和最小值属性，最大值默认是100，最小值默认是0，也具有step属性，可以指定每次拖动的值，当然在不同浏览器，样式不同。

<!--示例代码--><input type="range" value="25" max="100" min="0" name="range" step="5">

在chrome下展示的效果:

在FireFox下展示的效果：

注意：step属性是指每次拖动滑块时，所改变的值的大小。

search类型

search类型的input元素，是一种专门用来 输入搜索关键字的文本框。

<!--示例代码--><!--这段代码的效果和普通的文本框差不多，这里就不发图了--><input type = "search" name = "search">

tel类型

tel类型的input元素是用来专门输入电话号码的文本框，没有特殊的规则， 不强制输入数字，因为在其他地区会有区号例如 010-0100010等等

<!--示例代码--><input type= "tel" name="telName">

color类型

color类型的input元素，被设置为用来选取颜色，提供一个颜色选择器，在黑莓浏览器、chrome20以上、opera11以上都是支持的。

<!--示例代码--><input type="color" onchange="document.body.style.backgroundColor = document.getElementById('currentColor').textContent = this.value;"><span id="currentColor"></span><!--以上代码的意思是当color选择器改变的时候,把当前body的背景颜色，设置为选择器的颜色。-->

运行结果图：

output元素的追加

在HTML5中，追加了新的元素 output元素，output元素定义不同类型的输出。

<!--示例代码--><form>    <input type="range" id="range" max="100" min="0" step="10" value="10" onchange="value_change()">    <output id="output">10</output></form><script>    function value_change() {        //获取到滑块的值        var range = document.getElementById("range").value;        //把滑块的值设置为output的值        document.getElementById("output").value = range;        }</script>

运行结果图：

我们可以通过滑块来改变后边的值

表单验证案例

<!--示例代码--><form id="formId" onsubmit="return check()" novalidate="true">    <label>Email:</label>    <input type="email" id="email" name="email">    <input type="button" value="验证"></form><script>    function check() {        //获取到email文本框的内容        var email = document.getElementById("email");        if(email.value == ""){            alert("抱歉，请输入邮箱");            return false;        }else if(!email.checkValidity()){            alert("抱歉，邮箱格式不正确");            return false;        }    }</script>