HTML5 表单新类型和新属性

HTML5 表单新类型和新属性

email

<h4>新的input类型</h4>

<hr class="normal">
<form>
   <fieldset> <!--
分组 -->
<legend>
email
</legend>
       <input type="email" id="inputEmail">
       <input type="submit" value="提交">
   </fieldset>
</form>
新的input类型

新的input类型



请点击此处输入图片描述

date

<form>

   <fieldset>
       <legend>
有效日期
</legend>
       <input type="date">
       <input type="week">
       <input type="month">
       <input type="time">
       <input type="datetime">
   </fieldset>
</form>
请

点击此处输入图片描述

range

<form>

    <fieldset>
       <legend>
age
</legend>
       <input type="range" id="rangeInput"min="0" max="100" onChange="getValue()" >
       <span id="result"></span>
   </fieldset>
</form>

<script>

function getValue(){
var value=document.getElementById("rangeInput").value;
var result=document.getElementById("result");
result.innerText=value;
}
</script>


请点击此处输入图片描述
 

search  number

<form>

   <fieldset>
       <legend>
info
</legend>
       <label for="search">查找</label>
       <input type="search" id="search">
       <label for="">数字</label>
       <input type="number" id="number">
       <input type="submit" value="提交">
   </fieldset>
</form>


请点击此处输入图片描述
 

 

url

 

<form>

   <fieldset>
       <legend>url</legend>
       <label for="url">url</label>
       <input type="url" id="url">
   </fieldset>
</form>


请点击此处输入图片描述
 

公共属性 autofocus
页面加载完毕时，自动获取焦点

<form >

   <fieldset>
       <legend>请输入登录信息</legend>
       <table align="center">
           <tr>
               <td>用户名：</td>
               <td><input type="text"id="user" autofocus="true"></td>
           </tr>
           <tr>
               <td>密码：</td>
               <td><input type="password"id="pwd"></td>
           </tr>
           <tr>
               <td colspan="2"align="center">
 
<input type="submit" value="提交">
 
<input type="reset" value="重置">
               </td>
           </tr>
       </table>
   </fieldset>
</form>


请点击此处输入图片描述

pattern  正则表达式  以便对input元素对应的输入框执行自定义输入校验

email url 也是基于正则表达式的  不过已经由系统设置  不需要用户单独设置

<form>

   <fieldset>
       <legend>请输入注册信息</legend>
       <table align="center">
           <tr>
              <td>用户名：</td>
               <td>
                   <input type="text"id="txtuser" autofocus="true"pattern="^[a-zA-Z0-9]{6,}$">
                   <br>
                   <spanstyle="color:red;font-size:12px">只允许输入数字和英文，长度至少为6位</span>
               </td>
           </tr>
           <tr>
               <td>年龄：</td>
               <td>
                   <input type="text"id="age" pattern="^[1-9]?[0-9]$">
                   <br>
                   <spanstyle="color:lightgray;font-size:12px">0-99</span>
               </td>
           </tr>
           <tr>
               <td colspan="2">
                   <inputtype="submit" vlaue="提交">
                   <inputtype="reset" value="重置">
               </td>
           </tr>
       </table>
   </fieldset>
</form>


请点击此处输入图片描述

 placeholder 预设置的提示信息

<!-- placeholder  预设置的提示信息  -->

<form>
   <fieldset>
       <legend>
请输入姓名
</legend>
姓名：
<input type="text" placeholder="输入姓名">
   </fieldset>
</form>


请点击此处输入图片描述

required 属性

<!-- required 属性  -->

<form>
   <fieldset>
       <legend>个人信息</legend>
       <table>
           <tr>
               <td>姓名：</td>
               <td><input type="text"required="true" autofocus="true"></td>
           </tr>
           <tr>
               <td colspan="2">
                   <inputtype="submit" value="提交">
               </td>
           </tr>
       </table>
   </fieldset>
</form>
请点击此处输入图片描述
​