小白前端入门笔记（16），form表单创建文本输入框

TechFlow-承志

发布于 2021-03-09 14:36:57

8680

发布于 2021-03-09 14:36:57

文章被收录于专栏：TechFlow

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

今天的挑战关于网站表单的text field组件。

背景知识

我们在网站上注册过账号，当我们注册账号的时候我们需要填写很多内容。比如我们的账号名称，我们的密码等等。

当我们填写完这些信息之后，点击提交就完成了。有没有想过这当中的整个机制是怎样的？

其实我们填写的所有内容往往都是当做一个完整的表单（form）提交的，表单当中最常用的一个标签就是input，它可以很方便地获取用户输入的信息。

你可以像是这样创建一个input的标签。

<input type="text">

在上面这个例子当中，我们创建了一个文本输入框。这里输入的类型是通过type属性来控制的，除了文本之外还有很多其他的输入类型，比如邮箱、密码等等。另外，需要注意的是，input标签是self-closing的，也就是说它不需要额外再创建一个closing tag。

题意

今天的挑战非常简单，就是在上次创建的list后面新建一个input元素。

编辑器

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


</main>

解法

我们就按照题意的要求在最后一个ol元素后面加上一个input元素即可。

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

</main>

加完了之后我们会发现右侧的展示框当中多了一个文本输入框，这就说明我们的挑战已经完成了。

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

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

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

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

访问管理

本文分享自 Coder梁微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

访问管理

登录后参与评论

0 条评论

热度