表單元素有哪些
-
<form>表示了文檔中的一個(gè)區(qū)域缓醋，這個(gè)區(qū)域中包含有交互控制元件颁褂，用來像web服務(wù)器提交信息 -
<input>輸入文本框席里，根據(jù)其特性签则，也可能是按鈕型顯示 -
<button>按鈕 -
<lable>為input標(biāo)簽定義一個(gè)屬性定義一個(gè)標(biāo)記 -
<option>：定義下拉懸著 -
<select>：下拉框懸著性的東西 -
<textarea>：文本區(qū)遥诉，文字是可以換行的拇泣，相對(duì)input可以展示的東西更多
1，form元素講解
form元素是用來定義html表單的突那，而html表單是一個(gè)組合挫酿，是用來收集不同類型的用戶輸入，在他里面可以嵌套其他的表單元素 input等
1.1 form元素的屬性
增強(qiáng)解釋：
accept_charset是指瀏覽器當(dāng)前頁面的的內(nèi)容使用的字符集愕难，比如utf-8,gbk等早龟，
在進(jìn)行字符集的編碼以后，瀏覽器還要根據(jù)enctype進(jìn)行一次編碼猫缭，默認(rèn)的是使用是url-encoded,也就是url編碼葱弟，會(huì)對(duì)一些特殊的字符（除了英文字符，某些標(biāo)點(diǎn)之外的符號(hào)猜丹，比如空格芝加，中文等）進(jìn)行url編碼，一般是在前面加一個(gè)“%”號(hào) 詳細(xì)的解釋可以看這里
target是提交后在新的網(wǎng)頁打開返回的信息還是在當(dāng)前網(wǎng)頁打開從后臺(tái)返回的新的頁面 target="_blank" 代表從新的頁面打開射窒，瀏覽器會(huì)新打開一個(gè)標(biāo)簽頁藏杖， target="_self" 會(huì)刷新當(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ī)定通過文件上傳來提交的文件類型，在上傳文件的時(shí)候有用 |
| checked | checked | 規(guī)定此input元素首次加載時(shí)應(yīng)當(dāng)被選中checked 屬性 與 <input type="checkbox"> 或 <input type="radio"> 配合使用艾疟。
|
| disabled | disbled | 當(dāng)input元素加載的時(shí)候禁用来吩，置灰 |
| 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ù)器時(shí)候使用的name = value中的name |
type的詳細(xì)解釋
| 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!"> |
 |
就是一個(gè)簡(jiǎn)單的按鈕 |
| 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" /> |
 |
點(diǎn)擊reset的話同廉，會(huì)將輸入表單中的數(shù)據(jù)清空 |
3， button按鈕
button相對(duì)于input的
<button> 控件 與 <input type="button"> 相比嘀略，提供了更為強(qiáng)大的功能和更豐富的內(nèi)容恤溶。
<button> 與 </button> 標(biāo)簽之間的所有內(nèi)容都是按鈕的內(nèi)容，其中包括任何可接受的正文內(nèi)容帜羊，比如文本或多媒體內(nèi)容。例如鸠天，我們可以在按鈕中包括一個(gè)圖像和相關(guān)的文本讼育，用它們?cè)诎粹o中創(chuàng)建一個(gè)吸引人的標(biāo)記圖像。
3.1 稠集， button的屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| name | 按鈕的名稱定義 | 可以用來js獲取該標(biāo)簽 |
| type | button , submit , reset | button是定義一個(gè)按鈕奶段， submit是定義一個(gè)提交類型的按鈕， 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)簽用于定義列表中的可用選項(xiàng)蹲缠。
4.1，屬性及解釋
| 屬性名 | 屬性值 | 解釋 | 效果 | 示例 |
|---|---|---|---|---|
| diabled | disabled | 規(guī)定禁用下拉列表悠垛，無法下拉 | <select disabled="disabled"> <option value="volvo">Volvo</option> </select> |
 |
| multiple | multiple | 規(guī)定可以選擇多個(gè)選項(xiàng)卡,也就是一次會(huì)提交兩個(gè)值线定，但是這種用法應(yīng)該很少 | <select multiple="multiple" size="4"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> </select> |
可以選擇多個(gè)值，但是windows下按ctrl+點(diǎn)擊  Paste_Image.png
|
| name | name | 規(guī)定該下拉列表的名稱 | <select name="carlist"> <option value="volvo">Volvo</option></select> |
只是定義了name提供給js使用 |
| size | 數(shù)字number | 規(guī)定該下拉列表中可見選項(xiàng)的數(shù)目 | 就像multiple中的數(shù)據(jù)一樣呜象，可以看到四個(gè) |
5 搀别，option 標(biāo)簽
<option> 標(biāo)簽可以在不帶有任何屬性的情況下使用桑包，但是您通常需要使用 value 屬性，此屬性會(huì)指示出被送往服務(wù)器的內(nèi)容芭商。
請(qǐng)與 select 元素配合使用此標(biāo)簽，否則這個(gè)標(biāo)簽是沒有意義的搀缠。
5.1铛楣， option屬性
| 屬性 | 值 | 描述 | 示例 | 效果 |
|---|---|---|---|---|
| disabled | disabled | 規(guī)定此選項(xiàng)首次加載的時(shí)候被禁用 | <select> <option>Volvo</option> <option disabled="disabled">Opel</option></select> |
 |
| selected | selected | 規(guī)定選項(xiàng)打開列表時(shí)為選中狀態(tài) | <select> <option>Volvo</option> <option selected="selected">Saab</option></select> |
 |
| value | text | 定義發(fā)送到服務(wù)器的選項(xiàng)值 | <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> |
點(diǎn)擊提交的話發(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)簽的提交時(shí) name屬性對(duì)應(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>
提交后實(shí)際提交的是aaa=w3school
