入門任務5:關于HTML表單的簡單認識

form表單的作用和常用的input標簽及其作用

  • fomr標簽的主要屬性:
    • action: 規(guī)定表單提交的地址
    • method: 規(guī)定表單提交時所使用的HTTP的方法
    • target: 規(guī)定在何處打開action
    • enctype:與發(fā)送時是否對字符編碼有關
  • form表單的作用:form表單用于搜集不同類型的用戶輸入;表單元素指的是不同類型的input元素、復選框宝穗、單選按鈕、提交按鈕等等绅作。form元素的用法如下:
    <form>
    form elements
    <form>
    只有當用戶輸入被包裹在<form>標簽里才會被提交到服務端。
  • 常見input標簽及其作用
    • <input>:這是最重要的表單元素,用于接收用戶的輸入较雕,且有一下常見的類型
      • text:一般的單行文本輸入
      • password:密文輸入搪缨,輸入的內(nèi)容不會可見食拜,而是以黑點的形式呈現(xiàn)
      • radio:定義單選鈕
      • checkbox:定義復選框
      • submit:定義表單數(shù)據(jù)提交的按鈕
      • button:定義一般的按鈕
      • reset:用來重置用戶的輸入
    • <select>:定義下拉元素
    • <option>:定義待選項,與<select>元素一起出現(xiàn)
    • <textarea>:定義多行文本輸入
    • <button>:定義可點擊的按鈕

post和get方式的區(qū)別

<form>標簽的method屬性規(guī)定在提交表單時所用的HTTP方法(get或者post)副编,默認為GET负甸。

  • GET: 如"get"單詞的含義“得到”,故使用GET方法的目的是要從服務端得到某些信息痹届,當然呻待,“得到”之前必須先去和服務端通信,去告知服務端想得到關于什么的信息队腐,所以當表單是被動提交(比如搜索引擎查詢)時带污,就可以使用GET方法;但是當使用GET方法時提交的表單數(shù)據(jù)在地址欄中是可見的香到,當有敏感信息需要發(fā)送時應該使用POST方法鱼冀。另外由于瀏覽器設定容量的限制,GET方法只適合提交少量的數(shù)據(jù)悠就。
  • POST:如"post"單詞的含義“發(fā)送”千绪,可知POST方法的目的是要去向服務端發(fā)送信息,所以當更新表單數(shù)據(jù)時就可以使用POST方法梗脾。與GET方法不同荸型,POST方法提交的數(shù)據(jù)在地址欄中是不可見的,而且POST方法也適合提交相對大量的數(shù)據(jù)炸茧。

input里name有什么用

name屬性瑞妇,如果想要數(shù)據(jù)正確的被提交稿静,每個輸入字段必須都要設置一個name屬性,因為數(shù)據(jù)提交給服務端最終是以"key:value"的鍵值對的形式傳遞的辕狰,這里面"key"的只就是input里name屬性的值改备,如果缺少name屬性的話,那就組成不了鍵值對蔓倍,數(shù)據(jù)就不會被傳遞給服務端悬钳,比如下例中,被提交的只有"lastname:Mouse"的鍵值對偶翅,而"Mickey"的值因為沒有"name"屬性所以不會被傳遞
<form action="action_page.php">
First name:

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


Last name:

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



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

radio的分組

同一個分類的多個選項應該將name屬性的值設置成相同默勾,否則就是兩個不同的選項,比如下例中name="gender"name="sexual-orientation"所代表的就是兩個互不相干的單選鈕聚谁。
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="sexual-orientation" value="male">男
<input type="radio" name="sexual-orientation" value="female">女

placeholder屬性的用處

placeholder屬性用以描述輸入字段預期值的提示母剥,所以當我們需要在輸入框上給用戶某些提示信息時或期望用戶輸入何種類型的數(shù)據(jù)時就可以用placeholder屬性,這個屬性的值只是個占位符文本形导,不會影響最終提交的value值媳搪。

"type=hidden"隱藏域的作用

隱藏域也是表單元素之一,語法同其他表單元素一樣:
<input type="hidden" name="name" value="value">
只是這個隱藏域?qū)τ脩羰遣豢梢姷闹栊脩舾兄坏剿拇嬖冢窃谟脩籼峤槐韱螖?shù)據(jù)時序愚,其中包含的隱藏域里的數(shù)據(jù)也會被提交憔披,所以隱藏域一般有以下作用:

  • 可以通過在表單中插入隱藏域的方式來對提交表單數(shù)據(jù)的用戶的身份進行鑒權(quán),對于鑒權(quán)通過的數(shù)據(jù)請求則不去處理爸吮,可以防止不法分子惡意攻擊芬膝。
  • 當一個form里有多個提交按鈕時可以通過插入隱藏域來確定被提交上來的數(shù)據(jù)分別是由哪個按鈕提交的。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末形娇,一起剝皮案震驚了整個濱河市锰霜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌桐早,老刑警劉巖癣缅,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異哄酝,居然都是意外死亡友存,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門陶衅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來屡立,“玉大人,你說我怎么就攤上這事搀军∨蚶” “怎么了勇皇?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長焚刺。 經(jīng)常有香客問我敛摘,道長,這世上最難降的妖魔是什么檩坚? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任着撩,我火速辦了婚禮,結(jié)果婚禮上匾委,老公的妹妹穿的比我還像新娘拖叙。我一直安慰自己,他們只是感情好赂乐,可當我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布薯鳍。 她就那樣靜靜地躺著,像睡著了一般挨措。 火紅的嫁衣襯著肌膚如雪挖滤。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天浅役,我揣著相機與錄音斩松,去河邊找鬼。 笑死觉既,一個胖子當著我的面吹牛惧盹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播瞪讼,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼钧椰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了符欠?” 一聲冷哼從身側(cè)響起嫡霞,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎希柿,沒想到半個月后诊沪,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡曾撤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年娄徊,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盾戴。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡寄锐,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情橄仆,我是刑警寧澤剩膘,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站盆顾,受9級特大地震影響怠褐,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜您宪,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一奈懒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧宪巨,春花似錦磷杏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至怠晴,卻和暖如春遥金,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蒜田。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工稿械, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人冲粤。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓美莫,卻偏偏與公主長得像,于是被迫代替她去往敵國和親色解。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,955評論 2 355

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

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理餐茵,服務發(fā)現(xiàn)科阎,斷路器,智...
    卡卡羅2017閱讀 134,657評論 18 139
  • 1.form表單有什么作用忿族?有哪些常用的input 標簽锣笨,分別有什么作用? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 881評論 0 1
  • 1.動手 form 表單table 表格 2. <form>表單元素 1) 簡述: 元素是塊級元素,其開始標簽和結(jié)...
    _Dot912閱讀 2,022評論 2 8
  • <input>標簽 標簽用于搜集用戶信息道批,根據(jù)不同的type屬性值错英,輸入字段擁有很多種形式。輸入字段可以是文本字段...
    _空空閱讀 4,024評論 0 3
  • 終于等來公交車上車隆豹,外面風大椭岩,手漏在外面還真的是冷,所以上了公交車再寫作業(yè)吧。今天被公司姐姐又問到判哥,開車了嗎献雅?我搖...
    心靈深處ye閱讀 127評論 0 0