多種實例解析HTML表單form的使用方法

DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 多種實例解析HTML表單form的使用方法

編輯：HTML和Xhtml

九個簡單實例為大家分析了HTML表單form的使用方法，供大家參考，具體內容如下

1 form表單標簽

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把浏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
語法：

<form method="傳送方式" action="服務器文件">

•<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。
•action ：浏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
•method ：數據傳送的方式（get/post）。

所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
method:post/get的區別這一部分內容屬於後端程序員考慮的問題。感興趣的小伙伴可以查看本小節的wiki，裡面有詳細介紹。

XML/HTML Code復制內容到剪貼板

<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>

2 input/text/password文本和密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法：

XML/HTML Code復制內容到剪貼板

<form>
<input type="text/password" name="名稱" value="文本" />
</form>

當type=”text”時，輸入框為文本輸入框;
當type=”password”時, 輸入框為密碼輸入框。
name：為文本框命名，以備後台程序ASP 、PHP使用。
value：為文本輸入框設置默認值。(一般起到提示作用)

測試代碼：

XML/HTML Code復制內容到剪貼板

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本輸入框、密碼輸入框</title>
</head>
<body>
<form method="post" action="save.php">
賬戶:<input type="text" name="myName" /><br><br>
密碼:<input type="password" name="pass" />
</form>
</body>
</html>

浏覽器效果：

3 textarea文本域，支持多行文本輸入

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：

<textarea rows="行數" cols="列數">文本默認值</textarea>

1、<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4、在標簽之間可以輸入默認值。

XML/HTML Code復制內容到剪貼板

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
<label>個人簡介：</label><br>
<textarea cols="40" rows="10">在這裡輸入內容...</textarea><br>
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>

浏覽器效果：

4 radio/checkbox單選框和復選框

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。
語法：

<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

1.當 type=”radio” 時，控件為單選框
2.當 type=”checkbox” 時，控件為復選框
3.value：提交數據到服務器的值（後台程序PHP使用）
4.name：為控件命名，以備後台程序 ASP、PHP 使用
5.checked：當設置 checked=”checked” 時，該選項被默認選中
6.注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

XML/HTML Code復制內容到剪貼板