HTML與用戶的交互表單

時間 2019-12-01

標籤 html 用戶交互表單欄目 HTML 简体版

原文原文鏈接

使用表單標籤，與用戶交互

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

語法：html

<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>

注意:post

一、全部表單控件（文本框、文本域、按鈕、單選框、複選框等）都必須放在 <form></form> 標籤之間（不然用戶輸入的信息可提交不到服務器上哦！）。網站

二、method : post/get 的區別這一部份內容屬於後端程序員考慮的問題。ui

文本輸入框、密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也能夠轉化爲密碼輸入框。code

語法：

<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>

在瀏覽器中顯示的結果：

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

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

語法：

   <textarearows="行數"cols="列數">文本</textarea>

1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在<textarea></textarea>標籤之間能夠輸入默認值。

舉例：

<form  method="post" action="save.php">


</form><label>聯繫咱們</label><textarea cols="50" rows="10" >在這裏輸入內容...</textarea>

注意：代碼中的<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>