小白前端入門筆記（18），form表單的簡單用法

大家好，歡迎來到freecodecamp HTML專題第18篇。

今天的挑戰(zhàn)關(guān)于創(chuàng)建一個表單元素。

背景知識

在前端網(wǎng)頁設(shè)計當(dāng)中，表單是非常重要的一個部分。

幾乎所有用戶數(shù)據(jù)的提交和上傳都是通過表單來進(jìn)行的，比如用戶注冊的時候，我們填寫的賬號、密碼、郵箱等信息，最后點(diǎn)擊提交的時候提交的內(nèi)容其實(shí)就是一個表單。

表單在網(wǎng)頁當(dāng)中對應(yīng)的標(biāo)簽是form，form本身并不包含信息，那些我們想要讓用戶輸入以及提交上傳的信息都是通過在form當(dāng)中嵌套其他input元素實(shí)現(xiàn)的。

但是只有form是不夠的，我們不僅需要讓用戶上傳提交信息，并且也需要寫明我們的信息提交的目的地。對于網(wǎng)頁來說，這個目的地一般都是一個網(wǎng)址或者是后端接口，對于這個地址我們通過action屬性來接收。

我們來看一個例子：

<form action="/url-where-you-want-to-submit-form-data">
  <input>
</form>

題意

在input元素外嵌套form表單，并且將action屬性賦值為："https://freecatphotoapp.com/submit-cat-photo"

要求

1. 現(xiàn)存的input元素需要被嵌套進(jìn)form元素當(dāng)中
2. form元素需要有一個action屬性，它的值為"https://freecatphotoapp.com/submit-cat-photo"
3. 你的form屬性需要有正確的opening tag以及closing tag

編輯器

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <input type="text" placeholder="cat photo URL">
</main>

解法

這個挑戰(zhàn)的解法并不困難，我們只需要仿照例子給input標(biāo)簽嵌套上form即可。但是這里要多說一句，我們雖然加入了action屬性，但這并不意味著我們就可以順利拿到用戶填入的信息了。很簡單，因?yàn)槲覀儧]有提供一個用來觸發(fā)表單提交的觸發(fā)器，比如最常見的一個寫著提交兩個字的按鈕。

關(guān)于觸發(fā)器的使用，我們將會在之后的文章當(dāng)中分享。

<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
  </form>
</main>

想要親自動手嘗試一下的同學(xué)不要忘了點(diǎn)擊文末的閱讀原文進(jìn)行跳轉(zhuǎn)哦~

文章就到這里，給個三連再走吧~