1. 程式人生 > >html5中表單新增元素與屬性

html5中表單新增元素與屬性

target att jsp ace 正則表達 targe type 不同 tar

form

很多初學者對與form不是很理解,其實從html的MDN中可以看出,form是用在前後臺的交互上的,比如我需要把表單的內容(input裏的內容提交到後臺),這是就需要input包裹在form裏面。

1 <form action="xxx.php" method="post">
2     <input type="text" name="ID">
3     <input type="submit" name="submit">
4 </form>

form屬性中action就是表單要提交到的地方,method是提交的方法(有get和post兩種)。

特別介紹的屬性:

1.formaction:就是form和action的結合。上面的代碼可以看到action是表單提交到的服務器(後臺),但是在html5之前,一個form表單內部只能提交到同一個服務器,而formaction可以設置input元素提交到不同的服務器,就象這樣:

<form  method="post">
    
    <input type="submit" name="submit" formaction="1.php">
    <input type="submit" name="submit" formaction="2.jsp"
> <input type="submit" name="submit" formaction="3.asp"> </form>

而類似的formenctype,formmethod和formtarget都是可以針對不同的表單內部的元素進行的操作。而具體的enctype,method和target參見網上的教程。

2.placeholder:就是為文本框設定一個簡短的提示信息。

1 <input type="text" name="submit" placeholder="請輸入你的學號">

技術分享

3.list:為文本框添加一個下來菜單選項(包含預定義的選項)。

1 <form  >
2     <input list="datalist1">
3     <datalist id="datalist1">
4     <option value="1"></option>
5     <option value="2"></option>
6     <option value="3"></option>
7     <option value="4"></option>
8     </datalist>
9 </form>

技術分享

4.pattern:用於驗證正則表達式。

後記:關於form表單還有部分新增的屬性在這裏沒有介紹,主要是因為這些屬性還不能在大部分瀏覽器上使用或者流行,如果有興趣可以自己了解。

html5中表單新增元素與屬性