小白前端入門筆記（17），在input標(biāo)簽內(nèi)設(shè)置默認文本

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

今天的挑戰(zhàn)依然關(guān)于input標(biāo)簽，我們要為標(biāo)簽設(shè)置默認文本。

背景知識

默認文本的英文叫做placeholder text，placeholder是預(yù)留位置的意思。這個詞在編程當(dāng)中經(jīng)常出現(xiàn)，有一些變量或者是工具庫支持我們在正式賦值之前設(shè)置一個默認值，或者是一個占位符。比如TensorFlow框架當(dāng)中就經(jīng)常用到，它們雖然用途不完全相同，但是核心”占位“的意思是一樣的。

在前端當(dāng)中，我們用placeholder屬性來為input標(biāo)簽設(shè)置默認內(nèi)容。

我們來看一個例子：

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

呈現(xiàn)的效果是這樣的：

當(dāng)我們什么都沒輸入的時候，它會展示我們設(shè)置好的文本用來提示用戶。這個功能我們在各種網(wǎng)站的注冊用戶界面應(yīng)該都見到過。

題意

今天的題意非常簡單，就是為代碼當(dāng)中的input標(biāo)簽設(shè)置placeholder，設(shè)置為"cat photo URL"

要求

1. 你需要在input元素當(dāng)中添加placeholder屬性
2. 你需要將placeholder屬性設(shè)置成'cat photo URL'
3. input標(biāo)簽不需要closing tag
4. input標(biāo)簽的語法正確

編輯器

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

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

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