html5表單域指的是什么

本文小編為大家詳細介紹“html5表單域指的是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“html5表單域指的是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在html5中，表單域是用于容納所有表單空間和提示信息的容器，也就是包含在form標簽內存儲的數據；可以通過表單域定義處理表單數據所有的程序和url地址，以及數據提交到服務器的方法，若不定義表單域，表單中的數據就無法傳輸到后臺服務器。

本教程操作環境：windows10系統、CSS3&&HTML5版本、Dell G3電腦。

html5表單域是什么意思

表單域：相當于一個容器，用來容納所有的表單空間和提示信息，

可以通過它定義處理表單數據所有的程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳輸到后臺服務器

表單域就是包含在<form></form>標簽內的 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表單域指的是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。