在html5中,表單域是用來容納所有表單空間和提示資訊的容器,也就是包含在form標籤內儲存的資料;可以透過表單域定義處理表單資料所有的程式和url位址,以及資料提交到伺服器的方法,若不定義表單域,表單中的資料就無法傳輸到後台伺服器。
本教學操作環境:windows10系統、CSS3&&HTML5版本、Dell G3電腦。
表單域:相當於一個容器,用來容納所有的表單空間和提示訊息,
可以透過它定義處理表單資料所有的程式的url位址,以及資料提交到伺服器的方法。如果不定義表單域,表單中的資料就無法傳送到後台伺服器
表單域就是包含在
標籤內的input中儲存的數據,表單域包含多種input類型,包括hiiden類型,text類型,radio類型,checkbox類型,textarea類型,file類型,select類型登基礎類型,
表單域作用:收集表單信息,並且提交給伺服器;
常用屬性:
action 在表單收集到資訊後,需要將資訊提交到伺服器進行處理,action屬性用於指定接收並處理表單資料的伺服器程式的url位址
method 用來設定表單提交資料的方式,取值為get或post。 get提交會明文顯示在網址列,建議用post方式提交
name 用於指定表單的名稱,以區分同一個頁面的不同表單
擴充知識:
表單控制項:包含了特定的表單功能項,如但行文字輸入框、密碼輸入框、複選框、提交按鈕、重設按鈕等
提示資訊:一個表單中通常包含一些說明性文字,提示使用者進行填寫和操作
表單域屬性
1、form
##該屬性可以透過表單的id來指定目前表單域屬於哪個表單,指定該屬性後,當前表單域可以放在頁面任何一個地方,而且可以指定一個表單域屬於多個表單,此時不同form 之間用空格分開,但是不推薦這樣寫,會使頁面比較混亂。 案例代碼:<form action="#" id="form1"> 姓名:<input type="text"> <input type="submit" value="提交"> </form> 年龄:<input type="text" form="form1"> </body>2、formaction此屬性一般寫在提交按鈕裡,作用是覆蓋表單的action 屬性,使表單資料提交到另一個位址,適用於在表單中設定多個提交按鈕,分別指向不同的地址,然後獲得不同的結果的情況。 案例代碼:
<form action="#" id="form1"> 姓名:<input type="text"> <input type="submit" value="提交"> <input type="submit" value="提交2" formaction="新地址"> </form>3、formenctype此屬性用來在表單以post 方式提交的情況下,修改資料的編碼方式,常用的值有: application/x-www-form-urlencoded(預設值字元編碼)、multipart/form-data(二進位)、text/plain(純文字)案例代碼:
<form action="#" id="form1"> 姓名:<input type="text"> <input type="submit" value="字符编码"> <input type="submit" value="二进制编码" formenctype="multipart/form-data"> <input type="submit" value="纯文本" formenctype="text/plain"> </form>4、 list此屬性跟表單元素datalist 結合使用,顯示下拉方塊。 list 的值應該是對應 datalist 的 id 值。這個下拉框還可以自動根據你輸入的關鍵字對下拉清單進行比對顯示。 案例展示: 關鍵字匹配 #案例程式碼:
<form> 下拉列表:<input list="books"> <datalist id="books"> <option value="java"></option> <option value="C#"></option> <option value="java Web"></option> </datalist> </form>(學習影片分享:
以上是html5表單域是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!