2022-07-18 16:29:02 +00:00
---
id: 60fadd972e6ffe0d6858fa2d
2022-09-28 08:52:29 +00:00
title: 步驟 47
2022-07-18 16:29:02 +00:00
challengeType: 0
2022-09-28 08:52:29 +00:00
dashedName: step-47
2022-07-18 16:29:02 +00:00
---
# --description--
把 `label` 文本放在表單元素的上方是一個不錯的選擇。
選擇所有的 `input` 、`textarea` 和 `select` 元素,使其寬度填滿父級元素的寬度。
另外,給最被選中的元素的頂部添加 `10px` 的 `margin` 。 設置其餘的 margins 爲 `0` 。
# --hints--
應該使用逗號分隔的元素選擇器來選擇 `input` 、`textarea` 和 `select` 元素。
```js
assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector)));
```
應該設置其 `width` 屬性爲 `100%` 。
```js
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%');
```
應該設置其 `margin-top` 屬性爲 `10px` 。
```js
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px');
```
應該設置其 `margin-bottom` 屬性爲 `0` 。
```js
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px');
```
應該設置其 `margin-left` 屬性爲 `0` 。
```js
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px');
```
應該設置其 `margin-right` 屬性爲 `0` 。
```js
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
2022-09-28 08:52:29 +00:00
< html lang = "en" >
2022-07-18 16:29:02 +00:00
< head >
2022-09-28 08:52:29 +00:00
< meta charset = "UTF-8" >
2022-07-18 16:29:02 +00:00
< title > Registration Form< / title >
2022-09-28 08:52:29 +00:00
< link rel = "stylesheet" href = "styles.css" / >
2022-07-18 16:29:02 +00:00
< / head >
< body >
< h1 > Registration Form< / h1 >
< p > Please fill out this form with the required information< / p >
< form action = 'https://register-demo.freecodecamp.org' >
< fieldset >
2022-09-28 08:52:29 +00:00
< label for = "first-name" > Enter Your First Name: < input id = "first-name" name = "first-name" type = "text" required / > < / label >
< label for = "last-name" > Enter Your Last Name: < input id = "last-name" name = "last-name" type = "text" required / > < / label >
< label for = "email" > Enter Your Email: < input id = "email" name = "email" type = "email" required / > < / label >
< label for = "new-password" > Create a New Password: < input id = "new-password" name = "new-password" type = "password" pattern = "[a-z0-5]{8,}" required / > < / label >
2022-07-18 16:29:02 +00:00
< / fieldset >
< fieldset >
2022-09-28 08:52:29 +00:00
< label for = "personal-account" > < input id = "personal-account" type = "radio" name = "account-type" / > Personal Account< / label >
< label for = "business-account" > < input id = "business-account" type = "radio" name = "account-type" / > Business Account< / label >
< label for = "terms-and-conditions" name = "terms-and-conditions" >
< input id = "terms-and-conditions" type = "checkbox" required name = "terms-and-conditions" / > I accept the < a href = "https://www.freecodecamp.org/news/terms-of-service/" > terms and conditions< / a >
< / label >
2022-07-18 16:29:02 +00:00
< / fieldset >
< fieldset >
2022-09-28 08:52:29 +00:00
< label for = "profile-picture" > Upload a profile picture: < input id = "profile-picture" type = "file" name = "file" / > < / label >
< label for = "age" > Input your age (years): < input id = "age" type = "number" name = "age" min = "13" max = "120" / > < / label >
< label for = "referrer" > How did you hear about us?
< select id = "referrer" name = "referrer" >
2022-07-18 16:29:02 +00:00
< option value = "" > (select one)< / option >
< option value = "1" > freeCodeCamp News< / option >
< option value = "2" > freeCodeCamp YouTube Channel< / option >
< option value = "3" > freeCodeCamp Forum< / option >
< option value = "4" > Other< / option >
< / select >
< / label >
2022-09-28 08:52:29 +00:00
< label for = "bio" > Provide a bio:
< textarea id = "bio" name = "bio" rows = "3" cols = "30" placeholder = "I like coding on the beach..." > < / textarea >
< / label >
2022-07-18 16:29:02 +00:00
< / fieldset >
< input type = "submit" value = "Submit" / >
< / form >
< / body >
< / html >
```
```css
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #1b1b32 ;
2022-09-28 08:52:29 +00:00
color: #f5f6f7 ;
2022-07-18 16:29:02 +00:00
font-family: Tahoma;
2022-09-28 08:52:29 +00:00
font-size: 16px;
2022-07-18 16:29:02 +00:00
}
h1, p {
margin: 1em auto;
text-align: center;
}
form {
width: 60vw;
2022-09-28 08:52:29 +00:00
max-width: 500px;
min-width: 300px;
margin: 0 auto;
2022-07-18 16:29:02 +00:00
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f ;
}
fieldset:last-of-type {
border-bottom: none;
}
label {
display: block;
2022-09-28 08:52:29 +00:00
margin: 0.5rem 0;
2022-07-18 16:29:02 +00:00
}
--fcc-editable-region--
--fcc-editable-region--
```