HTML與用戶的交互 表單


使用表單標簽,與用戶交互

網站怎樣與用戶進行交互?答案是使用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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM