表單元素有哪些
-
<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