起始點
要解決此挑戰，我們希望您建立一個基本的網站專案，可以在您電腦硬碟的資料夾中建立，或者使用像 CodePen 或 JSFiddle 這樣的線上編輯器。此頁面上提供的程式碼已經包含了您所需的大部分程式碼。
-
在您電腦的合適位置建立一個名為
forms-challenge的新資料夾（或開啟一個線上編輯器並按照所需步驟建立新專案）。 -
將以下 HTML 程式碼儲存在您資料夾中的一個名為
index.html的檔案中（或將其貼上到線上編輯器的 HTML 面板中）。html<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Forms challenge</title> <link href="style.css" rel="stylesheet" /> <script defer src="index.js"></script> </head> <body> We want your feedback! We're very excited that you visited the little house in the woods, and we want to hear what you thought of it! Please fill in the below sections. You don't need to provide your name or contact details, but if you do, we'll enter you into a prize draw where you'll have a chance to win prizes. -- Facilities Was the porridge Too hot? Too cold? Just right? Were the beds Too hard? Too soft? Just right? Describe the chairs (select all you agree with) Comfy Luxurious Hi tec Pretty Majestic -- About your hosts Who's your favorite bear? Papa bear Mama bear Junior Dozer Which greeting did you prefer? Wave Friendly greeting Growl Claw marks in the door -- Any other feedback? Give us your comments -- Your details Name Email Phone -- Submit -- </body> </html> -
將以下 CSS 程式碼儲存在您資料夾中的一個名為
style.css的檔案中（或將其貼上到線上編輯器的 CSS 面板中）。css/* Basic font styles */ body { background-color: white; color: #333333; font: 1em / 1.4 system-ui; padding: 1em; width: 800px; margin: 0 auto; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h1, h2 { margin: 0 0 20px; color: purple; } * { box-sizing: border-box; } p { color: gray; margin: 0.5em 0; } /* Form structure */ fieldset { border: 0; padding: 0; } legend { padding-bottom: 10px; font-weight: bold; } fieldset, .separator { margin-bottom: 20px; } .form-section { margin-bottom: 20px; padding: 20px; } img { max-width: 100%; height: 50px; margin: 20px 0; } /* Individual form items */ fieldset input { margin: 0 10px 0 0; } label { margin-right: 40px; } textarea { margin-top: 10px; padding: 5px; width: 100%; height: 200px; } .separator { display: flex; } .separator label { flex: 2; } .separator input, .separator select { flex: 3; padding: 5px; } button { padding: 10px 20px; border-radius: 10px; border: 1px solid grey; background-color: #dddddd; width: 50%; margin: 0 auto; display: block; } button:hover, button:focus { background-color: #eeeeee; cursor: pointer; }
專案簡介
我們希望您想象一下，您剛剛在一家名為“林中小屋”的酒店（至少您認為那是一家酒店）住過。我們希望您幫助我們為這家酒店建立一個虛構的反饋表單。除了標記所需的要素和構建表單之外，還有一些額外的 HTML 功能我們希望您實現。
實現表單控制元件
- 在“設施”部分，我們希望您將前兩組線條轉換為單選按鈕組，每個按鈕都有一個描述它們的標籤，以及一個描述整個組的圖例。在每種情況下，新增一個屬性使第一個單選按鈕預設被選中。
- 在“設施”部分，將第三組線條轉換為複選框組，每個複選框都有一個描述它們的標籤，以及一個描述整個組的圖例。
- 在“關於您的主人”部分，將兩組線條都轉換為下拉選項選單，每個選項都有一個描述它們的標籤。
- 在“其他反饋？”部分，新增一個多行文字輸入框，並將現有的一行文字轉換為其描述性標籤。
- 在“您的詳細資訊”部分，為每三個列出的值新增一個合適的文字輸入型別來收集。將現有行轉換為它們的標籤。
- 將“提交”轉換為表單的提交按鈕。
構建表單
- 將表單包裝在一個合適的包裝器元素中，以指定整個內容為一個表單。
- 在表單內部新增重複的結構元素，以包裝每個表單部分。給每個表單部分元素新增一個
class，名為form-section。為了方便起見，每個表單部分都用兩組雙連字元 (--) 包圍。新增結構元素後，您可以刪除雙連字元。 - 您需要為一些控制元件/標籤對新增額外的結構元素，使它們單獨佔一行。現在新增它們，給每個元素新增一個
class，名為separator。 - 在多行文字輸入框和它的標籤之間新增一個換行符元素，使兩者單獨佔一行。
附加的 HTML 功能
- 文字中有幾個標題需要使用合適的元素進行標記。
- 頂級標題：“我們希望得到您的反饋！”。
- 二級標題：“設施”、“關於您的主人”、“其他反饋？”和“您的詳細資訊”。
- 頂級標題下的開頭段落需要被適當地標記。
- 同樣在開頭段落中，將文字“林中小屋”和“抽獎”轉換為連結。我們還沒有要連結到的頁面，所以目前，只需將目標 URL 設定為
#作為佔位符。 - 我們希望您在開頭段落下方放置一個寬而扁平的影像作為裝飾。影像路徑是
https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg，我們希望您為它設定一個空的替代文字，因為它僅用於裝飾。 - 接續上一點，作為一項擴充套件目標，研究一種更好的方法來在頁面上包含裝飾性影像，並嘗試這樣做（這涉及到一種我們在此模組中尚未接觸過的與 HTML 不同的技術）。
提示和技巧
- 使用 W3C HTML 驗證器來捕獲您 HTML 中無意的錯誤 — 這樣您就可以修復它們。
- 如果您卡住了，並且無法設想應該在何處放置哪些元素，請畫出頁面佈局的簡單框圖，並在您認為應該包含每個塊的元素上寫字。這非常有幫助。
示例
以下截圖展示了標記後的表單可能的樣子。如果您在如何實現這些功能方面遇到困難，請參閱即時示例下方的解決方案。
點選此處顯示解決方案
您完成的 HTML 應該看起來像這樣
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Forms challenge</title>
<link href="style.css" rel="stylesheet" />
<script defer src="index.js"></script>
</head>
<body>
<h1>We want your feedback!</h1>
<p>
We're very excited that you visited the
<a href="#">little house in the woods</a>, and we want to hear what you
thought of it! Please fill in the below sections. You don't need to
provide your name or contact details, but if you do, we'll enter you into
a <a href="#">prize draw</a> where you'll have a chance to win prizes.
</p>
<img
src="https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg"
alt="" />
<form>
<div class="form-section">
<h2>Facilities</h2>
<fieldset>
<legend>Was the porridge</legend>
<input
type="radio"
id="porridge-1"
name="porridge"
value="hot"
checked /><label for="porridge-1">Too hot?</label>
<input
type="radio"
id="porridge-2"
name="porridge"
value="cold" /><label for="porridge-2">Too cold?</label>
<input
type="radio"
id="porridge-3"
name="porridge"
value="right" /><label for="porridge-3">Just right?</label>
</fieldset>
<fieldset>
<legend>Were the beds</legend>
<input
type="radio"
id="beds-1"
name="beds"
value="hard"
checked /><label for="beds-1">Too hard?</label>
<input type="radio" id="beds-2" name="beds" value="soft" /><label
for="beds-2"
>Too soft?</label
>
<input type="radio" id="beds-3" name="beds" value="right" /><label
for="beds-3"
>Just right?</label
>
</fieldset>
<fieldset>
<legend>Describe the chairs (select all you agree with)</legend>
<input type="checkbox" id="comfy" name="comfy" /><label for="comfy"
>Comfy</label
>
<input type="checkbox" id="luxurious" name="luxurious" /><label
for="luxurious"
>Luxurious</label
>
<input type="checkbox" id="hi-tech" name="hi-tech" /><label
for="hi-tech"
>Hi-tech</label
>
<input type="checkbox" id="pretty" name="pretty" /><label for="pretty"
>Pretty</label
>
<input type="checkbox" id="majestic" name="majestic" /><label
for="majestic"
>Majestic</label
>
</fieldset>
</div>
<div class="form-section">
<h2>About your hosts</h2>
<div class="separator">
<label for="favorite">Who's your favorite bear?</label>
<select name="favorite" id="favorite">
<option value="papa">Papa bear</option>
<option value="mama">Mama bear</option>
<option value="junior">Junior</option>
<option value="randy">Cousin Randy</option>
</select>
</div>
<div class="separator">
<label for="greeting">Which greeting did you prefer?</label>
<select name="greeting" id="greeting">
<option value="papa">Wave</option>
<option value="mama">Friendly greeting</option>
<option value="junior">Growl</option>
<option value="randy">Claw marks in the door</option>
</select>
</div>
</div>
<div class="form-section">
<h2>Any other feedback?</h2>
<label for="comments">Give us your comments</label>
<br />
<textarea id="comments" name="comments"></textarea>
</div>
<div class="form-section">
<h2>Your details</h2>
<div class="separator">
<label for="name">Name</label>
<input type="text" id="name" name="name" />
</div>
<div class="separator">
<label for="email">Email</label>
<input type="email" id="email" name="email" />
</div>
<div class="separator">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" />
</div>
</div>
<div class="form-section">
<button>Submit</button>
</div>
</form>
</body>
</html>
對於擴充套件目標，在頁面上新增裝飾性影像的更好方法是使用 CSS 背景影像。刪除 <img> 元素，而是使用 CSS 的 background 屬性將影像放置在頁面上。一個放置背景影像的好元素是 <form> 元素，您需要告訴瀏覽器不要重複該影像。您還需要提供一些 margin 和 padding 來分隔背景影像，以免它與文字重疊。
css
form {
background: url("https://mdn.github.io/shared-assets/images/examples/learn/woodland-strip.jpg")
no-repeat;
margin-top: 20px;
padding-top: 50px;
}