HTML表單

1.**<form>元素 **<form action="1.php" method="POST">……</form>

<form>元素包含構成表單的所有元素弓摘,還會告訴瀏覽器當你提交表單時要把表單數(shù)據(jù)發(fā)送哪里烦却,以及瀏覽器要用什么方法發(fā)送數(shù)據(jù)。

屬性 含義
action 規(guī)定當提交表單時向何處發(fā)送表單數(shù)據(jù)浓瞪。
method 確定表單數(shù)據(jù)如何發(fā)送到服務器
target target 屬性規(guī)定在何處打開 action URL
enctype 規(guī)定在發(fā)送到服務器之前應該如何對表單數(shù)據(jù)進行編碼。
accept-charset 規(guī)定服務器用哪種字符集處理表單數(shù)據(jù)。
  • enctype屬性的屬性值:
屬性值 含義
application/x-www-form-urlencoded 在發(fā)送前編碼所有字符(默認)
multipart/form-data 不對字符編碼撼唾。在使用包含文件上傳控件的表單時输涕,必須使用該值音婶。
text/plain 空格轉換為 "+" 加號,但不對特殊字符編碼莱坎。

2.<input>元素

  • 文本輸入text <input type="text" name="account">
  • 密碼輸入passward <input type="password" name="password">
  • 單選radio <input type="radio" name="sex" value="male">
    一組給定選項關聯(lián)的單選鈕必須有相同的名字name衣式。但在不同的<form>表單中,name可以相同。value為提交表單的值
  • 復選框checkbox <input type="checkbox" name="hobby" value="music">
    相關的復選框也共用一個名字碴卧。
  • 數(shù)字輸入number <input type="number" name="age" min="0" max="200">
  • email輸入 tel輸入 url輸入
    <input type="email /tel /url" name="……">
  • 上傳文件file弱卡,注意accept屬性
    <input type="file" name="myfile" accept="image/png">
    表示只接受png格式的圖片。
  • 隱藏域hidden
    <input type="hidden" name="abcd" value="123456">
    其也可以提交給服務器住册,作用是:
  1. 隱藏域在頁面中對于用戶是不可見的婶博,在表單中插入隱藏域的目的在于收集或發(fā)送信息,以利于被處理表單的程序所使用荧飞。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時候凡人,隱藏域的信息也被一起發(fā)送到服務器。
  2. 有些時候我們要給用戶一信息叹阔,讓他在提交表單時提交上來以確定用戶身份挠轴,如sessionkey,等等.當然這些東西也能用cookie實現(xiàn)条获,但使用隱藏域就簡單的多了.而且不會有瀏覽器不支持忠荞,用戶禁用cookie的煩惱。
  3. 有些時候一個form里有多個提交按鈕帅掘,怎樣使程序能夠分清楚到底用戶是按那一個按鈕提交上來的呢委煤?我們就可以寫一個隱藏域,然后在每一個按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會知道用戶是按的那個按鈕提交上來的修档。
  4. 有時候一個網(wǎng)頁中有多個form碧绞,我們知道多個form是不能同時提交的,但有時這些form確實相互作用吱窝,我們就可以在form中添加隱藏域來使它們聯(lián)系起來讥邻。
  5. JavaScript不支持全局變量,但有時我們必須用全局變量院峡,我們就可以把值先存在隱藏域里兴使,它的值就不會丟失了。
  6. 還有個例子照激,比如按一個按鈕彈出四個小窗口发魄,當點擊其中的一個小窗口時其他三個自動關閉.可是IE不支持小窗口相互調用,所以只有在父窗口寫個隱藏域俩垃,當小窗口看到那個隱藏域的值是close時就自己關掉励幼。

3.按鈕

  • <input type="submit" value="Submit"> 具有提交功能
  • <input type="button" value="Button"> 只是一個按鈕,不能提交表單
  • <input type="reset" value="reset"> 清除表單數(shù)據(jù)
  • <button type="submit">省略號</button>
屬性值 功能
submit 該按鈕是提交按鈕(除了 Internet Explorer口柳,該值是其他瀏覽器的默認值)苹粟。
button 該按鈕是可點擊的按鈕(Internet Explorer 的默認值)。
reset 該按鈕是重置按鈕(清除表單數(shù)據(jù))跃闹。

4.文本區(qū)<textarea>

<textarea name="comments" rows="10" cols="48"></textarea>
<textarea>元素會創(chuàng)建一個多行的文本區(qū)嵌削,文本放不下時毛好,右邊還會出現(xiàn)一個滾動條。
rows和cols告訴瀏覽器文本區(qū)的高度和寬度為多少個字符掷贾。
開始和結束標記之間的文本是文本區(qū)的初始文本睛榄。
對于text<input>中輸入的文本,可以使用maxlength屬性想帅,如maxlength="100"场靴,會限制用戶最多輸入100字符,對于<textarea>則沒有此限制港准。

