HTML5 改良的 input 元素的种类
在HTML5中，增加与改良的input元素中的type属性，包括url、email、date、time、datetime、datetime-local、month、week、number、range、search、tel、color类型。
<!DOCTYPE html> <html> <head lang="en"> <title>增加与改良的input元素中的type属性</title> <meta charset="utf-8"> </head> <body> <!-- url类型:专门用来输入URL地址的文本框，提交时如果该文本框中的内容不是URL地址格式，则不允许提交。 --> <form> <input name="url" type="url" value="http://www.baidu.com"/> <input type="submit" value="提交"/> </form> <br/>
<!-- email类型：专门用来输入email的文本框，提交时如果文本框中的内容不是email地址格式，则不允许提交，但是它并不检查email地址是否存在，提交时该文本框可以为空，除非加上required属性。它还具有一个multiple属性，它允许在该文本框中输入一串以逗号分割的email地址。 --> <form> <input name="email" type="email" value="1213111@qq.com"/> <input type="submit" value="提交"/> </form> <br/>
<!-- date类型：以日历的形式方便用户输入。当文本框获取焦点时，显示日历，可选择输入。 --> <input type="date" name="date" value=""/> <br/><br/>
<!-- time类型：专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进项检查。 --> <input type="time" name="time" value=""/> <br/><br/>
<!-- datetime类型：专门用来输入UTC日期和时间的文本框，并且在提交时会对输入时间的有效性进项检查。 --> <input name="datetime" type="datetime" value=""/> <br/><br/>
<!-- datetime-local类型：专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效检查。 --> <input name="tatetimelocla" type="datetime-local"/> <br/><br/>
<!-- month类型：专门用来输年月份的文本框，并且在提交时会对输入的月份进行有效检查。 --> <input name="month" type="month" value="" /> <br/><br/>
<!-- week类型：week类型的input元素是一种专门用来输周的文本框，并且在提交时会对输入的周号进行有效检查。 --> <input name="week" type="week" value=""/> <br/><br/>
<!-- number类型：专门用来输数字的文本框，并且在提交时会对输入的内容是否为数字。它具有 min、max 与 step 属性。 --> <input name="number" type="number" value="" min="1" max="100" step="10"/> <br/><br/> <!-- 加法计算器 --> <script type="text/javascript"> function sum(){ var n1 = document.getElementById('num1').valueAsNumber; var n2 = document.getElementById('num2').valueAsNumber; document.getElementById('result').valueAsNumber = n1+n2; } </script> <form> <input type="number" id="num1"/> + <input type="number" id="num2"/> = <input type="number" id="result" readonly/> <input type="button" value="计算" onclick="sum()"/> </form> <br/><br/>
<!-- range类型：range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为0与100），它还具有step属性，可以制定每次拖动的维度，用滑动条的方式进行值的制定。 --> <input name="range" type="range" value="25" min="0" max="100" step="5"/> <br/><br/>
<!-- search类型：专门用来输入搜索关键词的文本框的文本框。 --> <input name="search" type="search" value=""/> <br/><br/>
<!-- tel类型：用来输入电话号码的专用文本框。 --> <input name="tel" type="tel" value="110"/> <br/><br/>
<!-- color类型：提供一个颜色选择器。 --> <input type="color" onchange="document.body.style.backgroundColor = document.getElementById('currentColor').textContent = this.value;"/> <span id="currentColor"></span> <br/><br/>
<!-- output元素追加 --> <script type="text/javascript"> function value_change(){ var number = document.getElementById('range').value; document.getElementById('output').value = number; } </script> <form id="testform"> <input id="range" type="range" min="0" max="100" step="5" value="10" onchange="value_change()" /> <output id="output">10</output> </form> </body> </html>
表单验证实例：
<!DOCTYPE html> <html> <head lang="en"> <title>表单验证</title> <meta charset="utf-8"> </head> <body> <script type="text/javascript"> function check(){ var email = document.getElementById('email'); if(email.value==""){ alert("请输入邮箱"); return false; }else if(!email.checkValidity()){ alert("请输入正确的邮箱地址"); return false; } } </script> <form id="testform" onsubmit="check()" novalidate="true"> <label for="email">邮箱：</label> <input name="email" type="email" id="email"/><br/> <input type="submit"/> </form> </body> </html>
