表單標(biāo)簽

• 作用:用于收集用戶信息, 讓用戶填寫奉瘤、選擇相關(guān)信息
• 格式:

<form>
    <表單元素>
</form>

• 什么是表單元素?
  • 表單元素其實(shí)還是HTML中的一些標(biāo)簽, 只不過這些標(biāo)簽比較特殊,
    在瀏覽器中所有的表單標(biāo)簽都有特殊的外觀和默認(rèn)的功能
• 注意點(diǎn):所有的表單內(nèi)容院峡，都要寫在form標(biāo)簽里面

input標(biāo)簽

• input就是表單最核心的標(biāo)簽. input標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同
• 明文輸入框

<!--明文輸入框-->
 賬號(hào):<input type="text"><br>

• 暗文輸入框

<!--暗文輸入框-->
密碼:<input type="password"><br>

• 給輸入框設(shè)置默認(rèn)值

<!--給輸入框設(shè)置默認(rèn)值-->
 賬號(hào):<input type="text" value="123456"><br>
 密碼:<input type="password" value="123123"><br>

• 單選框(radio)
  • 注意點(diǎn)
    • 默認(rèn)情況下單選框不會(huì)互斥, 要想單選框互斥那么必須給每一個(gè)單選框標(biāo)簽都設(shè)置一個(gè)name屬性, 然后name屬性還必須設(shè)置相同的值
    • 要想讓單選框默認(rèn)選中某一個(gè)框子, 那么可以給input標(biāo)簽添加一個(gè)checked屬性
    • 在HTML中如果屬性的取值和屬性的名稱一樣, 可以只寫一個(gè). 但是在XHTML中必須寫上取值, 所以在企業(yè)開發(fā)中我們推薦大家不要省略取值

<!--單選框-->
 男<input type="radio" name="gender" checked="checked">
 女<input type="radio" name="gender"><br>

• 多選框(checkbox)
  • 復(fù)選框浪蹂，最好也是有相同的name（雖然他不需要互斥均唉，但是也要有相同的name）
  • 給多選框設(shè)置默認(rèn)選中值也需要設(shè)置checked="checked"屬性

<!--多選框-->
 愛好:
 <input type="checkbox" checked="checked">籃球
 <input type="checkbox" checked="checked" >足球
 <input type="checkbox" >羽毛球

• 按鈕
  • 作用: 定義可點(diǎn)擊按鈕

<!--
    定義一個(gè)普通按鈕
    作用:配合JS完成一些操作
 -->
    <input type="button" value="我是一個(gè)按鈕" onclick="alert('wjh')"><br>

• 圖片按鈕
  • 作用:定義圖像形式的提交按鈕

<!--
    定義一個(gè)圖片按鈕
    作用:配合JS完成一些操作
 -->
    <input type="image" src="image/QRCode.jpg" width="100px" onclick="alert('lnj')">

• 重置按鈕

  • 作用: 定義重置按鈕翻默。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)

  • 注意點(diǎn):

    • 重置按鈕有默認(rèn)的按鈕標(biāo)題, 默認(rèn)叫做重置也可以通過value屬性來修改默認(rèn)標(biāo)題
    • reset只對form表單中表單項(xiàng)有效果

<!--
   定義重置按鈕
   作用:清空表單中的數(shù)據(jù)
 -->
   <input type="reset" value="清空">

• 提交按鈕
  • 作用:定義提交按鈕,提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到action屬性指定的頁面
  • 注意點(diǎn):
    • 通過form標(biāo)簽的action屬性來告訴表單,需要提交到那個(gè)服務(wù)器
    • 表單中的哪些數(shù)據(jù)需要提交,需要給該標(biāo)簽定義name屬性,告訴表單哪些數(shù)據(jù)需要提交

賬號(hào):<input type="text" name="name"><br>
密碼:<input type="password" name="pwd"><br>
     <input type="submit">

• 隱藏域
  • 作用: 用于悄悄的收集用戶的一些數(shù)據(jù), 隱藏域是不會(huì)出現(xiàn)在界面中的

<input type="hidden">

• 補(bǔ)充input類型

<form action="">
    <!--
    可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否符合郵箱的格式
    -->
    郵箱:<input type="email">
    <!--
    可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否是URL地址
    -->
    域名:<input type="url"><br>
    <!--
    輸入框中只能輸入數(shù)字
    -->
    電話:<input type="number"><br>
    <!--
    可以通過日歷來選擇時(shí)間
    -->
    時(shí)間:<input type="date"><br>

    <!--
    可以通過取色板來選擇顏色
    -->
    顏色: <input type="color"><br>

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

• 補(bǔ)充input標(biāo)簽屬性

