HTML 表單的用法

HTML 表單:輸入用戶信息的單子蛹找,收集填寫的信息給服務(wù)器后臺(tái)
例:
<form action="http://www.blabla.cn/asdocs/html_tutorials/yourname.asp" method="get">
<input type="text" name="yourname">
<input type="submit" value="提交">
</form>

form:定義html表單沈矿,粗淺理解為包裹表單惦辛。

Action 屬性:定義是在提交表單時(shí)執(zhí)行的動(dòng)作痪欲。向服務(wù)器提交表單的通常做法是使用提交按鈕悦穿。通常,表單會(huì)被提交到 web 服務(wù)器上的網(wǎng)頁(yè)业踢。在上面的例子中栗柒,指定了某個(gè)服務(wù)器腳本來(lái)處理被提交表單,如果省略 action 屬性知举,則 action 會(huì)被設(shè)置為當(dāng)前頁(yè)面瞬沦。例:<form action="action_page.php">

Method 屬性:是規(guī)定在提交表單時(shí)所用的 HTTP 方法,method有兩個(gè)值:get和post雇锡。get的方式是將表單控件的name/value信息經(jīng)過(guò)編碼之后逛钻,通過(guò)URL發(fā)送(你可以在地址欄里看到)。而post則將表單的內(nèi)容通過(guò)http發(fā)送锰提,你在地址欄看不到表單的提交信息曙痘。那什么時(shí)候用get,什么時(shí)候用post呢立肘?一般是這樣來(lái)判斷的边坤,如果只是為取得和顯示數(shù)據(jù),用get谅年;一旦涉及數(shù)據(jù)的保存和更新茧痒,那么建議用post。

Name屬性:如果要正確地被提交融蹂,每個(gè)輸入字段必須設(shè)置一個(gè) name 屬性文黎。有input必須有name。
例:
<form action="/demo/demo_form.asp">
First name:

<input type="text" value="Mickey">


Last name:

<input type="text" name="lastname" value="Mouse">



<input type="submit" value="Submit">
</form>

fieldset:組合表單數(shù)據(jù)
<fieldset> 元素組合表單中的相關(guān)數(shù)據(jù)
<legend> 元素為 <fieldset> 元素定義標(biāo)題殿较。
例:
<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:

<input type="text" name="firstname" value="Mickey">


Last name:

<input type="text" name="lastname" value="Mouse">



<input type="submit" value="Submit"></fieldset>
</form>

Html表單(Form)常用控件有:

input type="button:定義按鈕耸峭。例:<input type="button" onclick="alert('Hello World!')" value="Click Me!">

input type="submit" 將表單(Form)里的信息提交給表單里action所指向的文件 ,例:<input type="submit" value="提交">

input type="password" 密碼輸入框(輸入的文字用*表示)淋纲;例:<input type="password" name="password">

input type="text":?jiǎn)涡形谋据斎肟?br> 單行文本輸入框允許用戶輸入一些簡(jiǎn)短的單行信息劳闹,比如用戶姓名。例:<input type="text" name="username">

input type="checkbox":復(fù)選框
復(fù)選框允許用戶在一組選項(xiàng)里洽瞬,選擇多個(gè)本涕。
例:
<input type="checkbox" name="fruit" value ="apple">蘋果

<input type="checkbox" name="fruit" value ="orange">橙子

<input type="checkbox" name="fruit" value ="mango">芒果

用checked表示缺省已選的選項(xiàng)。
例:
<input type="checkbox" name="fruit" value ="orange" checked>桔子

input type="radio"單選框
使用單選框伙窃,讓用戶在一組選項(xiàng)里只能選擇一個(gè)菩颖。
例:
<form>
<input type="radio" name="sex" value="male" checked>Male


<input type="radio" name="sex" value="female">Female
</form>

