小白前端入门笔记（17），在input标签内设置默认文本

TechFlow-承志

发布于 2021-03-09 14:38:18

1.5K0

发布于 2021-03-09 14:38:18

文章被收录于专栏：TechFlow

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

今天的挑战依然关于input标签，我们要为标签设置默认文本。

背景知识

默认文本的英文叫做placeholder text，placeholder是预留位置的意思。这个词在编程当中经常出现，有一些变量或者是工具库支持我们在正式赋值之前设置一个默认值，或者是一个占位符。比如TensorFlow框架当中就经常用到，它们虽然用途不完全相同，但是核心”占位“的意思是一样的。

在前端当中，我们用placeholder属性来为input标签设置默认内容。

我们来看一个例子：

<input type="text" placeholder="this is placeholder text">

呈现的效果是这样的：

当我们什么都没输入的时候，它会展示我们设置好的文本用来提示用户。这个功能我们在各种网站的注册用户界面应该都见到过。

题意

今天的题意非常简单，就是为代码当中的input标签设置placeholder，设置为"cat photo URL"

要求

你需要在input元素当中添加placeholder属性
你需要将placeholder属性设置成'cat photo URL'
input标签不需要closing tag
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>

解法

我们按照题意的说明加上placeholder这个属性即可。

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

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

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

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

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

css

php

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

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

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

css

php

登录后参与评论

0 条评论

热度