表單元素有哪些
-
<form>表示了文檔中的一個區(qū)域，這個區(qū)域中包含有交互控制元件，用來像web服務(wù)器提交信息 -
<input>輸入文本框，根據(jù)其特性，也可能是按鈕型顯示 -
<button>按鈕 -
<lable>為input標(biāo)簽定義一個屬性定義一個標(biāo)記 -
<option>：定義下拉懸著 -
<select>：下拉框懸著性的東西 -
<textarea>：文本區(qū)，文字是可以換行的，相對input可以展示的東西更多
1，form元素講解
form元素是用來定義html表單的，而html表單是一個組合，是用來收集不同類型的用戶輸入，在他里面可以嵌套其他的表單元素 input等
1.1 form元素的屬性
增強解釋：
accept_charset是指瀏覽器當(dāng)前頁面的的內(nèi)容使用的字符集，比如utf-8,gbk等，
在進行字符集的編碼以后，瀏覽器還要根據(jù)enctype進行一次編碼，默認(rèn)的是使用是url-encoded,也就是url編碼，會對一些特殊的字符（除了英文字符，某些標(biāo)點之外的符號，比如空格，中文等）進行url編碼，一般是在前面加一個“%”號 詳細的解釋可以看這里
target是提交后在新的網(wǎng)頁打開返回的信息還是在當(dāng)前網(wǎng)頁打開從后臺返回的新的頁面 target="_blank" 代表從新的頁面打開，瀏覽器會新打開一個標(biāo)簽頁， target="_self" 會刷新當(dāng)前頁面
代碼示例：
<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form 元素 input 等
<label for="name">Male</label>
<input type="text" id="name" name="firstname">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
.
</form>
2，input元素講解
input元素是表單元素之一，用來收集用戶輸入信息，根據(jù)type屬性不同可以變化為多種形態(tài)
2.1 input元素的屬性
| 屬性 | 值 | 解釋 |
|---|---|---|
| accept | mime_type | 規(guī)定通過文件上傳來提交的文件類型，在上傳文件的時候有用 |
| checked | checked | 規(guī)定此input元素首次加載時應(yīng)當(dāng)被選中checked 屬性 與 <input type="checkbox"> 或 <input type="radio"> 配合使用。
|
| disabled | disbled | 當(dāng)input元素加載的時候禁用，置灰 |
| type | ... | 規(guī)定input元素的類型 |
| value | 具體value | 規(guī)定input 元素的值，在不同type下作用也不同 type="button", "reset", "submit" - 定義按鈕上的顯示的文本 \n type="text", "password", "hidden" - 定義輸入字段的初始值\n type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值；<input type="checkbox"> 和 <input type="radio"> 中必須設(shè)置 value 屬性。 |
| name | field_name | 定義input元素的名稱，提交到服務(wù)器時候使用的name = value中的name |
type的詳細解釋
| type值 | 代碼 | 效果 | 解釋 |
|---|---|---|---|
| text | 姓：<input type="text" name="firstname"> |
 |
文字輸入 |
| password |
用戶：<input type="text" name="user"><br /> 密碼： <input type="password" name="password">
|
 |
把密碼擋住 |
| submit | <input type="submit" value="Submit"> |
 |
提交數(shù)據(jù) |
| button | <input type="button" value="Hello world!"> |
 |
就是一個簡單的按鈕 |
| checkbox |
<input type="checkbox" name="Bike"><br />我喜歡汽車：<input type="checkbox" name="Car"></form>
|
 Paste_Image.png
|
可以多選 |
| radio | <input type="radio" checked="checked" name="Sex" value="male" /><br />女性：<input type="radio" name="Sex" value="female" /> |
 |
只能單選 |
| file | <input type="file"> |
 |
上傳文件使用 |
| hidden | <input type="hidden" name="firstname" value="Mickey"> |
沒有任何東西，在界面上影藏了 | 通常是提供給js使用的 |
| image | <input type="image" src="/i/eg_submit.jpg" alt="Submit" /> |
 Paste_Image.png
|
定義圖片形式的提交按鈕，也就是和submit是一樣的東西 |
| reset | <input type="reset" value="Reset" /> |
 |
