使用表單標簽,與用戶交互
網站怎樣與用戶進行交互?答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端,這樣服務器端程序就可以處理表單傳過來的數據。
語法:
<form method="傳送方式" action="服務器文件">
講解:
1.<form> :<form>標簽是成對出現的,以<form>開始,以</form>結束。
2.action :瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
3.method : 數據傳送的方式(get/post)。
<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>
注意:
1、所有表單控件(文本框、文本域、按鈕、單選框、復選框等)都必須放在 <form></form> 標簽之間(否則用戶輸入的信息可提交不到服務器上哦!)。
2、method : post/get 的區別這一部分內容屬於后端程序員考慮的問題。
文本輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時,就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法:
<form> <input type="text/password" name="名稱" value="文本" /> </form>
1
、type:
當type="text"時,輸入框為文本
輸入框;
當type="password"時,
輸入框為密碼輸入框。
2
、name:
為文本框命名,以備后台程序ASP 、PHP使用。
3
、value:
為文本輸入框設置默認值。(一般起到提示作用)
舉例
:
<form> 姓名: <input type="text" name="myName"> <br/> 密碼: <input type="password" name="pass"> </form>
在瀏覽器中顯示的結果:
文本域,支持多行文本輸入
當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。
語法:
<textarea
rows="
行數"
cols="
列數"
>
文本</textarea>
1
、<textarea>標簽是成對出現的,以<textarea>開始,以</textarea>結束。
2
、cols :
多行輸入域的列數。
3
、rows :
多行輸入域的行數。
4
、在<textarea></textarea>標簽之間可以輸入默認值。
舉例
:
<form method="post" action="save.php"><label>
聯系我們</label>
<textarea cols="50" rows="10" >
在這里輸入內容...
</textarea>
</form>
注意:代碼中的<label>標簽在本章5-9中講解。
在瀏覽器中顯示結果:
一個例子:
<!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">
<label for="username">用戶名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密碼:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
</body>
</html>