5.下拉菜單 select option

<select name="characters">
  <option value="……" selected>
  ……
</select>

可以在<option>中添加selected屬性表示該選項默認選中旨剥。

6.<label>

<label>元素不會向用戶呈現(xiàn)任何特殊效果,不過他為鼠標用戶改進了可用性浅缸,如果你在label元素內點擊文本轨帜,就會觸發(fā)此控件。

<label for="bags">Number of bags: </label>
<input type="number" id="bags" name="bags" min="1" max="10">

<label>元素標簽的for屬性應當與相關聯(lián)的元素的id屬性相同衩椒“龈福或者為以下形式:

<label>
    <input type="radio" name="sex" value="male"> 男
</label>

7.<fieldset>和<legend>

<fieldset>元素用來將公共元素組織在一起。

<fieldset>
    <legend>Condiments</legend>
    姓名:<input type="text" name="name">
 </fieldset>

8.一些屬性

  • placeholder
    <input type="text" name="name" placeholder="填寫姓名">
    為你提供一個提示毛萌,告訴你填什么內容苟弛。
    但在text<input>元素中的value屬性可以可以用來為文本輸入控件提供一個初始值,這個值能使placeholder內容不再顯示阁将。
  • required是一個布爾屬性膏秫,可用于任何表單控件,說明該項是必填項做盅。
  • checked為布爾屬性缤削,用于單選和多選,瀏覽器顯示表單時會默認選中這個元素吹榴。
  • selected用于下拉選框中的<option>元素中亭敢。
  • disabled指定輸入框不可用的狀態(tài)。
  • readonly指定輸入框處于只讀狀態(tài)
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末图筹,一起剝皮案震驚了整個濱河市帅刀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌婿斥,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件哨鸭,死亡現(xiàn)場離奇詭異民宿,居然都是意外死亡,警方通過查閱死者的電腦和手機像鸡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門活鹰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來哈恰,“玉大人,你說我怎么就攤上這事志群∽疟粒” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵锌云,是天一觀的道長荠医。 經常有香客問我,道長桑涎,這世上最難降的妖魔是什么彬向? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮攻冷,結果婚禮上娃胆,老公的妹妹穿的比我還像新娘。我一直安慰自己等曼,他們只是感情好里烦,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著禁谦,像睡著了一般胁黑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上枷畏,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天别厘,我揣著相機與錄音,去河邊找鬼拥诡。 笑死触趴,一個胖子當著我的面吹牛,可吹牛的內容都是我干的渴肉。 我是一名探鬼主播冗懦,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼仇祭!你這毒婦竟也來了披蕉?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤乌奇,失蹤者是張志新(化名)和其女友劉穎没讲,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體礁苗,經...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡爬凑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了试伙。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片荆责。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖挪圾,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情穿剖,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布卦溢,位于F島的核電站糊余,受9級特大地震影響,放射性物質發(fā)生泄漏既绕。R本人自食惡果不足惜啄刹,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望凄贩。 院中可真熱鬧誓军,春花似錦、人聲如沸疲扎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽椒丧。三九已至壹甥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間壶熏,已是汗流浹背句柠。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留棒假,地道東北人溯职。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像帽哑,于是被迫代替她去往敵國和親谜酒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內容

  • <input>標簽 標簽用于搜集用戶信息妻枕,根據(jù)不同的type屬性值僻族,輸入字段擁有很多種形式。輸入字段可以是文本字段...
    _空空閱讀 4,019評論 0 3
  • 1 表單是如何工作的屡谐? 用戶在網(wǎng)頁上填寫表單并提交所填信息述么,瀏覽器將用戶提交的數(shù)據(jù)發(fā)送至 Web 服務器, Web...
    饑人谷_Mily閱讀 1,183評論 0 1
  • 表單是什么? 從某種意義上來說愕掏,“表單”就相當于一份問卷度秘,這份問卷有一些空白的地方需要你來填寫答案。 例如 表單如...
    流光號船長閱讀 737評論 0 2
  • 一亭珍、表單 1. 表單的作用 HTML 表單用于接收不同類型的用戶輸入敷钾,用戶提交表單時向服務器傳輸數(shù)據(jù),從而實現(xiàn)用戶...
    zx9426閱讀 404評論 0 1
  • 2017末我突然出現(xiàn)在地球上肄梨,據(jù)我了解我的出現(xiàn)應該是我主人很久之前突發(fā)奇想要做的一件事阻荒,但是對于我是她此刻...
    等風的樹閱讀 461評論 0 0