設定 INPUT 元素的關聯表單- form 屬性

傳統的表單設計必須將 <input> 標籤配置於表單中,才能傳送資料,現在可以可以透過 form 屬性進行設定。

例如有一個 <form> 的 id 屬性值為 myform ,將其設定給 <input> 標籤的 form 屬性,則擁有此屬性值的 <input> 標籤將與此表單產生關聯,成為其內含元素。

form 屬性可以讓網頁的設計配置更為彈性,以下是一個簡單的示範:




淺灰色區域為一<form>構成的表單區域,第一個文字方塊 msg1 與傳送按鈕同時配置於其中,另外兩個文字方塊則配置於表單外部,其中內容文字為 Tom 的文字方塊 msg2 其 form 屬性指定為 form 元素,因此當按下「傳送資料」按鈕時, Tim 與 Tom 兩組字串隨著 URL 回傳伺服器。第三個文字方塊 的內容文字 Tracy 因為不屬於表單,亦無設定 form 屬性進行關聯,因此沒有被傳送。以下是按下按鈕時的瀏覽器網址列內容:



以下為配置的內容:

<form id="sform" style="background-color: #f7f7f7; padding: 6px;">
         <input name="msg1" type="text" value="Tim" />
         <input id="Button1" type="submit" value="傳送資料" />
</form>
<input form="sform" name="msg2" type="text" value="Tom" />
<input name="msg3" type="text" value="Tracy" />

沒有留言: