HTML基礎——表單標簽

什么是表單

  • 專門用來搜集用戶信息的

什么是表單元素

  • 什么是元素
    • 標簽/標記/元素均為HTML中的標簽
  • 格式
<form>
    <表單元素>
</form>

常見的表單標簽

  • input標簽
    • type屬性:取值不同蟹演,決定了表單的不同外觀
      • 明文輸入框
賬號:<input type="text">
- 暗文輸入框
密碼:<input type="password">
- 單選框radio
  - 默認情況不會互斥既琴,設置name屬性且設置相同值
  - 默認選中:checked
 <input type="radio" name="gender" checked="checked">女
- 按鈕
  - 作用:配合JS完成操作
  - 格式:
<input type="button" value="我是按鈕">
  - 圖片按鈕:
<input type="image" src="QRCode.jpg" width="10">
  - 重置按鈕
    - 清空表單中填好的數(shù)據(jù)
<input type="reset" value="清空">
  - 提交按鈕
    - 將表單中填寫好的數(shù)據(jù)提交到遠程服務器
    - 給form表單添加action屬性指定需要添加到的服務器
<form action="http://www.520it.com">
<input type="submit">
    - 隱藏域
       - 配合提交按鈕將一些數(shù)據(jù)悄悄提交到服務器
- value:設置默認值
    賬號:<input type="text" value="123">
    <br>
    密碼:<input type="password" value="123">
  • label標簽
    • 默認情況下文字和輸入框是沒有關聯(lián)的也拜,若想點擊文字時讓對應的輸入框聚焦,就需要讓文字和輸入框進行綁定
    • 使用label標簽可以實現(xiàn)霎肯,格式如下
    <label for="accout">賬號</label>:<input type="text" id="accout">
    <br>
    <label for="pwd">密碼</label>:<input type="password" id="pwd">
- 將文字用label標簽包裹起來
- 添加id屬性
- 通過label標簽中的for屬性和輸入框中的id屬性進行綁定
  • dalist標簽
    • 眾多瀏覽器不支持擎颖,僅了解即可
    • 作用:給輸入框綁定待選項
    • 格式:
<datalist>
    <option value="">待選項內(nèi)容</option>
</datalist>
  • 如何給輸入框綁定待選項
    • 搞一個輸入框
    • 搞一個datalist列表
    • 給datalist添加id
    • 給輸入框添加id屬性,且id的值即為對應的datalist的id
  • select標簽
    • 作用:定義下拉列表
    • 格式:
<select name="" id="">
    <option value="">列表數(shù)據(jù)</option>
</select>
  • 通過select屬性添加默認值
<option selected="selected">浙江</option>
  • 可以通過給option標簽包裹一層optgroup標簽來給下拉列表中的數(shù)據(jù)分組
<select>
    <optgroup label="北京">
    <option>朝陽區(qū)</option>
    <option>昌平區(qū)</option>
    <option>通州區(qū)</option>
    </optgroup>
    <optgroup label="廣州">
    <option>天河區(qū)</option>
    <option>越秀區(qū)</option>
    <option>黃浦區(qū)</option>
    </optgroup>
</select>
  • textarea標簽
    • 作用:定義一個多行輸入框
    • 格式:
<textarea name="" id="" cols="30" rows="10">
    內(nèi)容
</textarea>
  • 注意點:
    • 默認情況下可無限換行
    • 有默認的寬度和高度
    • col和row指定列數(shù)行數(shù)
  • fieldset標簽
    • 作用:給表單添加一個邊框
    • legend可以給邊框指定標題
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末观游,一起剝皮案震驚了整個濱河市搂捧,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌懂缕,老刑警劉巖允跑,帶你破解...
    沈念sama閱讀 212,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異搪柑,居然都是意外死亡聋丝,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3 385
  • 文/潘曉璐 我一進店門工碾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來弱睦,“玉大人,你說我怎么就攤上這事渊额】瞿荆” “怎么了?”我有些...
    開封第一講書人閱讀 158,369評論 0 348
  • 文/不壞的土叔 我叫張陵端圈,是天一觀的道長焦读。 經(jīng)常有香客問我,道長舱权,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,799評論 1 285
  • 正文 為了忘掉前任仑嗅,我火速辦了婚禮宴倍,結果婚禮上张症,老公的妹妹穿的比我還像新娘。我一直安慰自己鸵贬,他們只是感情好俗他,可當我...
    茶點故事閱讀 65,910評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著阔逼,像睡著了一般兆衅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嗜浮,一...
    開封第一講書人閱讀 50,096評論 1 291
  • 那天羡亩,我揣著相機與錄音,去河邊找鬼危融。 笑死畏铆,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的吉殃。 我是一名探鬼主播辞居,決...
    沈念sama閱讀 39,159評論 3 411
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蛋勺!你這毒婦竟也來了瓦灶?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,917評論 0 268
  • 序言:老撾萬榮一對情侶失蹤抱完,失蹤者是張志新(化名)和其女友劉穎贼陶,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體乾蛤,經(jīng)...
    沈念sama閱讀 44,360評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡每界,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了家卖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片眨层。...
    茶點故事閱讀 38,814評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖上荡,靈堂內(nèi)的尸體忽然破棺而出趴樱,到底是詐尸還是另有隱情,我是刑警寧澤酪捡,帶...
    沈念sama閱讀 34,509評論 4 334
  • 正文 年R本政府宣布叁征,位于F島的核電站,受9級特大地震影響逛薇,放射性物質(zhì)發(fā)生泄漏捺疼。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3 317
  • 文/蒙蒙 一永罚、第九天 我趴在偏房一處隱蔽的房頂上張望啤呼。 院中可真熱鬧卧秘,春花似錦、人聲如沸官扣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽惕蹄。三九已至蚯涮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卖陵,已是汗流浹背遭顶。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留赶促,地道東北人液肌。 一個月前我還...
    沈念sama閱讀 46,641評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像鸥滨,于是被迫代替她去往敵國和親嗦哆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2 351

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