小白前端入门笔记（18），form表单的简单用法

TechFlow-承志

发布于 2021-03-09 14:39:25

6790

发布于 2021-03-09 14:39:25

文章被收录于专栏：TechFlow

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

今天的挑战关于创建一个表单元素。

背景知识

在前端网页设计当中，表单是非常重要的一个部分。

几乎所有用户数据的提交和上传都是通过表单来进行的，比如用户注册的时候，我们填写的账号、密码、邮箱等信息，最后点击提交的时候提交的内容其实就是一个表单。

表单在网页当中对应的标签是form，form本身并不包含信息，那些我们想要让用户输入以及提交上传的信息都是通过在form当中嵌套其他input元素实现的。

但是只有form是不够的，我们不仅需要让用户上传提交信息，并且也需要写明我们的信息提交的目的地。对于网页来说，这个目的地一般都是一个网址或者是后端接口，对于这个地址我们通过action属性来接收。

我们来看一个例子：

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

题意

在input元素外嵌套form表单，并且将action属性赋值为："https://freecatphotoapp.com/submit-cat-photo"

要求

现存的input元素需要被嵌套进form元素当中
form元素需要有一个action属性，它的值为"https://freecatphotoapp.com/submit-cat-photo"
你的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>

解法

这个挑战的解法并不困难，我们只需要仿照例子给input标签嵌套上form即可。但是这里要多说一句，我们虽然加入了action属性，但这并不意味着我们就可以顺利拿到用户填入的信息了。很简单，因为我们没有提供一个用来触发表单提交的触发器，比如最常见的一个写着提交两个字的按钮。

关于触发器的使用，我们将会在之后的文章当中分享。

<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>

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

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-03-04，如有侵权请联系 cloudcommunity@tencent.com 删除

https