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

HTML5---4.表單新增的其他屬性

包含 tel 允許 移動端 pla tof 表單 multi required

placeholder   占位符
autofocus    自動獲取焦點
autocomplete   自動獲取內容   (必須提交   name)
required       必填 
pattern     正則表達式   (不需要/ /   “”)
Multiple     文件上傳可上傳多個
Form
<form action="" id="myForm">
    <!--placeholder:提示文本,提示占位-->
    <!--autofocus:自動獲取焦點-->
    <!--autocomplete:自動完成:on:打開  off:關閉
    1.必須成功提交過:提交過才會記錄
    2.當前添加autocomplete的元素必須有name屬性-->
    用戶名:<input type="text" name="userName" placeholder="請輸入用戶名" autofocus autocomplete="on"> <br>
    <!--tel並不會實現驗證,僅僅是在移動端能夠彈出數字鍵盤-->
    <!--required:必須輸入,如果沒有輸入則會阻止當前數據提交-->
    <!--pattern:正則表達式驗證
    *:代表任意個
    ?:代表0個或1個
    +:代表1個或多個-->
    手機號:<input type="tel" name="userPhone" required pattern="^(\+86)?1\d{10}$"> <br>
    <!--multiple:可以選擇多個文件-->
    文件:<input type="file" name="photo" multiple> <br>
    <!--email:有默認驗證  在email中,multiple允許輸入多個郵箱地址,以逗號分隔-->
    郵箱:<input type="email" name="email" multiple><br>
    
    <!--提交:-->
    <input type="submit"> <br>
</form>
<!--下面這個表單元素並沒有包含在form中:默認情況下面表單元素的數據不會進行提交-->
<!--form:指定表單id,那麽在將來指定id號的表單進行數據提交的時候,也會將當前表單元素的數據一起提交-->
地址:<input type="text" name="address" form="myForm">
用戶名:
手機號:
文件:
郵箱:

地址:

HTML5---4.表單新增的其他屬性