網頁制作之HTML表單

HTML表單

HTML 表單用于搜集不同類型的用戶輸入。

<form> 元素

<form> 元素定義 HTML 表單：

語法：<form></form>

HTML 表單包含表單元素。

表單元素指的是不同類型的 input 元素、復選框、單選按鈕、提交按鈕等等。

<input> 元素有很多形態，根據不同的 type 屬性。

1. 文本輸入

<input type="text"> 定義用于文本輸入的單行輸入字段

2、密碼框

<input type="password"> 定義單選按鈕。

密碼框是為了隱藏用戶密碼信息的輸入框，語法形式與文本框差不多，不同的是類型為 password。

3、單選按鈕輸入

<input type="radio"> 定義單選按鈕。

單選按鈕是在表單中有多個選項，且只能選一個的情況下使用。

注：checked表示默認選中項。

如：<input type="radio" name="sex"checked> 男

<input type="radio" name="sex"> 女

表示默認選中男項。

4、復選框（Checkboxes）

<input type="checkbox"> 定義了復選框。

復選框是可以選多個選項的選項框，與單選不同的是復選框可以選取多個選項，而且也可以默認幾個選項都處于選中狀態。

注：checked表示默認選中項。

如：<input type="checkbox" checked>

5、<select> 元素（下拉列表）

下拉列表是可以選擇的列表，當在列表中選擇要選的選項時使用，只能選其中一個選項（通過設置也可以選幾項）。

語法：

</select>

注：selected 表示默認選中項

6、<textarea> 元素（文本域）

<textarea> 元素定義多行輸入字段：

文本域是用在要輸入多行文本，填寫大量的文字時用到。

篇介紹了表單的使用，表單有很多控件，比如輸入框，密碼框、文本域，按鈕等。按類型可分如下：

輸入類控件
菜單類控件

輸入類組件 —— input

此類控件有很多種類型，使用<input type="類型">語法，常見類型如下：

type 值	含義
text	文字字段
password	密碼域，用戶看不到明文，以*代替
radio	單選按鈕
checkbox	多選按鈕
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
image	圖像域，用圖像作為背景的提交按鈕
hidden	隱藏域，不可見的輸入框
file	文本域，用于上傳文件等非文本數據

文本輸入框和密碼框

除了顯示形式不一樣，其它屬性一樣，有以下屬性：

name —— 定義文字字段名稱，用于和其它控件區別，不能包含特殊字符，也不可使用html 標簽名稱
maxlength —— 定義文本框可輸入字符最大長度
size —— 定義文本框在頁面中顯示的長度
vaule —— 定義文本框中默認的值

如下是文本輸入框和密碼框制作一個登錄表單

html代碼：

<!DOCTYPE html>
<html>
<body>
<h1>用戶登錄</h1>
<form action="/demo/html/action_page.php">
  <label for="fname">用戶名:</label><br>
  <input type="text" id="username" name="username" value=""><br>
  <label for="lname">密碼:</label><br>
  <input type="password" id="pwsd" name="pwsd" value=""><br><br>
  <input type="submit" value="提交">
</form> 
</body>
</html>

顯示效果：

HTML5 輸入類型

除了以上幾種類型，HTML5 還增加了多個新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
  數字類型（1 到 5 之間）：
  <input type="number" name="quantity" min="1" max="5">
  IE9 及早期版本不支持 type="number"。<br>
  color 選擇顏色：
  <input type="color" name="color"><br>
   生日:
  <input type="date" name="bday"><br>
  年月：
  <input type="month" name="bdaymonth"><br>
  年周：
  <input type="week" name="week_year"><br>
  時間：
  <input type="time" name="usr_time"><br>
  一定范圍
   <input type="range" name="points" min="0" max="10"><br>
   E-mail:
  <input type="email" name="email">
  能夠在被提交時自動對電子郵件地址進行驗證<br>
  搜索：
  <input type="search" name="googlesearch"><br>
  電話：
  <input type="tel" name="usrtel">
  目前只有 Safari 8 支持 tel 類型。<br>
  url：
  <input type="url" name="url">
  提交時能夠自動驗證 url 字段<br>
  <input type="submit">
