小白前端入门笔记（19），form表单里的加入提交按钮

大家好，欢迎来到freecodecamp HTML专题的第19篇。

今天的挑战关于form表单添加提交按钮。

背景知识

在上一次挑战当中我们尝试了给一个input元素添加form表单，但是我们只是添加了表单是不够的，用户填好了信息但是少了一个触发上传的按钮。所以今天我们就来说说怎么给form表单添加一个提交按钮。

添加的方法非常简单，在HTML当中专门有一个标签就叫做button，它可以在页面上创建一个按钮。但是并不是随便一个按钮就可以提交信息的，我们必须要保证它的类型是"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>

想要亲自动手尝试一下的同学不要忘了点击文末的阅读原文进行跳转哦~

文章就到这里，给个三连再走吧~