認(rèn)識表單標(biāo)簽 form

表單是我們網(wǎng)頁中常見的場景，比如登錄、注冊，填寫個人信息，填寫收貨地址等。在 HTML 當(dāng)中創(chuàng)建表單和表格一樣，也是需要一組標(biāo)簽，而且表單的屬性和表單的元素都比較多，我們可以根據(jù)實際需求來定制我們的表單內(nèi)容。表單里可以嵌套各個類型的輸入框，比如普通輸入框、密碼框等，也可以嵌套單選框、多選框以及下拉菜單。

1. form 表單的使用

form 標(biāo)簽和 ul select 標(biāo)簽類似，代表表單整體，而里面嵌套的元素則是表單具體的內(nèi)容。我們來做一個用戶名和密碼的表單，這需要用到之前我們講的 label 標(biāo)簽和 input 標(biāo)簽的知識，代碼如下：

<form>
    <label for="username">用戶名</label>
    <input type="text" id='username'>
    <br>
    <label for="password">密碼</label>
    <input type="password" id="password">
</form>

效果如下：

表單呈現(xiàn)的形式和普通輸入框無異，但它的作用就是我們要做提交表單的操作（既我們需要把用戶輸入的信息傳給后臺），那么普通的輸入框就做不到這個功能了。那么提交表單的時候，我們可以給 form 標(biāo)簽加上一個 method 屬性，這個屬性表示當(dāng)前提交表單的方式，一般為 get 或者 post，這個需要后臺先行告知。form 標(biāo)簽還有一個 action 屬性，表示表單提交的地址，這個也需要后臺先行告知。

2. 經(jīng)驗分享

1. 我們在編寫表單時，需要先行和后臺人員溝通，以獲取到表單的提交方式和提交地址；
2. 表單里面可以嵌套多個元素，這個需要根據(jù)實際需求來決定；
3. 所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在 form 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上）。

3. 真實案例分享

京東

<form method="post">
    <div>
        <label for="loginname"></label>
        <input id="loginname" type="text" placeholder="郵箱/用戶名/登錄手機">
    </div>
    <div id="entry" class="item item-fore2">
        <label class="login-label pwd-label" for="nloginpwd"></label>
        <input type="password" id="nloginpwd" placeholder="密碼">
        <span><b>大小寫鎖定已打開</b></span>
    </div>
    <div>
      <div>
        <span>
          <a href="//passport.jd.com/uc/links?tag=safe">忘記密碼</a>
          </span>
        </div>
    </div>
    <div>
      <div>
        <a href="javascript:;">登    錄</a>
      </div>
    </div>
</form>

簡書官網(wǎng)

<form id="new_session" action="/sessions" method="post">
      <div>
        <input placeholder="手機號或郵箱" type="text">
      </div>
    <div>
      <input placeholder="密碼" type="password">
    </div>
    <div>
      <input type="checkbox"><span>記住我</span>
    </div>
    <div>
      <a href="">登錄遇到問題?</a>
      <ul>
        <li><a href="/users/password/mobile_reset">用手機號重置密碼</a></li>
        <li><a href="/users/password/email_reset">用郵箱重置密碼</a></li>
        <li><a target="_blank" href="/p/9058d0b8711d">無法用海外手機號登錄</a></li>
        <li><a target="_blank" href="/p/498a9fa7da08">無法用 Google 帳號登錄</a></li>
      </ul>
    </div>
    <button>
      <span></span>
      登錄
   </button>
</form>

4.小結(jié)

1. form 標(biāo)簽代表表單整體，在頁面上并無特殊樣式顯示。
2. form 標(biāo)簽里面嵌套的內(nèi)容是表單的內(nèi)容，可以是輸入框、單選框、多選框、下拉菜單、文本域等。
3. form 標(biāo)簽需要設(shè)置 method屬性，為提交表單的方式。
4. form 標(biāo)簽需要設(shè)置 action屬性，為提交表單的地址。