點擊reset的話，會將輸入表單中的數(shù)據(jù)清空 |
3， button按鈕
button相對于input的
<button> 控件 與 <input type="button"> 相比，提供了更為強大的功能和更豐富的內(nèi)容。
<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容，比如文本或多媒體內(nèi)容。例如，我們可以在按鈕中包括一個圖像和相關(guān)的文本，用它們在按鈕中創(chuàng)建一個吸引人的標(biāo)記圖像。
3.1 ， button的屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| name | 按鈕的名稱定義 | 可以用來js獲取該標(biāo)簽 |
| type | button , submit , reset | button是定義一個按鈕， submit是定義一個提交類型的按鈕， reset是清空當(dāng)前form中的數(shù)據(jù)輸入 |
| value | text | 規(guī)定按鈕的初始值，可以使用js修改，并不是顯示的值<button type="button" value = "value值">按鈕顯示的值</button> 效果是 |
4 ， select元素
select 元素可創(chuàng)建單選或多選菜單。
<select&> 元素中的 <option> 標(biāo)簽用于定義列表中的可用選項。
4.1，屬性及解釋
| 屬性名 | 屬性值 | 解釋 | 效果 | 示例 |
|---|---|---|---|---|
| diabled | disabled | 規(guī)定禁用下拉列表，無法下拉 | <select disabled="disabled"> <option value="volvo">Volvo</option> </select> |
 |
| multiple | multiple | 規(guī)定可以選擇多個選項卡,也就是一次會提交兩個值，但是這種用法應(yīng)該很少 | <select multiple="multiple" size="4"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> </select> |
可以選擇多個值，但是windows下按ctrl+點擊  Paste_Image.png
|
| name | name | 規(guī)定該下拉列表的名稱 | <select name="carlist"> <option value="volvo">Volvo</option></select> |
只是定義了name提供給js使用 |
| size | 數(shù)字number | 規(guī)定該下拉列表中可見選項的數(shù)目 | 就像multiple中的數(shù)據(jù)一樣，可以看到四個 |
5 ，option 標(biāo)簽
<option> 標(biāo)簽可以在不帶有任何屬性的情況下使用，但是您通常需要使用 value 屬性，此屬性會指示出被送往服務(wù)器的內(nèi)容。
請與 select 元素配合使用此標(biāo)簽，否則這個標(biāo)簽是沒有意義的。
5.1， option屬性
| 屬性 | 值 | 描述 | 示例 | 效果 |
|---|---|---|---|---|
| disabled | disabled | 規(guī)定此選項首次加載的時候被禁用 | <select> <option>Volvo</option> <option disabled="disabled">Opel</option></select> |
 |
| selected | selected | 規(guī)定選項打開列表時為選中狀態(tài) | <select> <option>Volvo</option> <option selected="selected">Saab</option></select> |
 |
| value | text | 定義發(fā)送到服務(wù)器的選項值 | <form action="/example/html/form_action.asp" method="get" target="_blank"><select name="cars"> <option value="volvo">Volvo XC90</option></select><input type="submit" value="Submit" /></form> |
點擊提交的話發(fā)送的數(shù)據(jù)是： cars=volvo |
6 textarea標(biāo)簽
<textarea> 標(biāo)簽定義多行的文本輸入控件。
文本區(qū)中可容納無限數(shù)量的文本，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier）。
可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。
6.1，textarea屬性
| 屬性 | 值 | 描述 | 示例 | 效果 |
|---|---|---|---|---|
| cols | number數(shù)字 | 該文本的可見寬度，應(yīng)該是column（列）的縮寫 | ||
| rows | number數(shù)字 | 該文本的可見行數(shù) ，就是高度 | ||
| name | 定義該文本區(qū)的名字 | |||
| readonly | readonly | 定義該文本區(qū)為只讀 ，不可編輯 | ||
| disabled | disabled | 定義該文本區(qū)的內(nèi)容不可用，提交不到服務(wù)器 | ｜ |
textarea 標(biāo)簽的提交時 name屬性對應(yīng)的值 = 文本區(qū)的內(nèi)容，和input標(biāo)簽相似
<form action="/example/html/form_action.asp" method="get" target="_blank">
<textarea name = "aaa" rows="3" cols="20">
w3school
</textarea>
<input type="submit" value="Submit" />
</form>
提交后實際提交的是aaa=w3school
