小白前端入門筆記（19），form表單里的加入提交按鈕

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

今天的挑戰(zhàn)關于form表單添加提交按鈕。

背景知識

在上一次挑戰(zhàn)當中我們嘗試了給一個input元素添加form表單，但是我們只是添加了表單是不夠的，用戶填好了信息但是少了一個觸發(fā)上傳的按鈕。所以今天我們就來說說怎么給form表單添加一個提交按鈕。

添加的方法非常簡單，在HTML當中專門有一個標簽就叫做button，它可以在頁面上創(chuàng)建一個按鈕。但是并不是隨便一個按鈕就可以提交信息的，我們必須要保證它的類型是"submit"，這樣將它放在表單當中，就可以提交信息了。

下面是一個例子：

<button type="submit">this button submits the form</button>

題意

在現在已有的form表單當中添加一個submit按鈕，并且將"Submit"作為它的文本。

要求

1. 你的form必須要有button按鈕
2. 你的提交按鈕必須要有type="submit"
3. 你的提交按鈕必須要有文本"Submit"
4. 你的按鈕元素需要有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>
  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <input type="text" placeholder="cat photo URL">
  </form>
</main>

解法

我們了解了form表單當中button的用法，按照題目的意思加上即可：

<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">
    <button type="submit">
        Submit
      </button>
  </form>
</main>

想要親自動手嘗試一下的同學不要忘了點擊文末的閱讀原文進行跳轉哦~

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