html5 input的一些新类型与属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>input</title> </head> <body> email:<input type="email" name="email"><br><br> tel:<input type="tel" name="tel"><br><br> number:<input type="number" name="number"><br><br> url:<input type="url" name="url"><br><br> date选择年月日:<input type="date" name="date"><br><br> month选择年月:<input type="month" name="month"><br><br> week选择周:<input type="week" name="week"><br><br> time选择时间:<input type="time" name="time"><br><br> datetime选择年月日时间:<input type="datetime" name="datetime"><br><br> datetime-local选择本地年月日时间:<input type="datetime-local" name="datetime-local"><br><br> range设置区间:<input type="range" name="range" min="1" max="10"><br><br> search搜索,输入内容有x小按钮:<input type="search" name="search"><br><br> color选择颜色:<input type="color" name="color"><br><br> <!-- autocomplete属性,使form或input拥有自动完成功能,值为on/off --> <form action="#" method="post" autocomplete="on"> <input type="text" name="text"> <input type="email" name="email" autocomplete="off"> <input type="submit"> </form><br> <!-- autofocus属性,页面加载时自动获得焦点,适用于所有的input标签 --> <form action="#" method="post"> <input type="text" name="text"> <input type="email" name="email" autofocus="autofocus"> <input type="submit"> </form><br> <!-- multiple属性,规定输入域中可选择多个值,适用于email和file --> <form action="#" method="post"> <!--file可上传多个文件--> <input type="file" name="file" multiple="multiple"> <!--email中用;或,分隔多个email--> <input type="email" name="email" multiple="multiple"> <input type="submit"> </form><br> <!-- placeholder属性,输入框的提示性值,适用于text,search,url,tel,email,password --> <form action="#" method="post"> <input type="text" name="text" placeholder="请输入您的名字"> <input type="submit"> </form><br> <!-- required属性,在提交前做简单判断,适用于text,search,url,tel,email,password,date pickers,number,checkbox,radio,file --> <form action="#" method="post"> <input type="text" name="text" required="required"> <input type="text" name="text" oninvalid="this.setCustomValidity('你要改的提示文本');" required> <input type="submit"> </form> </body> </html>
新类型与属性,有些在手机端有效果,pc没有明显变化。大家在实际应用中多多测试练习。