</form>
</body>
</html>

效果如下：

單選和多選按鈕

使用 type = “radio” 和 type =“checkbox” 定義是單選還是多選，除了name和value屬性外，單選和多選都有一個 checked屬性定義默認選擇的項，checked = “true”指選中那個選項，表單會將 checked = “true” 的選型值傳遞給后臺。

如下實例：

<!DOCTYPE html>
<html>
<body>
<h4>單選和多選</h4>
<form action="/demo/demo_form.asp">
水果：
<input type="radio" name="shuiguo" value="banner" checked> 香蕉
<input type="radio" name="shuiguo" value="apple"> 蘋果
<br><br>
省份：
<input type="checkbox" name="shengfen" value="shannxi" checked> 陜西
<input type="checkbox" name="shengfen" value="sanxi"> 山西
<input type="checkbox" name="shengfen" value="gdong"> 廣東
<br><br>
<input type="submit">
</form> 
</body>
</html>

顯示效果：

單選和多選傳遞給后臺的數據是不一樣的，如下會看到地址欄中的數據，多選會發送多個值，后臺將會獲取一個數組形式的數據。

/demo/demo_form.asp?shuiguo=banner&shengfen=shannxi&shengfen=sanxi

普通按鈕、提交按鈕、重置按鈕

普通按鈕：type = “button”，一般配合腳本使用，語法如下：

<input type="button" name="名稱" value="按鈕值" onclick="腳本程序" />

value 值就是按鈕在頁面顯示的文字，onclick屬性定義了腳本事件，這里指單擊按鈕時所進行的處理。

如下示例：

<!DOCTYPE html>
<html>
<body>
<form>
 <input type="button" value="普通按鈕">
<input type="button" value="打開窗口" onclick="window.open()">
<input type="button" value="您好" onclick="alert('您好')">
  </form>
</body>
</html>

單擊您好按鈕

提交按鈕：type = “submit”，用于提交表單內容，是一種特殊按鈕。

如剛才的登錄表單，提交后會返回結果：

重置按鈕：type="reset"，用于清除表單數據，也是一種特殊按鈕。

輸入數據

點擊重置按鈕后，表單數據清空

重置清空數據

HTML5 按鈕

除了使用input定義按鈕，還可以使用 html5 新增的<button> 標簽定義按鈕，button 使用語法如下：

<form action="/demo/html/action_page.php">
<button type="button">普通按鈕</button>
<button type="submit">提交按鈕</button>
</form>

其它輸入類控件

隱藏域 —— hidden
文件域 —— file

如下示例：

<form action="/demo/html/action_page.php">
  <label for="fname">隱藏域:</label>
  <input type="hidden" id="hidden" name="hidden" value=""><br>
  <label for="lname">文件域:</label>
  <input type="file" id="file" name="file" value=""><br>
  <input type="submit" value="提交">
</form>

顯示效果

可以看到，隱藏域在頁面中不顯示，單擊文件域選擇文件按鈕可以選擇文件，比如word文件，電子表格文件等，會以非文本方式傳送到后臺的，常用來實現文件上傳功能。

文本域 —— textarea

除了input 類型的控件，還有文本域 textarea ，一種特殊的文本框，它與input 文本輸入框的區別就是可以輸入多行文字，input 文本輸入框是單行的無法輸入多行文字。

如下示例：

<p>textarea 元素定義多行輸入字段。</p>
<form action="/demo/html/action_page.php">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br><br>
  <input type="submit">
</form>

效果如下：

rows 屬性定義文本域的高度是幾行，cols 定義文本域寬度占幾列，比如上面定義了高10行寬30列的文本域。

下拉菜單和多選列表

下拉菜單作用和單選按鈕類似，只不過它更加節省空間，當要選擇的選型很多時，就不適合使用radio空間，所以當選項很多的時候，使用下拉菜單，語法如下：

<select name="名稱">
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選列表和多選按鈕類似，一樣為了節省空間，當數據選項比較多時，使用多選列表，語法如下：

<select name="名稱" size="可看見的列表項數" multiple>
<option value="選項值1" selected>選項1</option>
<option value="選項值2">選項3</option>
更多option......
</select>

