HTML form表單

2020-07-16 10:04:46
表單在很早的 HTML 版本中就已經存在,它是使用者輸入和網頁之間資料互動的一個介面,在 HTML 中用 <form> 標籤標記。

HTML 規範已經升級到 5.0 版本,H5 是它的簡稱。以前的 HTML 其實應該稱為 HTML 4 或者 HTML 401,“5”並不代表一種新技術,僅僅是一個版本號。

以常見的使用者登入介面為例,使用者存取頁面前必須經過一個登入介面,這就是一個表單。表單留了一個需要輸入資料的區域,這些資料將被上傳到後台伺服器,或者用來校驗使用者名稱和密碼。

表單為使用者和網頁的資料互動提供了一個友好的介面。

我們再來看看 HTML 表單程式碼是如何書寫的,程式碼如下所示:
<body>
    <form name="input" action="http://www.xxx.com/index.html" method="GET">
        <input type="text" name="user">
        <input type="submit" value="Submit">
    </form>
</body>
其中:
  • form:標識了這是一個表單。
  • action:標識了所有的資料內容將向引號內的地址提交。
  • method:標識為提交到網站的方法(一般為 GET 或 POST )。
  • input:標識為一個輸入框。
  • type:標識為文字輸入(user 是其引數的名字)。
  • input 的 type 為 submit:標識一個按鈕的型別為“提交”型別。

如果在上面的程式碼描述頁面的輸入框中輸入“果果”,這兩個字將會以 GET 方法提交到 http://www.xxx.com/iiKiex.html,至於伺服器取到這些值後如何操作是另一個問題,這涉及伺服器端程式,也是前端與後端劃分的標準之一。

此外,表單中還可以承載很多型別的元素,例如 RadioBox 和 CheckBox,用來豐富使用者輸入型別和減少互動成本。

總結:表單是使用者和伺服器資料互動的使用者介面,一切向伺服器提交的資料都是由其中的幾個簡單的標籤組成的。