詳解HTML表單

本篇內(nèi)容介紹了“詳解HTML表單”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一、表單標(biāo)簽及屬性

• <form>標(biāo)簽就是表單標(biāo)簽，該標(biāo)簽用于在網(wǎng)頁(yè)中創(chuàng)建表單區(qū)域，屬于一個(gè)容器標(biāo)簽；

• action：表單的屬性之一，用于指示服務(wù)器上處理表單輸出的程序；

• method：表單屬性之一，此屬性告訴瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)起，指定向服務(wù)器發(fā)送數(shù)據(jù)的方法，是用post或者get；

 <form action="#" method="post">
        <p>密碼：<input type="text" name="pwd"></p>
        <p>
            <input type="submit" value="提交"/>
            <input type="reset" value="重填"/>
        </p>
    </form>

1.png

二、GET 方法和POST 方法的區(qū)別

Get方法：

• GET 請(qǐng)求可被緩存；

• GET 請(qǐng)求保留在瀏覽器歷史記錄中；

• GET 請(qǐng)求可被收藏為書簽；

• GET 請(qǐng)求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用；

• GET 請(qǐng)求有長(zhǎng)度限制；

• GET 請(qǐng)求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)；

POST方法：

• POST 請(qǐng)求不會(huì)被緩存；

• POST 請(qǐng)求不會(huì)保留在瀏覽器歷史記錄中；

• POST 不能被收藏為書簽；

• POST 請(qǐng)求對(duì)數(shù)據(jù)長(zhǎng)度沒有要求；

三、表單元素

 <form action="#" method="post" style="margin:0 auto;width: 1000px;margin-top:100px;">
        <p>姓名：<input type="text" /></p>
        <p>郵箱：<input type="text" /></p>
        <p>地址：<input type="text" /></p>
        <p>性別：男<input type="radio" checked/>&nbsp;女<input type="radio"/></p>
        <p>愛好：籃球<input type="checkbox" />&nbsp;羽毛球<input type="checkbox" checked/>&nbsp;足球<input type="checkbox"/></p>
        <p>今天星期：            <select name="weekday" size="1">
               <option value="1">星期一</option>
               <option value="2">星期二</option>
               <option value="3" selected>星期三</option>
               <option value="4">星期四</option>
               <option value="5">星期五</option>
               <option value="6">星期六</option>
               <option value="7">星期七</option>
            </select>
        </p>
        <p>密碼：<input type="password" /></p>
        <p>確認(rèn)密碼：<input type="password" /></p>
         
        <p>
            <input type="submit" value="提交按鈕"/>
            <input type="reset" value="重填按鈕"/>
            <input type="button" value="普通按鈕"/>
        </p>
    </form>

以上代碼的演示結(jié)果圖為：

2.png

（1）<input>標(biāo)簽

• type屬性：指定表單元素的類型，可選項(xiàng)有text、password、checkbox、radio、submit、reset、file、hidden、image和button，默認(rèn)為text；

• name屬性：指定表單元素的名稱；

• value屬性：可選，指定表單元素的初始值；

• checked：指定按鈕是否被選中；

• size屬性：指定表單元素的初始寬度；

• maxlength屬性：指定可在text或password元素中輸入的最大字符數(shù)；

（2）三種按鈕

• reset按鈕：重置按鈕，將表單重置為最初狀態(tài)；

• submit按鈕：提交按鈕，用戶單擊按鈕后，表單將會(huì)提交到action屬性所指的URl，并傳遞表單數(shù)據(jù)；

• button按鈕：普通按鈕，需要與事件關(guān)聯(lián)使用；

四、表單的只讀與禁用設(shè)置

• readonly：只讀，網(wǎng)站服務(wù)器方不希望用戶修改的數(shù)據(jù)，這些數(shù)據(jù)在表單元素中顯示；

• disabled：禁用，只有滿足某個(gè)條件后，才能選用某項(xiàng)功能；

• 禁用的表單不會(huì)被提交。

“詳解HTML表單”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！