小白前端入門筆記（16），form表單創(chuàng)建文本輸入框

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

今天的挑戰(zhàn)關(guān)于網(wǎng)站表單的text field組件。

背景知識

我們在網(wǎng)站上注冊過賬號，當(dāng)我們注冊賬號的時(shí)候我們需要填寫很多內(nèi)容。比如我們的賬號名稱，我們的密碼等等。

當(dāng)我們填寫完這些信息之后，點(diǎn)擊提交就完成了。有沒有想過這當(dāng)中的整個(gè)機(jī)制是怎樣的？

其實(shí)我們填寫的所有內(nèi)容往往都是當(dāng)做一個(gè)完整的表單（form）提交的，表單當(dāng)中最常用的一個(gè)標(biāo)簽就是input，它可以很方便地獲取用戶輸入的信息。

你可以像是這樣創(chuàng)建一個(gè)input的標(biāo)簽。

<input?type="text">

在上面這個(gè)例子當(dāng)中，我們創(chuàng)建了一個(gè)文本輸入框。這里輸入的類型是通過type屬性來控制的，除了文本之外還有很多其他的輸入類型，比如郵箱、密碼等等。另外，需要注意的是，input標(biāo)簽是self-closing的，也就是說它不需要額外再創(chuàng)建一個(gè)closing tag。

題意

今天的挑戰(zhàn)非常簡單，就是在上次創(chuàng)建的list后面新建一個(gè)input元素。

編輯器

<h2>CatPhotoApph2>
<main>
??<p>Click?here?to?view?more?<a?href="#">cat?photosa>.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?nipli>
????<li>laser?pointersli>
????<li>lasagnali>
??ul>
??<p>Top?3?things?cats?hate:p>
??<ol>
????<li>flea?treatmentli>
????<li>thunderli>
????<li>other?catsli>
??ol>


main>

解法

我們就按照題意的要求在最后一個(gè)ol元素后面加上一個(gè)input元素即可。

<h2>CatPhotoApph2>
<main>
??<p>Click?here?to?view?more?<a?href="#">cat?photosa>.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?nipli>
????<li>laser?pointersli>
????<li>lasagnali>
??ul>
??<p>Top?3?things?cats?hate:p>
??<ol>
????<li>flea?treatmentli>
????<li>thunderli>
????<li>other?catsli>
??ol>

??<input?type="text">

main>

加完了之后我們會發(fā)現(xiàn)右側(cè)的展示框當(dāng)中多了一個(gè)文本輸入框，這就說明我們的挑戰(zhàn)已經(jīng)完成了。

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

文章就到這里，給個(gè)三連再走吧~