表單標(biāo)簽

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

<form>
    所有的表單內(nèi)容，都要寫在form標(biāo)簽里面
</form>

• 注意事項(xiàng):
  • 所有的表單內(nèi)容，都要寫在form標(biāo)簽里面
  • form標(biāo)簽中有兩個(gè)比較重要的屬性action和method, 但就現(xiàn)目前大家的知識(shí)儲(chǔ)備而言暫時(shí)無法理解, 所以放到后面的課程中講解

input標(biāo)簽

• 如果說td是表格最核心的標(biāo)簽, 那么input就是表單最核心的標(biāo)簽. nput標(biāo)簽有一個(gè)type屬性, 這個(gè)屬性有很多類型的取值, 取值的不同就決定了input標(biāo)簽的功能和外觀不同

• 明文輸入框

  • 作用: 用戶可以在輸入框內(nèi)輸入內(nèi)容
  • 賬號(hào):<input type="text"/>

• 暗文輸入框

  • 作用: 用戶可以在輸入框內(nèi)輸入內(nèi)容
  • 密碼:<input type="password"/>

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

  • 賬號(hào):<input type="text" value="123"/>
  • 密碼:<input type="password" value="123"/>

• 規(guī)定輸入字段中的字符的最大長(zhǎng)度

  • 賬號(hào): <input type="text" name="fullname" maxlength="8" />
    

• 單選框(radio)

  • 作用: 用戶只能從眾多選項(xiàng)中選擇其中一個(gè)
  • 單選按鈕，天生是不互斥的，如果想互斥，必須要有相同的name屬性

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女
<input type="radio" name="xingbie" /> 妖

• 多選框(checkbox)
  • 作用: 用戶只能從眾多選項(xiàng)中選擇多個(gè)
  • 復(fù)選框，最好也是有相同的name（雖然他不需要互斥，但是也要有相同的name）

<input type="checkbox" name="aihao"/> 籃球
<input type="checkbox" name="aihao"/> 足球
<input type="checkbox" name="aihao"/> 棒球

• 給單選、多選設(shè)置默認(rèn)值
  • 指定radio和checkbox默認(rèn)值, 前提是同一組內(nèi)容必須設(shè)置相同name屬性

    <input type="radio" name="xingbie" checked="checked"/> 男
    <input type="radio" name="xingbie" /> 女
    <input type="radio" name="xingbie" /> 妖

<input type="checkbox" name="aihao" checked="checked"/> 籃球
<input type="checkbox" name="aihao" checked="checked"/> 足球
<input type="checkbox" name="aihao"/> 棒球

• label標(biāo)簽
  • 作用: label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標(biāo)用戶改進(jìn)了可用性
  • 注意事項(xiàng):
    • 表單元素要有一個(gè)id，然后label標(biāo)簽就有一個(gè)for屬性，for屬性和id相同就表示綁定了
    • 所有表單元素都可以通過label綁定

<!--給文本框添加綁定-->
<label for="account">賬號(hào):</label>
<input type="text" id="account" />

<!--給單選框添加綁定-->
<input type="radio" name="sex" id="man" /> <label for="man">男</label>

<!--給多選框添加綁定-->
<input type="checkbox" id="basketball" />
<label for="basketball">籃球</label> 

• 按鈕

  • 作用: 定義可點(diǎn)擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動(dòng)腳本）
  • <input type="button" value="點(diǎn)我丫" />

• 圖片按鈕

  • 作用:定義圖像形式的提交按鈕
  • <input type="image" src="lnj.jpg" />

• 重置按鈕

  • 作用: 定義重置按鈕。重置按鈕會(huì)清除表單中的所有數(shù)據(jù)
  • <input type="reset" />
  • 注意事項(xiàng):
    • 這個(gè)按鈕不需要寫value自動(dòng)就有“重置”文字
    • reset只對(duì)form表單中表單項(xiàng)有效果

• 提交按鈕

  • 作用:定義提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到action屬性指定的頁面
  • <input type="submit" />
  • 注意事項(xiàng):
    • 這個(gè)按鈕不需要寫value自動(dòng)就有“提交”文字
    • 要想通過submit提交數(shù)據(jù)到服務(wù)器, 被提交的表單項(xiàng)都必須設(shè)置name屬性

    • 默認(rèn)明文傳輸(GET)不安全, 可以將method屬性設(shè)置為POST改為非明文傳輸(學(xué)到Ajax再理解)

      
      

• 隱藏域

  • 作用: 定義隱藏的輸入字段
  • <input type="hidden">
  • 暫時(shí)不用掌握, 在Ajax中對(duì)數(shù)據(jù)的CRUD操作有非常大的作用

• 取色器

  • <input type="color">

  • HTML5中input類型增加了很多type類型, 例如color、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解

    
    

• 日期選擇器

  • <input type="date">

  • HTML5中input類型增加了很多type類型, 例如color、date但是都不兼容, 后面講到瀏覽器兼容時(shí)會(huì)重點(diǎn)講解

    
    

數(shù)據(jù)列表

• 作用: 給輸入框綁定待選項(xiàng)

• 格式:

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

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

請(qǐng)輸入你的車型: <input type="text" list="cars">

<datalist id="cars">
    <option>奔馳</option>
    <option>寶馬</option>
    <option>奧迪</option>
    <option>路虎</option>
    <option>賓利</option>
</datalist>

多行文本框(文本域)

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

<textarea cols="30" rows="10">默認(rèn)</textarea>

• 注意點(diǎn):
  • 可以通過cols和rows來指定輸入框的寬度和高度
  • 默認(rèn)情況下輸入框是可以手動(dòng)拉伸的

        <!--禁止手動(dòng)拉伸-->
    <style type="text/css">
        textarea{
            resize: none;
        }
    </style>

下拉列表

• 作用: select標(biāo)簽和ul、ol、dl一樣，都是組標(biāo)簽. 用于創(chuàng)建表單中的待選列表, 可以從選擇某一個(gè)帶選項(xiàng)
• 格式:

選擇籍貫:
<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山東</option>
    <option>山西</option>
    <option>湖北</option>
    <option>貴州</option>
</select>

• 給下拉列表設(shè)置默認(rèn)值
  • 和radio、checkbox一樣select也可以設(shè)置默認(rèn)值, 通過selected屬性設(shè)置

<select>
    <option>北京</option>
    <option>河北</option>
    <option>河南</option>
    <option>山東</option>
    <option>山西</option>
    <option>湖北</option>
    <option selected="selected">貴州</option>
</select>

• 給下拉列表添加分組

<select>
    <optgroup label="北京市">
        <option>海淀區(qū)</option>
        <option>昌平區(qū)</option>
        <option>朝陽區(qū)</option>
    </optgroup>
        <optgroup label="廣州市">
        <option>天河區(qū)</option>
        <option>白云區(qū)</option>
    </optgroup>
    <option selected="selected">貴州</option>
</select>

學(xué)習(xí)交流方式:
1.微信公眾賬號(hào)搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038