html表單

表單是HTML中獲取用戶輸入的的手段隔缀。一個基本的表單實例如下:

<form action="form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

action屬性值為提交的地址袱吆。method屬性指定了用來將表單數(shù)據(jù)發(fā)送到服務器的HTTP方法,允許的值為get和post,默認值為get夷蚊。get請求用于安全交互,同一個請求可以發(fā)起任意多次而不會產(chǎn)生額外作用翘簇。post請求則用于不安全交互撬码,提交數(shù)據(jù)的行為會導致一些狀態(tài)的改變。具體區(qū)別可以參考get與post區(qū)別版保。
表單主要是input元素呜笑,常用input標簽如下:
常用input標簽
button 定義可點擊按鈕(多數(shù)情況下,用于通過 JavaScript 啟動腳本)彻犁。
checkbox 定義復選框叫胁。
file 定義輸入字段和 "瀏覽"按鈕,供文件上傳汞幢。
hidden 定義隱藏的輸入字段驼鹅。
image 定義圖像形式的提交按鈕。
password 定義密碼字段森篷。該字段中的字符被掩碼输钩。
radio 定義單選按鈕。
reset 定義重置按鈕仲智。重置按鈕會清除表單中的所有數(shù)據(jù)买乃。
submit 定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務器钓辆。
text 定義單行的輸入字段剪验,用戶可在其中輸入文本。默認寬度為 20 個字符前联。
其它常用輸入元素還有select和textarea

<select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<textarea rows="3" cols="20">
test
</textarea>

select 元素可創(chuàng)建單選或多選菜單
textarea 元素定義多行的文本輸入控件
常用label元素將字段與標簽關(guān)聯(lián)

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

label 元素不會向用戶呈現(xiàn)任何特殊效果功戚。不過,它為鼠標用戶改進了可用性似嗤。如果在 label 元素內(nèi)點擊文本啸臀,就會觸發(fā)此控件。就是說烁落,當用戶選擇該標簽時壳咕,瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上。<label> 標簽的 for 屬性應當與相關(guān)元素的 id 屬性相同顽馋。
fieldset與legend

<fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    體重:<input type="text" />
</fieldset>

fieldset 元素可將表單內(nèi)的相關(guān)元素分組谓厘,legend 元素為fieldset 元素定義標題。

本部分內(nèi)容參考HTML5權(quán)威指南寸谜,w3school竟稳,需要更詳細的內(nèi)容可以參考MDN文檔

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市他爸,隨后出現(xiàn)的幾起案子聂宾,更是在濱河造成了極大的恐慌,老刑警劉巖诊笤,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件系谐,死亡現(xiàn)場離奇詭異,居然都是意外死亡讨跟,警方通過查閱死者的電腦和手機纪他,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來晾匠,“玉大人茶袒,你說我怎么就攤上這事×构荩” “怎么了薪寓?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵,是天一觀的道長澜共。 經(jīng)常有香客問我向叉,道長,這世上最難降的妖魔是什么嗦董? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任第献,我火速辦了婚禮询张,結(jié)果婚禮上席覆,老公的妹妹穿的比我還像新娘幌陕。我一直安慰自己供璧,他們只是感情好存崖,可當我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著睡毒,像睡著了一般来惧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上演顾,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天供搀,我揣著相機與錄音,去河邊找鬼钠至。 笑死葛虐,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的棉钧。 我是一名探鬼主播屿脐,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了的诵?” 一聲冷哼從身側(cè)響起万栅,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎西疤,沒想到半個月后烦粒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡代赁,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年扰她,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片管跺。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡义黎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出豁跑,到底是詐尸還是另有隱情廉涕,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布艇拍,位于F島的核電站狐蜕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏卸夕。R本人自食惡果不足惜层释,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望快集。 院中可真熱鬧贡羔,春花似錦、人聲如沸个初。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽院溺。三九已至楣嘁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間珍逸,已是汗流浹背逐虚。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留谆膳,地道東北人叭爱。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像漱病,于是被迫代替她去往敵國和親涤伐。 傳聞我的和親對象是個殘疾皇子馒胆,可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2 360

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

  • 一、表單 1. 表單的作用 HTML 表單用于接收不同類型的用戶輸入凝果,用戶提交表單時向服務器傳輸數(shù)據(jù)祝迂,從而實現(xiàn)用戶...
    zx9426閱讀 415評論 0 1
  • HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務器傳輸數(shù)據(jù)器净,從而實現(xiàn)用戶與Web服務器的交互型雳。 表單...
    饑人谷_Dylan閱讀 640評論 0 48
  • 1 表單是如何工作的? 用戶在網(wǎng)頁上填寫表單并提交所填信息山害,瀏覽器將用戶提交的數(shù)據(jù)發(fā)送至 Web 服務器纠俭, Web...
    饑人谷_Mily閱讀 1,193評論 0 1
  • 一個朋友說起:“我的爺爺總算良心發(fā)現(xiàn)了权纤,他想在養(yǎng)老院附近租個房子住钓简,然后陪我奶奶⌒谙耄……我奶奶這輩子也算了值了外邓,我爺...
    西瓜甜甜啦閱讀 1,146評論 35 36
  • First created on Mar.06.2013. All rights reserved. 家里已過了驚...
    astrocachet閱讀 159評論 0 0