# HTML5 and CSS: 31-40

31 - Use HTML5 to Require a Field

* 使用這個 input required 屬性，使用者就不能以空白提交資料

```markup
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>  
</form>
```

&#x20; Submit

32 - Create a Set of Radio Buttons

* radio button 單選按鈕
* 單選按鈕只是input輸入框的一種類型。
* 每一個單選按鈕都應該嵌套在它自己的label(標簽)元素中。
* 注意：所有關聯的單選按鈕應該使用相同的name屬性。
* 這一題我覺得怪怪的 orz

參考資料

* [Waypoint 35: Create a Set of Radio Buttons · Issue #1307 · FreeCodeCamp/FreeCodeCamp](https://github.com/FreeCodeCamp/freecodecamp/issues/1307)
* [Html: label (radio bottom) 小技巧 - Tsung's Blog](https://blog.longwin.com.tw/2005/04/html_label_radio_bottom/)
* [\[CSS3\] 用 CSS3 做表單 - 自訂單 / 多選框樣式 (一) | 男丁格爾's 脫殼玩](http://abgne.tw/css/apply-css3/css3-custom-radio-and-checkbox-button-style.html)

應該 `<label></label>` 像是單純顯示的文字，但和 `input` 又有點關係。看其他的範例，都是 label 裡面要再設定 for=""。因此我推測，如果將 input 放到 label 裡面 nesting，就可以省去這些設定

```markup
<form action="/submit-cat-photo">

    <label> <input type="radio" name="indoor-outdoor"/>indoor</label>
    <label><input type="radio" name="indoor-outdoor">outdoor</label>

  <button type="submit">Submit</button>
</form>
```

33 - Create a Set of Checkboxes

* 複選
* [Create a Set of Checkboxes | Free Code Camp](https://www.freecodecamp.com/challenges/create-a-set-of-checkboxes)
* [Create a Set of Checkboxes | FreeCodeCamp 中文社區](https://freecodecamp.cn/challenges/create-a-set-of-checkboxes)

```markup
<form action="/submit-cat-photo">
  <label><input type="checkbox" name="personality"> 內向</label>
  <label><input type="checkbox" name="personality"> 外向</label>
  <label><input type="checkbox" name="personality"> 神經</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
```

34 - Check Radio Buttons and Checkboxes by Default

* 在 input 新增 checked 屬性，就會默認被選中

  ```markup
  <form action="/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
  </form>
  ```

35 - Nest Many Elements within a Single Div Element

* div 竟然這麼後面才提到 @@
* 主要用途是，包裹內容用的容器，方便之後排版

```markup
<div>
  <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>
</div>
```

36 - Give a Background Color to a Div Element

```markup
<style>
  .silver-background {
    background-color: silver;
  }
</style>

<div class="silver-background">
  <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>
</div>
```

37 - Set the ID of an Element

* id 在 html 元素中是唯一的
* `<h2 id="cat-photo-form">`

38 - Use an ID Attribute to Style an Element

* id 竟然這麼後面才說

```markup
<style>
  #cat-photo-form {
    background-color: green;
  }
</style>  

<h2 id="cat-photo-form">
```

39 - Adjusting the Padding of an Element

* padding 內邊距
* border 邊框
* margin 外邊距

```markup
<style>
  .green-box {
    background-color: green;
    padding: 20px;
  }
</style>
```

40 - Adjust the Margin of an Element

```markup
<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 10px;
  }

  .red-box {
    background-color: red;
    padding: 20px;
    margin: 20px;
  }

  .green-box {
    background-color: green;
    padding: 20px;
    margin: 20px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>
```

&#x20;.injected-text { margin-bottom: -25px; text-align: center; }

.box { border-style: solid; border-color: black; border-width: 5px; text-align: center; }

.yellow-box { background-color: yellow; padding: 10px; }

.red-box { background-color: red; padding: 20px; margin: 20px; }

.green-box { background-color: green; padding: 20px; margin: 20px; } \</style>

## margin

## padding

## padding


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/html5-and-css/html5-and-css-31-40.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.