HTML中的表單
標簽


一、HTML表單

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

 

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

關於表單的更多內容可以參考https://www.cnblogs.com/nyw1983/p/11874993.html

 

 

二、HTML元素

(一) <form> 元素  

<form>元素用以定義HTML表單    <form>.... </form>

1. action 屬性

action 屬性定義在提交表單時執行的動作。

向服務器提交表單的通常做法是使用提交按鈕,通常,表單會被提交到 web 服務器上的網頁。在上面的例子中,指定了某個服務器腳本來處理被提交表單.

如果省略 action 屬性,則 action 會被設置為當前頁面

 

2.method 屬性

method 屬性規定在提交表單時所用的 HTTP 方法(GET 或 POST):

<form action="action_page.php" method="GET"> 

<form action="action_page.php" method="POST">

 

(二)<input>元素    

 <input>元素定義輸入域,根據不同的type屬性,相應的input元素有很多形態,(

name 屬性:如果要正確地被提交,每個輸入字段必須設置一個 name 屬性。)

屬性值:

  • text                 文本輸入
  • radio              單選按鈕輸入(選擇唯一)
  • submit            提交按鈕(提交表單)
  • checkbox       復選框
  • password       密碼輸入

 表單元素

(一)type屬性的值

1、 文本輸入

<input type="text"> 定義用於文本輸入的單行輸入字段,實例

表現效果(表單本身並不可見,文本字段的默認寬度是 20 個字符)

2、 單選按鈕輸入

<input type="radio"> 定義單選按鈕,有限數量的選項中選擇其中之一,實例:

表現效果

3、提交按鈕

<input type="submit"> 定義用於向表單處理程序(form-handler)提交表單的按鈕。

表單處理程序通常是包含用來處理輸入數據的腳本的服務器頁面。

表現效果

4、密碼輸入

<input type="password"> 定義密碼字段區域

表現效果 (密碼字段中的字符是隱藏的(顯示為星號或圓圈))

5、 復選框(Checkboxes)

<input type="checkbox"> 定義了復選框. 從若干給定的選擇中選取一個或若干選項。

表現效果

 


 

(二)<textarea> 元素

<textarea>定義一個多行的文本輸入控件,文本區域中可容納無限數量的文本,其中的文本的默認字體是等寬字體(通常是 Courier)

可以通過 cols rows 屬性來規定 textarea 的尺寸大小,不過更好的辦法是使用 CSS height width 屬性

表現效果

<textares> 標簽支持HTML的全局屬性,也支持HTML的事件屬性。更多<textarea>標簽的屬性內容請參考https://www.runoob.com/tags/tag-textarea.html

 


(三)<button>元素

<button> 標簽定義一個按鈕。

在 <button> 元素內部可以放置內容,比如文本或圖像。這是該元素與使用 <input> 元素創建的按鈕之間的不同之處。

提示:請始終為 <button> 元素規定 type 屬性。不同的瀏覽器對 <button> 元素的 type 屬性使用不同的默認值。

表現效果

 


(四) <select>元素

<select> 元素用來創建下拉列表。

<select> 元素中的 <option> 標簽定義了列表中的可用選項。<select> 元素是一種表單控件,可用於在表單中接受用戶輸入

表現效果


(五) <fieldset> 組合表單數據

<fieldset> 元素組合表單中的相關數據

<legend> 元素為 <fieldset> 元素定義標題。

代碼

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

 

表現效果


(七)datalist 元素

datalist 元素規定輸入域的選項列表。
列表是通過 datalist 內的 option 元素創建的。
如需把 datalist 綁定到輸入域,請用輸入域的 list 屬性引用 datalist 的 id

表現效果


(七)keygen 元素

keygen 元素的作用是提供一種驗證用戶的可靠方法。
keygen 元素是密鑰對生成器(key-pair generator)。當提交表單時,會生成兩個鍵,一個是私鑰,一個公鑰。
私鑰(private key)存儲於客戶端,公鑰(public key)則被發送到服務器。公鑰可用於之后驗證用戶的客戶端證書(client certificate)。
目前,瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標准


(八)output 元素

output 元素用於不同類型的輸出,比如計算或腳本輸出

 


免責聲明!

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



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