2019獨角獸企業重金招聘Python工程師標準>>>

Web頁面是一種文檔，HTML就是用來編寫這些文檔的一種標記語言，文檔的結構和格式的定義是由HTML元素來完成的，HTML元素是由單一或一對標簽定義的包含范圍。

表單在HTML文檔和用戶之間，提供了一種交互的方式。利用表單，可以提交信息到Web服務器。

1.表單與服務器的交互過程

利用表單填寫好信息以后，點擊“提交”按鈕，信息就會被瀏覽器發送到服務器端。當服務器端收到信息后，對這些信息進行一些處理，然后返回信息到瀏覽器，最終呈現在用戶面前。

2.表單元素介紹

（1）<form>元素

用來創建表單的元素。基本語法如下：

<form method="get or post" action="URL">...</form>

屬性method用于指定向服務器發送表單數據時所使用的HTTP方法，可以是get或者post這兩種方法中的一種，get是默認方法。當采用get方法提交表單時，提交的數據被附加到URL（在屬性action中指定）的末端，作為URL的一部分發送到服務器端。而post方法，是將表單中的信息作為一個數據塊發送到服務器端。無論采用哪一種方法，數據的編碼都是相同的。

在提交數據時，如果數據量小，又沒有安全方面的考慮，可以采用get方法提交表單。如果數據量較大，或者有安全方面的考慮，往往采用post方法提交表單。

屬性action指定對表單進行處理的腳本的地址。也就是說，表單提交到服務器后，交由誰來處理，在action屬性中指定處理者的URL。

（2）<input>元素

如果要接收用戶的信息，我們可以在<form>元素的開始標簽和結束標簽之間，添加<input>元素。<input>元素是一個帶有屬性的空元素，用來創建表單中的控件，其語法是：

<input type="type" name="name" size="size" value="value">

屬性type用于指定要創建的控件的類型。屬性name用于指定控件的名稱，處理表單的服務器端腳本可以獲得以名稱-值對所表示的表單數據，利用名稱可以取出對應的值。屬性size用于指定控件的初始寬度。屬性value指定控件的初始值。

（3）單行文本輸入控件

是一個類型為text的<input>元素，這將在瀏覽器中顯示一個單行的文本輸入控件，語法如下：

<input type="text" size="30" name="user" value="default name">

（4）“提交”按鈕

將<input>屬性type設置為“submit”來創建“提交”按鈕。如果表單中只有一個“提交”按鈕，就不需要為它指定名字。

<input type="submit">

（5）“重置”按鈕

有時候，用戶填寫完信息后，發現有錯誤，想重新填寫，為此可以創建一個“重置”按鈕，當用戶點擊表單中的“重置”按鈕時，表單中的所有控件都將重新設置為它們的初始值。

<input type="reset">

（6）口令輸入控件

用戶輸入密碼時可采用。

<input type="password" name="pwd">

（7）單選按鈕

例如，用戶在輸入注冊信息時，在選擇性別時可采用單選按鈕。將<input>的屬性type設置為“radio”來創建單選按鈕。單選按鈕的數量根據你的需要來確定，通過對多個單選按鈕使用一個name值，可以指明一組單選按鈕。

<input type="radio" name="sex" value=1 checked>男 <input type="radio" name="sex" value=0 checked>女

（8）復選框

復選框讓用戶在一個列表中選擇多個選項。通過將<input>的屬性type設置為“checkbox”來創建復選框。

<input type="checkbox" name="intrest" value="footbool">足球 <input type="checkbox" name="intrest" value="volleyball">排球 <input type="checkbox" name="intrest" value="basketball">籃球 <input type="checkbox" name="intrest" value="swim">游泳

在這里，我們可以給四個復選框取相同的名字，也可以取不同的名字。如果取相同的名字，當提交表單后，在服務器端的腳本將會接收到多個具有同樣名字的名稱-值對（被選中的復選框的值都會被提交到服務器端）。

（9）列表框

列表框允許用戶從一個下拉列表框（下拉菜單）中選擇一項。列表框由<select>元素創建，列表框中的各個選項用<option>元素提供。

<select size=1 name="education"><option value="" selected>...</option><option value="高中">高中</option><option value="大學">大學</option><option value="碩士">碩士</option><option value="博士">博士</option> </select>

<option>元素的selected屬性指定初始選擇的列表項。

（10）多行文本輸入控件

使用多行文本輸入控件，可以容納較多的信息。

<textarea name="name" rows="number of rows" cols="number of columns">...</textarea>

（11）隱藏控件

將屬性指定為hidden來創建隱藏控件。

轉載于:https://my.oschina.net/abbchina/blog/644395

總結

以上是生活随笔為你收集整理的HTML表单详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。