目錄
1 引言
2 智能表單控件-type
3 表單屬性
form
input
5 答疑--解決required自定義提示信息
1 引言
????????HTML5引入了一系列新的表單輸入類型，如email、url、number、range、date、time、datetime-local、month、week、search、color和tel等。這些新類型增強了表單的驗證能力，提高了用戶體驗。在創建注冊、搜索或用戶輸入表單時，可以使用這些新類型的輸入字段來增強表單的驗證功能，減少用戶輸入錯誤
2 智能表單控件-type
<input? type="email">?
?type屬性值：
?email: 輸入合法的郵箱地址
?url：? 輸入合法的網址
?number： 只能輸入數字
?range： 滑塊
?color： 拾色器
?date： 顯示日期
?month： 顯示月份
?week ： 顯示第幾周
?time：? 顯示時間
<body><form action="#" method="get">text:<input type="text" name="em"><br>email:<input type="email" name=""><br>range:<input type="range" name=""><br>color:<input type="color" name=""><br><input type="text" name="em"><input type="submit" name=""></form> </body>
3 表單屬性
form
◆form屬性：?????
?????? autocomplete=on | off????????? 自動完成 （當定位光標在輸入框時，會顯示歷史輸入記錄）
?????? novalidate=true | false??????? 是否關閉校驗（使標簽的校驗功能失效）
input
?◆ input屬性：
*autofocus? ： 自動獲取焦點（光標）
??? form：? （在表單外的input綁定form表單，當form表單提交時，也會顯示?表單外的input的值）
<body><form action="#" method="get" id="test"><input type="text" name="em" autofocus placeholder="請輸入您要的物品" required><input type="submit" name=""></form><input type="text" name="uname" value="用戶名" form="test"> </body>??? list：
?????? ?? <input type="text" list="abc"/>
?????? ????? ?<datalist id="abc">
?????? ????? ????? <option value="123">12312</option>
?????? ????? ????? <option value="123">12312</option>
?????? ????? ????? <option value="123">12312</option>
?????? ????? ????? <option value="123">12312</option>
?????? ????? </datalist>
?
?multiple：?? 實現多選效果
??*placeholder ： 占位符? （提示信息）
??*required：??? 必填項（必須填寫，否則無法提交）
5 答疑--解決required自定義提示信息
◆ 如何修改表單控件中的默認提示信息
????????????? ?1. 表單驗證觸發oninvalid事件
????????????? ?2. 通過setCustomValidity方法設置修改內容
)
)