<form action="">
    <!--
    placeholder屬性
    作用: 用于指定input標(biāo)簽占位符號(hào)
    特點(diǎn): 用戶輸入之后占位符號(hào)會(huì)自動(dòng)消失
    -->
    <input type="text" placeholder="請輸入賬號(hào)" autofocus="autofocus">

    <!--
    autofocus屬性
    作用: 是讓輸入框自動(dòng)獲取焦點(diǎn)
    特點(diǎn): 不能讓多個(gè)輸入框獲取焦點(diǎn)
    -->
    <input type="file" multiple="multiple">

    <!--
    accesskey屬性
    作用: 可以通過配置快捷鍵來獲取焦點(diǎn)
    特點(diǎn): 快捷鍵就是Alt + 指定的符號(hào)
    -->
    <input type="text" accesskey="o">

    <!--
    required屬性
    強(qiáng)制用戶輸入一些內(nèi)容后,才能提交表單
    -->
    <input type="text" required="required">
    <input type="submit">

    <!--
    autocomplete屬性
    記錄用戶提交過的數(shù)據(jù),input輸入框必須有name屬性才能記錄,并且只有提交之后才能記錄

    -->
    <input type="text" name="in" autocomplete="in">
    <input type="submit">
</form>

lable標(biāo)簽

• 默認(rèn)情況下文字和輸入框是沒有關(guān)聯(lián)關(guān)系的, 也就是說點(diǎn)擊文字輸入框不
  會(huì)聚焦, 如果想點(diǎn)擊文字時(shí)讓對應(yīng)的輸入框聚焦, 那么就需要讓文字和輸
  入框進(jìn)行綁定,要想讓輸入框和文字綁定在一起, 那么我們可以使用label
  標(biāo)簽
• 綁定格式:
  • 1.將文字利用label標(biāo)簽包裹起來
  • 2.給輸入框添加一個(gè)id屬性
  • 3.在label標(biāo)簽中通過for屬性和輸入框中的id進(jìn)行綁定即可,即<label>標(biāo)
    簽的for屬性的值和<input>標(biāo)簽的id屬性值相同

<form action="">
    <!--官方推薦的綁定方式-->
    <label for="zh">賬號(hào):</label><input type="text" id="zh">
    <label for="pwd">密碼:</label><input type="password" id="pwd">
    <!--
    另一種綁定方式,有局限性
    直接使用label標(biāo)簽將輸入框和文字包裹起來
    -->
    <label>
        賬號(hào):<input type="text" id="zh">
    </label>
</form>

datalist標(biāo)簽

• 作用: 給輸入框綁定待選項(xiàng)
• datalist標(biāo)簽格式:

<datalist>
    <option>待選項(xiàng)內(nèi)容</option>
</datalist>

• 如何給輸入框綁定待選列表
  • 1.定義一個(gè)輸入框input
  • 2.定義一個(gè)datalist列表
  • 3.給datalist列表標(biāo)簽添加一個(gè)id屬性
  • 4.給輸入框添加一個(gè)list屬性,將datalist的id對應(yīng)的值賦值給list屬性即可

請輸入您的車型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔馳</option>
    <option>寶馬</option>
    <option>奧迪</option>
</datalist>

select標(biāo)簽(下拉列表)

• 作用: 用于定義下拉列表
• 格式:

<select>
    <optgroup label="分組名稱">
        <option>列表數(shù)據(jù)</option>
        <option>列表數(shù)據(jù)</option>
    </optgroup>
</select>

• 注意點(diǎn):
  • 1.下拉列表不能輸入內(nèi)容, 但是可以直接在列表中選擇內(nèi)容
  • 2.可以通過給option標(biāo)簽添加一個(gè)selected屬性來指定列表的默認(rèn)值
  • 3.可以通過給option標(biāo)簽包裹一層optgroup標(biāo)簽來給下拉列表中的數(shù)據(jù)分類

<!--select標(biāo)簽-->
<select name="" id="">
    <optgroup label="中國城市">
        <option value="">北京</option>
        <option value="" selected="selected">上海</option>
        <option value="">武漢</option>
    </optgroup>
    <optgroup label="中國地區(qū)">
        <option value="">北京</option>
        <option value="" selected="selected">上海</option>
        <option value="">武漢</option>
    </optgroup>
</select>

textarea標(biāo)簽(多行文本框(文本域))

• 作用: textarea標(biāo)簽用于在表單中定義多行的文本輸入控件
  • cols屬性表示columns“列”, 規(guī)定文本區(qū)內(nèi)的可見寬度
  • rows屬性表示rows“行”, 規(guī)定文本區(qū)內(nèi)的可見行數(shù)

<!--textarea標(biāo)簽-->
<textarea cols="2" rows="3">