多選比下拉菜單不同之處是多了一個multiple屬性，定義多選的，且表現形式也不一樣，不是下拉而是一個列表。

如下代碼：

<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
下拉菜單：<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br>
多選列表：<br>
<select name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>

顯示效果：

這里需要注意的是，多選列表多選時需要按住ctrl鍵同時鼠標單擊選擇才能多選，效果如下：

到這里，已介紹了大部分的表單控件，現在你可以使用他們制作自己的表單，表單通常在動態網站中使用，這為以后制作動態網站打下基礎。

還有許多屬性沒有講到，比如html5新增的一些屬性和功能，可自行參考 w3cshool 等網站學習，感謝關注，學習愉快！

上篇：前端入門——html 表單

下篇：前端入門 —— 網頁中使用窗口框架

頁編程之表單詳解。

同學們好，今天我要跟大家分享的是html中前后臺數據交互的重要內容——form標簽。通過form標簽，用戶可以在前臺填寫資料，然后通過form的method屬性中設置的提交方式，提交至action屬性規定的后端處理程序中進行處理。

我們經常在網頁上看到的填寫、注冊、登錄、修改資料等操作都需要使用form標簽。讓我們來看看今天的實例效果吧。

form標簽對于用戶來說是不可見的，如果沒有這一句話，你們只能看到一個完全空白的網頁。

可以將form標簽想象成一個盒子，其中放置了輸入框、單選框、復選框等控件。當用戶填寫完所有控件的內容并點擊提交按鈕時，這個盒子就會被蓋上，并被直接發送到服務器進行處理。

接下來，我們來看看實現代碼。form標簽是一個圍堵標簽，它具有許多屬性，但并非所有屬性都是必需的。因此，根據需要設置相應的屬性即可。

首先，我要重點介紹幾個常用的屬性：action、name、method。

action屬性設置了服務端處理程序的URL地址。以郵寄盒子的理解來說，action就是收件人地址。

name屬性設置了表單的名稱，這個名稱可以被前臺的JS調用。同時，在一個網頁中存在多個表單標簽時，它也可以用來給服務器進行區分。

method屬性設置了表單的提交方式，它有兩個值post和get。post是密文，而get是明文，post沒有數據長度限制，而get只能傳遞大約3000個字符。

以郵寄舉例，get是直接將寫著內容的信紙寄出，而post則是將信紙裝進信封里寄出。enctype不是常用屬性，但在使用時非常重要。它規定了從表單數據發送到服務器之前如何對其進行編碼，共有三個值，分別對應文字數據、多媒體數據和文件數據。詳情請參考匯總文檔。值得一提的是，只有在method等于post時，enctype的值才會生效。

除了這三個屬性外，還有accept-charset、autocomplete和history。accept-charset聲明了服務端可以處理的字符集，autocomplete是否開啟前臺自動填充歷史數據及用戶填寫一次之后，再填寫會在瀏覽器中詢問是否根據過往填寫的內容進行自動填充。

·將logo的"novalidate"設置為"true"，可以直接提交未經驗證的表單數據。通常，我們需要在前臺使用JS或控件驗證用戶填寫的數據是否符合格式要求。然而，這個屬性可以直接繞過驗證。

·將"target"設置為"_blank"，可以打開新的窗口進行提交。這與a標簽的"target"屬性相同。現在，我的理解是這樣的。在后面的C#章節中，我們將結合具體的使用場景進行詳細的講解。

今天的分享就到這里。希望各位同學能按照我的要求，認真練習寫三次。這樣，即使不看視頻，你們也能寫出正確的代碼。所有的案例和相關文檔都可以向我索取。我們下期再見。網頁編程、服務端編程、數據庫和算法。如果你想學習編程，記得關注我哦！

在線咨詢

上一篇：荒唐！情侶違停高速避險車道自拍十多分鐘秀恩愛
下一篇：零基礎教你學前端-62、CSS文本對齊和文本間距

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

網頁制作之HTML表單

輸入類組件 —— input

文本域 —— textarea

下拉菜單和多選列表

您的項目需求