Skip to content

Commit

Permalink
Update Learn/Forms/Basic_native_form_controls (mdn#4494)
Browse files Browse the repository at this point in the history
- remove unnecessary <code> elements
- correct ids of elements
  • Loading branch information
mfuji09 authored Apr 26, 2021
1 parent 0e531ce commit 7704bd9
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions files/en-us/learn/forms/basic_native_form_controls/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -152,12 +152,12 @@ <h3 id="Check_box">Check box</h3>
<p><img alt="Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10" src="checkboxes.png"></p>

<div class="notecard note">
<p><strong>Note</strong>: Any checkboxes and radio buttons with the <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code> attribute on load match the {{cssxref('<code>:default')}}</code> pseudo class, even if they are no longer checked. Any that are currently checked match the <code>{{cssxref(':checked')}}</code> pseudoclass.</p>
<p><strong>Note</strong>: Any checkboxes and radio buttons with the <code><a href="/en-US/docs/Web/HTML/Attributes/checked">checked</a></code> attribute on load match the {{cssxref(':default')}} pseudo class, even if they are no longer checked. Any that are currently checked match the {{cssxref(':checked')}} pseudo class.</p>
</div>

<p id="Radio_button">Due to the on-off nature of checkboxes, the checkbox is considered a toggle button, with many developers and designers expanding on the default checkbox styling to create buttons that look like toggle switches You can <a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">see an example in action here</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">source code</a>).</p>
<p>Due to the on-off nature of checkboxes, the checkbox is considered a toggle button, with many developers and designers expanding on the default checkbox styling to create buttons that look like toggle switches. You can <a href="https://mdn.github.io/learning-area/html/forms/toggle-switch-example/">see an example in action here</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/toggle-switch-example/index.html">source code</a>).</p>

<h3 id="Radio_button_2">Radio button</h3>
<h3 id="Radio_button">Radio button</h3>

<p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>:</p>

Expand Down Expand Up @@ -210,7 +210,7 @@ <h2 id="Actual_buttons">Actual buttons</h2>
<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">see it live also</a>).</p>
</div>

<p>Below you can find examples of each button <code>&lt;input&gt;</code> type, along with the equivalent button type.</p>
<p>Below you can find examples of each button <code>&lt;input&gt;</code> type, along with the equivalent <code>&lt;button&gt;</code> type.</p>

<h3 id="submit">submit</h3>

Expand Down

0 comments on commit 7704bd9

Please sign in to comment.