select:下拉框(select);既可以用做單選为障,也可以用做復(fù)選晦闰。
例:
<select name="fruit" >
<option value="apple">蘋果</option>
<option value="orange">橙子</option>
<option value="mango">芒果</option>
</select>
如果要變成復(fù)選放祟,加muiltiple即可。用戶用Ctrl來(lái)實(shí)現(xiàn)多選呻右。例句:<select name="fruit" multiple>跪妥。用戶還可以用size屬性來(lái)改變下拉框(Select)的大小。

textarea:多行輸入框
多行輸入框(textarea)主要用于輸入較長(zhǎng)的文本信息声滥。
例:
<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>
其中cols表示textarea的寬度眉撵,rows表示textarea的高度。
表單控件(Form Control):密碼輸入框(input type="password")

input type="image":圖片提交落塑。
input type=image 相當(dāng)于 input type=submit纽疟,不同的是,input type=image 以一個(gè)圖片作為表單的提交按鈕憾赁,其中 src 屬性表示圖片的路徑仰挣。
例:<input type="image" src ="http://www.blabla.cn/images/icons/go.gif" alt = "提交" name="imgsubmit">

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市缠沈,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌错蝴,老刑警劉巖洲愤,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異顷锰,居然都是意外死亡柬赐,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門官紫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)肛宋,“玉大人,你說(shuō)我怎么就攤上這事束世≡统拢” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵毁涉,是天一觀的道長(zhǎng)沉帮。 經(jīng)常有香客問(wèn)我,道長(zhǎng)贫堰,這世上最難降的妖魔是什么穆壕? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮其屏,結(jié)果婚禮上喇勋,老公的妹妹穿的比我還像新娘。我一直安慰自己偎行,他們只是感情好川背,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布贰拿。 她就那樣靜靜地躺著,像睡著了一般渗常。 火紅的嫁衣襯著肌膚如雪壮不。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天皱碘,我揣著相機(jī)與錄音询一,去河邊找鬼。 笑死癌椿,一個(gè)胖子當(dāng)著我的面吹牛健蕊,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播踢俄,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼缩功,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了都办?” 一聲冷哼從身側(cè)響起嫡锌,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎琳钉,沒想到半個(gè)月后势木,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡歌懒,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年啦桌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片及皂。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡甫男,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出验烧,到底是詐尸還是另有隱情板驳,我是刑警寧澤,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布碍拆,位于F島的核電站笋庄,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏倔监。R本人自食惡果不足惜直砂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望浩习。 院中可真熱鬧静暂,春花似錦、人聲如沸谱秽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至郊供,卻和暖如春峡碉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背驮审。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工鲫寄, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人疯淫。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓地来,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親熙掺。 傳聞我的和親對(duì)象是個(gè)殘疾皇子未斑,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

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

  • 1、關(guān)于form表單的基礎(chǔ) form表單:是一個(gè)包含表單元素的區(qū)域币绩;作用蜡秽,用于包裹表單元素。 表單元素:是允許用戶...
    tangmengyun閱讀 695評(píng)論 1 1
  • HTML 表單用于搜集不同類型的用戶輸入缆镣。用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)芽突,從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。HTM...
    FLYSASA閱讀 409評(píng)論 0 0
  • 一费就、表單 1. 表單的作用 HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)川队,從而實(shí)現(xiàn)用戶...
    zx9426閱讀 399評(píng)論 0 1
  • 在 HTML 中力细,表單是由 標(biāo)記定界的區(qū)域,包含文本輸入框固额、按鈕眠蚂、復(fù)選框和圖形用戶界面的其他功能部件。Web ...
    萊昂納德剛閱讀 464評(píng)論 0 0
  • 每次經(jīng)過(guò)xx養(yǎng)生堂斗躏、xx祖?zhèn)靼位鸸奘呕郏偸怯X得特別好奇 又聽說(shuō)拔火罐可以祛濕排毒,不知道為什么總覺得自己濕氣很重啄糙,毒...
    空想家卡其閱讀 1,324評(píng)論 0 0