html表單元素

表單元素有哪些

  • <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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末兵钮,一起剝皮案震驚了整個(gè)濱河市蛆橡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌掘譬,老刑警劉巖泰演,帶你破解...
    沈念sama閱讀 211,042評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異葱轩,居然都是意外死亡睦焕,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門靴拱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來垃喊,“玉大人,你說我怎么就攤上這事袜炕”久眨” “怎么了?”我有些...
    開封第一講書人閱讀 156,674評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵偎窘,是天一觀的道長(zhǎng)乌助。 經(jīng)常有香客問我,道長(zhǎng)评架,這世上最難降的妖魔是什么眷茁? 我笑而不...
    開封第一講書人閱讀 56,340評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮纵诞,結(jié)果婚禮上上祈,老公的妹妹穿的比我還像新娘。我一直安慰自己浙芙,他們只是感情好登刺,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著嗡呼,像睡著了一般纸俭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上南窗,一...
    開封第一講書人閱讀 49,749評(píng)論 1 289
  • 那天揍很,我揣著相機(jī)與錄音郎楼,去河邊找鬼。 笑死窒悔,一個(gè)胖子當(dāng)著我的面吹牛呜袁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播简珠,決...
    沈念sama閱讀 38,902評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼阶界,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了聋庵?” 一聲冷哼從身側(cè)響起膘融,我...
    開封第一講書人閱讀 37,662評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祭玉,沒想到半個(gè)月后氧映,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,110評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡攘宙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年屯耸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹭劈。...
    茶點(diǎn)故事閱讀 38,577評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖线召,靈堂內(nèi)的尸體忽然破棺而出铺韧,到底是詐尸還是另有隱情,我是刑警寧澤缓淹,帶...
    沈念sama閱讀 34,258評(píng)論 4 328
  • 正文 年R本政府宣布哈打,位于F島的核電站,受9級(jí)特大地震影響讯壶,放射性物質(zhì)發(fā)生泄漏料仗。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評(píng)論 3 312
  • 文/蒙蒙 一伏蚊、第九天 我趴在偏房一處隱蔽的房頂上張望立轧。 院中可真熱鬧,春花似錦躏吊、人聲如沸氛改。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽胜卤。三九已至,卻和暖如春赁项,著一層夾襖步出監(jiān)牢的瞬間葛躏,已是汗流浹背澈段。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評(píng)論 1 264
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留舰攒,地道東北人败富。 一個(gè)月前我還...
    沈念sama閱讀 46,271評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像芒率,于是被迫代替她去往敵國(guó)和親囤耳。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案偶芍? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,734評(píng)論 1 92
  • HTML標(biāo)簽解釋大全 一充择、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,229評(píng)論 1 41
  • 表單: 表單是什么?--表單不是表格 用戶可以在其中提供一些數(shù)據(jù)或信息或選項(xiàng)的html元素匪蟀。表單通常有...
    定格r閱讀 378評(píng)論 0 0
  • <form> 元素 元素定義 HTML 表單區(qū)間椎麦,而這個(gè)區(qū)間的數(shù)據(jù)將會(huì)被提交給后臺(tái)。例子: 結(jié)果是form標(biāo)簽內(nèi)的...
    Aleph_Zheng閱讀 304評(píng)論 0 0
  • 閉上眼睛回憶童年材彪,能記起的大多都是歡樂观挎,還有做的那些傻傻的事兒。 記得小時(shí)候很貪玩段化,總盼望著下課放學(xué)嘁捷。每每放學(xué)后,...
    故道浮云閱讀 305評(píng)論 0 0