表單：收集用戶信息。
image.png
一個完整的表單通常由表單控件（也稱為表單元素）、提示信息和表單域3個部分構成。
表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
提示信息： 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域： 相當于一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址，以及數(shù)據(jù)提交到服務器的方法。
如果不定義表單域，表單中的數(shù)據(jù)就無法傳送到后臺服務器。
input控件
<body>
<input type="屬性值" value="默認值">
<input type="text" value="默認值">
</body>
image.png
- input 輸入的意思
- <input />標簽為單標簽
- type屬性設置不同的屬性值用來指定不同的控件類型
常用屬性
image.png
1. type 屬性
- 通過改變值，決定input表單屬性。
- type = 'text' 表示 文本框 可以做 用戶名， 昵稱。
- type = 'password' 表示 密碼框 用戶輸入的內(nèi)容不可見。
用戶名: <input type="text" />
密 碼：<input type="password" />
2. value屬性 值
用戶名:<input type="text" name="username" value="請輸入用戶名">
- value 默認文本值。
3. name屬性
用戶名:<input type="text" name=“username” />
name表單的名字， 后臺可以通過name屬性找到表單。 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。
- name屬性后面的值，是我們自己定義的。
- radio 如果是一組，我們必須給他們命名相同的名字 name 為了是多選一
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
- name屬性，我們現(xiàn)在用的較少， 但是，當我們學ajax 和后臺的時候，是必須的。
4. checked屬性
- 表示默認選中狀態(tài)。 常用用于 單選按鈕和復選按鈕。
性別:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
5. input 屬性小結
| 屬性 | 說明 | 作用 |
|---|---|---|
| type | 表單類型 | 用來指定不同的控件類型 |
| value | 表單值 | 表單里面默認顯示的文本 |
| name | 表單名字 | 頁面中的表單很多，name主要作用就是用于區(qū)別不同的表單。 |
| checked | 默認選中 | 表示開始被選中 |
案例
<body>
姓名：<input type="text" ><br>
性別：<input type="radio" name="sex">男
<input type="radio" name="sex">女<br>
愛好：<input type="checkbox" name="happy" checked="checked">唱歌
<input type="checkbox" name="happy" >跳舞
<input type="checkbox" name="happy" >游泳<br>
<input type="button" value="提交">
<input type="reset" value="重置">
</body>
image.png
label標簽
目標：點擊正確率更高
作用： 用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。
綁定元素
- 第一種用法就是用label直接包括input表單。
<label> 用戶名： <input type="radio" name="usename" value="請輸入用戶名"> </label>
適合單個表單選擇
- 第二種用法 for 屬性規(guī)定 label 與哪個表單元素綁定。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
textarea控件(文本域)
<body>
<textarea>文本</textarea>
</body>
image.png
通過textarea控件可以輕松地創(chuàng)建多行文本輸入框.
cols="每行中的字符數(shù)" rows="顯示的行數(shù)" 我們實際開發(fā)不用
文本框和文本域區(qū)別
| 表單 | 名稱 | 區(qū)別 | 默認值顯示 | 用于場景 |
|---|---|---|---|---|
| input type="text" | 文本框 | 只能顯示一行文本 | 單標簽，通過value顯示默認值 | 用戶名、昵稱 |
| textarea | 文本域 | 可以顯示多行文本 | 雙標簽，默認值寫到標簽中間 | 留言板 |
select下拉列表
<body>
<select>
<option>北京</option>
<option selected="selected">上海</option>
<option>天津</option>
<option>重慶</option>
</select>
</body>
- <select> 中至少包含一對 option
- 在option 中定義selected =" selected "時，當前項即為默認選中項。
form表單域
- 收集的用戶信息 通過form表單域傳遞給服務器
- 目的：在HTML中，form標簽被用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務器。
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
常用屬性：
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并處理表單數(shù)據(jù)的服務器程序的url地址。 |
| method | get/post | 用于設置表單數(shù)據(jù)的提交方式，其取值為get或post。 |
| name | 名稱 | 用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。 |
注意:
每個表單都應該有自己表單域。 ajax 后臺交互的時候，需要 form表單域。
