表單標簽

一、為什么需要表單

使用表單目的是為了收集用戶信息。在我們網頁中，我們也需要跟用戶進行交互，收集用戶資料，此時就需要表單。

二、表單的組成

在 HTML 中，一個完整的表單通常由表單域、表單控件（也稱為表單元素）和 提示信息3個部分構成。

2.1 表單域

表單域是一個包含表單元素的區域。
在 HTML 標簽中， <form> 標簽用于定義表單域，以實現用戶信息的收集和傳遞。
form標簽是一個塊級元素，以
開頭，
結尾，它能夠包含input、textarea、select等元素。

<form>會把它范圍內的表單元素信息提交給服務器

<form action=“url地址” method=“提交方式” name=“表單域名稱">
各種表單元素控件
</form>

<form>標簽的常用屬性

屬性	屬性值	作用
action	URL地址	用于指定接收并處理表單數據的服務器程序的url地址
method	get/post	用于設置表單數據的提交方式，其取值為get或者post；默認為get
name	名字	用于指定表單的名稱，以區別同一個頁面中的多個表單域

注：get與post的區別。get請求的特點：（1）瀏覽器地址欄中的地址是：URL+？+請求參數，請求參數的格式是：name=value&name=value 如：(http://localhost:8080/?method=login&username=zhang&password=123&sex=boy&province=hunan&feedback=CSDN)（2）不安全（3）它有數據長度的限制 post請求的特點：（1）瀏覽器地址欄中只有url也就是action的值（2）相較于get請求安全（3）理論上沒有數據長度限制

    <form action="http://localhost:8080" method="get" name="name1">
        <input type="hidden" name="method" value="login">
        <label for="user"> 用戶名：</label> <input type="text" id="user" name="username" > <br>
        密碼：<input type="password" name="password"><br>
        性別：男 <input type="radio" name="sex" value="boy"> 女<input type="radio" name="sex" value="girl"><br>
        籍貫：
        <select name="province">
            <option>山東</option>
            <option>北京</option>
            <option selected="selected" value="hunan">湖南</option>
        </select><br>
        反饋：<br><textarea name="feedback"></textarea>
        <br>
        <input type="submit" value="提交">
    </form>

2.2 表單控件(表單元素)

在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控件。

input輸入表單元素
select下拉表單元素
textarea 文本域元素

2.2.1 <input> 表單元素

在表單元素中 <input> 標簽用于收集用戶信息
<input/> 標簽為單標簽
在 <input> 標簽中，包含一個 type 屬性，根據不同的 type 屬性值，輸入字段擁有很多種形式（可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等）
```
<input type="屬性值" />
```
type 屬性的屬性值及其描述如下：
注：表單提交時，數據沒有發送給服務器的三種情況
1. 表單項沒有name屬性值
2. 單選、復選（下拉列表中的option標簽）都需要添加value屬性，以便發給服務器
3. 表單項不在form標簽中
input標簽的其他屬性
- name 和value 是每個表單元素都有的屬性值,主要給后臺人員使用.
```
用戶名: <input type="text" value="請輸入用戶名" name="username" />
```
- name 表單元素的名字, 要求單選按鈕和復選框要有相同的name值.
```
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
```
- checked屬性主要針對于單選按鈕和復選框, 主要作用一打開頁面,就要可以默認選中某個表單元素.
```
性 別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
```
- maxlength 是用戶可以在表單元素輸入的最大字符數, 一般較少使用.

2.2.2 <label> 標簽

<label> 標簽為 input 元素定義標注（標簽）。
<label> 標簽用于綁定一個表單元素, 當點擊<label> 標簽內的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗
語法：
```
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
```
注：<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。

2.2.3 <select> 表單元素

使用場景: 在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用<select>標簽控件定義下拉列表。
語法：
```
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
```
注：1.<select> 中至少包含一對<option> 。

2.在<option> 中定義 selected =“ selected " 時，當前項即為默認選中項。

2.2.4 <textarea> 表單元素

使用場景: 當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用 <textarea> 標簽。
在表單元素中，<textarea> 標簽是用于定義多行文本輸入的控件。
使用多行文本輸入控件，可以輸入更多的文字，該控件常見于留言板，評論。
語法：
```
<textarea rows="3" cols="20">
文本內容
</textarea>
```
注：1.通過 <textarea> 標簽可以輕松地創建多行文本輸入框

2.cols=“每行中的字符數” ，rows=“顯示的行數”

綜合運用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單標簽</title>
</head>
<body>
    <form action="" method="POST" name="name1">
        <label for="user"> 用戶名：</label> <input type="text" id="user"> <br>
        密碼：<input type="password"><br>
        性別：男 <input type="radio" name="sex"> 女<input type="radio" name="sex"><br>
        籍貫：
        <select>
            <option>山東</option>
            <option>北京</option>
            <option selected="selected">湖南</option>
        </select><br>
        反饋：<br><textarea></textarea>
        <br>
        <input type="submit" value="提交">
    </form>
</body>
</html>

posted on 2023-02-20 12:27 ZhengLord 閱讀(110) 評論(0) 收藏舉報

刷新頁面返回頂部