HTML表單快速上手(簡(jiǎn)單用法)

表單用于接收用戶輸入的數(shù)據(jù),然后將數(shù)據(jù)提交給服務(wù)器做相應(yīng)的處理,使得HTML頁(yè)面具有了交互性。

form標(biāo)簽中的各個(gè)標(biāo)簽都是一個(gè)完整的控件,用于接收各種類(lèi)型的數(shù)據(jù),并上傳到服務(wù)器;都有name和value屬性,name表示該控件的名稱(chēng),value表示該控件接收到的數(shù)據(jù),提交時(shí)兩者一起提交到服務(wù)器,這樣服務(wù)器就知道哪個(gè)數(shù)據(jù)屬于哪個(gè)控件,對(duì)其采取相對(duì)于的處理。

常見(jiàn)用法:

//action表示提交給哪個(gè)后臺(tái)處理頁(yè)面;method表示提交采用的方法:get方法用于獲取數(shù)據(jù),提交的數(shù)據(jù)不保密顯示在地址欄;
//post方法用于上傳數(shù)據(jù),提交的數(shù)據(jù)保密。target表示提交后的新頁(yè)面在哪里打開(kāi)
<form action="/abc.html" method="get" target="_blank">
    //接收小段字符,不可以換行;label標(biāo)簽for屬性值為對(duì)應(yīng)的標(biāo)簽id屬性值,當(dāng)點(diǎn)擊label標(biāo)簽時(shí),效果同點(diǎn)擊其對(duì)應(yīng)的input標(biāo)簽
    <label for="username">姓名:</label><input type="text" name="username" id="username" placeholder="張三">
    //接收小段字符,默認(rèn)顯示為圓點(diǎn),不可以換行;label標(biāo)簽for屬性值為對(duì)應(yīng)的標(biāo)簽id屬性值,當(dāng)點(diǎn)擊label標(biāo)簽時(shí),效果同點(diǎn)擊其對(duì)應(yīng)的input標(biāo)簽
    <label for="userpassword">密碼:</label><input type="password" name="userpassword" id="userpassword" placeholder="密碼">
    <br>
    //單選,注意name要一致;checked表示默認(rèn)選擇
    男:<input type="radio" name="sex" value="male" checked> //單選,注意name要一致
    <br>
    女:<input type="radio" name="sex" value="female"> //單選,注意name要一致
    <br>
    <label>愛(ài)好:</label> //多選,注意name要一致;checked表示默認(rèn)選擇
    讀書(shū)<input type="checkbox" name="hobby" value="讀書(shū)" checked>
    聽(tīng)歌<input type="checkbox" name="hobby" value="聽(tīng)歌">
    看電影<input type="checkbox" name="hobby" value="看電影">
    <br>
    <label>居住地:</label>
    <select name="city" id="city"> //下拉菜單,單選;設(shè)置selected屬性的為默認(rèn)選項(xiàng),否則為第一項(xiàng)beijing
        <option value="beijing">北京</option>
        <option value="shenzhen">深圳</option>
        <option value="shanghai" selected>上海</option>
    </select>
    <br>
    <label>上傳文件</label>
    <input type="file" name="userfile" accept="image/gif"> //上傳文件,accept表示接收的文件類(lèi)型,其他類(lèi)型不接收
    <br>
    <input type="hidden" name="protect" value="random-value">
    //該控件是隱藏的,頁(yè)面渲染時(shí),value值由服務(wù)器隨機(jī)提供;提交時(shí),value會(huì)一并提交給服務(wù)器,服務(wù)器可以檢驗(yàn)value是否遭到篡改,提升了安全性。
    <br>
    <label>個(gè)人描述:</label>
    <textarea name="describe" id="" cols="30" rows="10"></textarea> //接收大段字符,可以換行
    <br>
    <input type="button" name="button">點(diǎn)擊我默認(rèn)沒(méi)有任何動(dòng)作 //默認(rèn)沒(méi)有任何后續(xù)功能
    <br>
    <button>提交</button>
    //button標(biāo)簽放在form標(biāo)簽中時(shí),具有提交功能
    <br>
    <input type="submit"> //form標(biāo)簽常規(guī)的提交
    <br>
    <input type="reset"> //重置數(shù)據(jù)
</form>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,951評(píng)論 19 139
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類(lèi)型定義(D...
    米塔塔閱讀 3,321評(píng)論 1 41
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,377評(píng)論 25 708
  • 每個(gè)人都在學(xué)網(wǎng)絡(luò)上鋪天蓋地的自救措施。可是除了自救,你想過(guò)救人嗎? 文|VOClaire 從伴娘事件到和頤酒店案,...
    01171d441a4a閱讀 116評(píng)論 0 0
  • WYX雨菱欣翼閱讀 158評(píng)論 0 0