1. 程式人生 > >HTML5-表單新增的type屬性

HTML5-表單新增的type屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form action="">
    使用者名稱:<input type="text" name="Name"><br>
    密碼:<input type="password" name="Pwd"><br>
    
    <!--emmail:提供了了預設的電子郵箱完整的驗證:要求必須包含@符號,同時必須包含伺服器名稱,
    如果不能滿足驗證,則會阻止當前的資料提交-->
    
    郵箱:<input type="email"><br>
    
    <!--tel:它並不是來實現驗證。它的本質是為了能夠直接在移動端開啟數字鍵盤。意味著數字鍵盤限制了使用者只能輸入數字-->
    
    電話:<input type="tel"><br>
    
    <!--驗證只能輸入合法的網址:必須包含 http://-->
    
    網址:<input type="url"><br>
    
    <!--只能輸入數字(包含小數點),不能輸入其他字元
    max:最大值
    min:最小值
    value:預設值-->
    
    數量:<input type="number" max="100" min="0" value="10"><br>
    
    <!--search:在搜尋框內的右邊提供一個刪除符號-->
    
    商品搜尋:<input type="search"><br>
    
    <!--range:範圍-->
    
    範圍:<input type="range" max="100" min="10" value="20"><br>
   
    顏色:<input type="color"><br>
    
    <!--時間日期相關-->
    <!--time:時間(時分秒)-->
  
    時間:<input type="time"><br>
    
    <!--date:日期(年月日)-->
   
    日期:<input type="date"><br>
   
    <!--datetime-local:日期和時間-->
    
    日期時間:<input type="datetime-local"><br>
    
    月份:<input type="month"><br>
    星期:<input type="week"><br>
    
    <!--submit:提交-->
    <input type="submit" value="提交">
</form>
</body>
</html>

在這裡插入圖片描述