2024-01-27 13:53:19 +07:00
|
|
|
<!DOCTYPE html>
|
2021-10-31 21:33:19 +07:00
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
2024-01-27 13:53:19 +07:00
|
|
|
${require('./_head.html') title=`Forms` description=`All form elements are
|
|
|
|
|
fully responsive in pure semantic HTML, allowing forms to scale gracefully
|
|
|
|
|
across devices and viewports.` canonical=`forms.html` }
|
2021-10-31 21:33:19 +07:00
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
${require('./_nav.html')}
|
2023-01-16 22:13:30 +00:00
|
|
|
|
2021-10-31 21:33:19 +07:00
|
|
|
<main class="container" id="docs">
|
2023-12-28 16:26:59 +07:00
|
|
|
${require('./_sidebar.html') active=`forms-link`}
|
2023-01-16 22:13:30 +00:00
|
|
|
|
2021-10-31 21:33:19 +07:00
|
|
|
<div role="document">
|
|
|
|
|
<section id="forms">
|
|
|
|
|
<hgroup>
|
2021-11-02 00:20:55 +07:00
|
|
|
<h1>Forms</h1>
|
2024-01-27 13:53:19 +07:00
|
|
|
<h2>
|
|
|
|
|
All form elements are fully responsive in pure semantic HTML,
|
|
|
|
|
allowing forms to scale gracefully across devices and viewports.
|
|
|
|
|
</h2>
|
2021-10-31 21:33:19 +07:00
|
|
|
</hgroup>
|
2024-01-27 13:53:19 +07:00
|
|
|
<p>
|
|
|
|
|
Inputs are <code><i>width</i>: <u>100%</u>;</code> by default. You
|
|
|
|
|
can use <code>.grid</code> inside a form.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
All native form elements are fully customizable and themeable with
|
|
|
|
|
CSS variables.
|
|
|
|
|
</p>
|
2021-10-31 21:33:19 +07:00
|
|
|
<article aria-label="Form example">
|
|
|
|
|
<form>
|
|
|
|
|
<div class="grid">
|
|
|
|
|
<label for="firstname">
|
|
|
|
|
First name
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
id="firstname"
|
|
|
|
|
name="firstname"
|
|
|
|
|
placeholder="First name"
|
|
|
|
|
required
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
</label>
|
|
|
|
|
<label for="lastname">
|
|
|
|
|
Last name
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
id="lastname"
|
|
|
|
|
name="lastname"
|
|
|
|
|
placeholder="Last name"
|
|
|
|
|
required
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<label for="email">Email address</label>
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="email"
|
|
|
|
|
id="email"
|
|
|
|
|
name="email"
|
|
|
|
|
placeholder="Email address"
|
|
|
|
|
required
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
<small>We'll never share your email with anyone else.</small>
|
2024-01-27 13:53:19 +07:00
|
|
|
<button
|
|
|
|
|
type="submit"
|
|
|
|
|
aria-label="Example button"
|
|
|
|
|
onclick="event.preventDefault()"
|
|
|
|
|
>
|
|
|
|
|
Submit
|
|
|
|
|
</button>
|
2021-10-31 21:33:19 +07:00
|
|
|
</form>
|
|
|
|
|
<footer class="code">
|
2024-01-27 13:53:19 +07:00
|
|
|
<pre><code><<b>form</b>>
|
2021-10-31 21:33:19 +07:00
|
|
|
|
|
|
|
|
<em><!-- Grid --></em>
|
|
|
|
|
<<b>div</b> <i>class</i>=<u>"grid"</u>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Markup example 1: input is inside label --></em>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"firstname"</u>>
|
|
|
|
|
First name
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"firstname"</u> <i>name</i>=<u>"firstname"</u> <i>placeholder</i>=<u>"First name"</u> <i>required</i>>
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"lastname"</u>>
|
|
|
|
|
Last name
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>id</i>=<u>"lastname"</u> <i>name</i>=<u>"lastname"</u> <i>placeholder</i>=<u>"Last name"</u> <i>required</i>>
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
|
|
|
|
|
</<b>div</b>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Markup example 2: input is after label --></em>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"email"</u>>Email address</<b>label</b>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"email"</u> <i>id</i>=<u>"email"</u> <i>name</i>=<u>"email"</u> <i>placeholder</i>=<u>"Email address"</u> <i>required</i>>
|
|
|
|
|
<<b>small</b>>We'll never share your email with anyone else.</<b>small</b>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Button --></em>
|
|
|
|
|
<<b>button</b> <i>type</i>=<u>"submit"</u>>Submit</<b>button</b>>
|
|
|
|
|
|
|
|
|
|
</<b>form</b>></code></pre>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
|
|
|
|
<p>Disabled and validation states:</p>
|
|
|
|
|
<article aria-label="Validation states examples">
|
|
|
|
|
<form class="grid">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Valid"
|
|
|
|
|
aria-label="Valid"
|
|
|
|
|
aria-invalid="false"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Invalid"
|
|
|
|
|
aria-label="Invalid"
|
|
|
|
|
aria-invalid="true"
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="Disabled"
|
|
|
|
|
aria-label="Disabled"
|
|
|
|
|
disabled
|
|
|
|
|
/>
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
value="Readonly"
|
|
|
|
|
aria-label="Readonly"
|
|
|
|
|
readonly
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
</form>
|
|
|
|
|
<footer class="code">
|
2024-01-27 13:53:19 +07:00
|
|
|
<pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
2021-10-31 21:33:19 +07:00
|
|
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Invalid"</u> <i>aria-invalid</i>=<u>"true"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Disabled"</u> <i>disabled</i>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"text"</u> <i>value</i>=<u>"Readonly"</u> <i>readonly</i>></code></pre>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
2024-01-27 13:53:19 +07:00
|
|
|
<p>
|
|
|
|
|
<code><<b>fieldset</b>></code> is unstyled and acts as a
|
|
|
|
|
container for radios and checkboxes, providing a consistent
|
|
|
|
|
<code><i>margin-bottom</i></code> for the set.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<code><i>role</i>=<u>"switch"</u></code> on a
|
|
|
|
|
<code><i>type</i>=<u>"checkbox"</u></code> enable a custom switch.
|
|
|
|
|
</p>
|
2021-10-31 21:33:19 +07:00
|
|
|
<article aria-label="Select, radios, checkboxes, switch examples">
|
|
|
|
|
<label for="fruit">Fruit</label>
|
|
|
|
|
<select id="fruit" required>
|
|
|
|
|
<option value="" selected>Select a fruit…</option>
|
|
|
|
|
<option>Banana</option>
|
|
|
|
|
<option>Watermelon</option>
|
|
|
|
|
<option>Apple</option>
|
|
|
|
|
<option>Orange</option>
|
|
|
|
|
<option>Mango</option>
|
|
|
|
|
</select>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<legend>Size</legend>
|
|
|
|
|
<label for="small">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="radio"
|
|
|
|
|
id="small"
|
|
|
|
|
name="size"
|
|
|
|
|
value="small"
|
|
|
|
|
checked
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
Small
|
|
|
|
|
</label>
|
|
|
|
|
<label for="medium">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input type="radio" id="medium" name="size" value="medium" />
|
2021-10-31 21:33:19 +07:00
|
|
|
Medium
|
|
|
|
|
</label>
|
|
|
|
|
<label for="large">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input type="radio" id="large" name="size" value="large" />
|
2021-10-31 21:33:19 +07:00
|
|
|
Large
|
|
|
|
|
</label>
|
2021-12-19 11:01:33 +00:00
|
|
|
<label for="extralarge">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="radio"
|
|
|
|
|
id="extralarge"
|
|
|
|
|
name="size"
|
|
|
|
|
value="extralarge"
|
|
|
|
|
disabled
|
|
|
|
|
/>
|
2021-12-19 11:01:33 +00:00
|
|
|
Extra Large
|
|
|
|
|
</label>
|
2021-10-31 21:33:19 +07:00
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<label for="terms">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input type="checkbox" id="terms" name="terms" />
|
2021-10-31 21:33:19 +07:00
|
|
|
I agree to the Terms and Conditions
|
|
|
|
|
</label>
|
2021-12-19 11:01:33 +00:00
|
|
|
<label for="terms_sharing">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="terms_sharing"
|
|
|
|
|
name="terms_sharing"
|
|
|
|
|
disabled
|
|
|
|
|
checked
|
|
|
|
|
/>
|
2021-12-19 11:01:33 +00:00
|
|
|
I agree to share my information with partners
|
|
|
|
|
</label>
|
2021-10-31 21:33:19 +07:00
|
|
|
</fieldset>
|
|
|
|
|
<fieldset>
|
|
|
|
|
<label for="switch">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="switch"
|
|
|
|
|
name="switch"
|
|
|
|
|
role="switch"
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
Publish on my profile
|
|
|
|
|
</label>
|
2021-12-19 11:01:33 +00:00
|
|
|
<label for="switch_disabled">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="switch_disabled"
|
|
|
|
|
name="switch_disabled"
|
|
|
|
|
role="switch"
|
|
|
|
|
disabled
|
|
|
|
|
checked
|
|
|
|
|
/>
|
2022-02-06 10:59:18 +07:00
|
|
|
User must change password at next logon
|
2021-12-19 11:01:33 +00:00
|
|
|
</label>
|
2021-10-31 21:33:19 +07:00
|
|
|
</fieldset>
|
|
|
|
|
<footer class="code">
|
2024-01-27 13:53:19 +07:00
|
|
|
<pre><code><em><!-- Select --></em>
|
2021-10-31 21:33:19 +07:00
|
|
|
<<b>label</b> <i>for</i>=<u>"fruit"</u>>Fruit</<b>label</b>>
|
|
|
|
|
<<b>select</b> <i>id</i>=<u>"fruit"</u> <i>required</i>>
|
|
|
|
|
<<b>option</b> <i>value</i>=<u>""</u> <i>selected</i>>Select a fruit…</<b>option</b>>
|
|
|
|
|
<<b>option</b>>…</<b>option</b>>
|
|
|
|
|
</<b>select</b>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Radios --></em>
|
|
|
|
|
<<b>fieldset</b>>
|
|
|
|
|
<<b>legend</b>>Size</<b>legend</b>>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"small"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"small"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"small"</u> <i>checked</i>>
|
|
|
|
|
Small
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"medium"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"medium"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"medium"</u>>
|
|
|
|
|
Medium
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"large"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"large"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"large"</u>>
|
|
|
|
|
Large
|
|
|
|
|
</<b>label</b>>
|
2021-12-19 11:01:33 +00:00
|
|
|
<<b>label</b> <i>for</i>=<u>"extralarge"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"radio"</u> <i>id</i>=<u>"extralarge"</u> <i>name</i>=<u>"size"</u> <i>value</i>=<u>"extralarge"</u> <i>disabled</i>>
|
|
|
|
|
Extra Large
|
|
|
|
|
</<b>label</b>>
|
2021-10-31 21:33:19 +07:00
|
|
|
</<b>fieldset</b>>
|
|
|
|
|
|
2021-12-23 23:55:56 +07:00
|
|
|
<em><!-- Checkboxes --></em>
|
2021-10-31 21:33:19 +07:00
|
|
|
<<b>fieldset</b>>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"terms"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms"</u> <i>name</i>=<u>"terms"</u>>
|
|
|
|
|
I agree to the Terms and Conditions
|
|
|
|
|
</<b>label</b>>
|
2021-12-19 11:01:33 +00:00
|
|
|
<<b>label</b> <i>for</i>=<u>"terms_sharing"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"terms_sharing"</u> <i>name</i>=<u>"terms_sharing"</u> <i>disabled checked</i>>
|
|
|
|
|
I agree to share my information with partners
|
|
|
|
|
</<b>label</b>>
|
2021-10-31 21:33:19 +07:00
|
|
|
</<b>fieldset</b>>
|
|
|
|
|
|
2021-12-23 23:55:56 +07:00
|
|
|
<em><!-- Switches --></em>
|
2021-10-31 21:33:19 +07:00
|
|
|
<<b>fieldset</b>>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"switch"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch"</u> <i>name</i>=<u>"switch"</u> <i>role</i>=<u>"switch"</u>>
|
|
|
|
|
Publish on my profile
|
|
|
|
|
</<b>label</b>>
|
2021-12-19 11:01:33 +00:00
|
|
|
<<b>label</b> <i>for</i>=<u>"switch_disabled"</u>>
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"checkbox"</u> <i>id</i>=<u>"switch_disabled"</u> <i>name</i>=<u>"switch_disabled"</u> <i>role</i>=<u>"switch_disabled"</u> <i>disabled checked</i>>
|
2022-02-06 10:59:18 +07:00
|
|
|
User must change password at next logon
|
2021-12-19 11:01:33 +00:00
|
|
|
</<b>label</b>>
|
2021-10-31 21:33:19 +07:00
|
|
|
</<b>fieldset</b>></code></pre>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
2024-01-27 13:53:19 +07:00
|
|
|
<p>
|
|
|
|
|
You can change a checkbox to an indeterminate state by setting the
|
|
|
|
|
<code><i>indeterminate</i></code> property to
|
|
|
|
|
<code><u>true</u></code>
|
|
|
|
|
</p>
|
2021-10-31 21:33:19 +07:00
|
|
|
<article aria-label="Indeterminate checkbox example">
|
|
|
|
|
<label for="indeterminate-checkbox">
|
2024-01-27 13:53:19 +07:00
|
|
|
<input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="indeterminate-checkbox"
|
|
|
|
|
name="indeterminate-checkbox"
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
Select all
|
|
|
|
|
</label>
|
2024-01-27 13:53:19 +07:00
|
|
|
<script>
|
|
|
|
|
document.getElementById(
|
|
|
|
|
"indeterminate-checkbox"
|
|
|
|
|
).indeterminate = true
|
|
|
|
|
</script>
|
2021-10-31 21:33:19 +07:00
|
|
|
<footer class="code">
|
2024-01-27 13:53:19 +07:00
|
|
|
<pre><code><<b>script</b>>
|
2021-10-31 21:33:19 +07:00
|
|
|
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
|
|
|
|
</<b>script</b>></code></pre>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
2022-03-09 04:43:24 +03:00
|
|
|
|
2021-10-31 21:33:19 +07:00
|
|
|
<p>Others input types:</p>
|
2024-01-27 13:53:19 +07:00
|
|
|
<article
|
|
|
|
|
aria-label="Search, file browser, range slider, date, time, color examples"
|
|
|
|
|
>
|
|
|
|
|
<input
|
|
|
|
|
type="search"
|
|
|
|
|
id="search"
|
|
|
|
|
name="search"
|
|
|
|
|
placeholder="Search"
|
|
|
|
|
/>
|
|
|
|
|
<label for="file"
|
|
|
|
|
>File browser
|
|
|
|
|
<input type="file" id="file" name="file" />
|
2021-10-31 21:33:19 +07:00
|
|
|
</label>
|
2024-01-27 13:53:19 +07:00
|
|
|
<label for="range"
|
|
|
|
|
>Range slider
|
|
|
|
|
<input
|
|
|
|
|
type="range"
|
|
|
|
|
min="0"
|
|
|
|
|
max="100"
|
|
|
|
|
value="50"
|
|
|
|
|
id="range"
|
|
|
|
|
name="range"
|
|
|
|
|
/>
|
2021-10-31 21:33:19 +07:00
|
|
|
</label>
|
2024-01-27 13:53:19 +07:00
|
|
|
<label for="date"
|
|
|
|
|
>Date
|
|
|
|
|
<input type="date" id="date" name="date" />
|
2021-10-31 21:33:19 +07:00
|
|
|
</label>
|
2024-01-27 13:53:19 +07:00
|
|
|
<label for="time"
|
|
|
|
|
>Time
|
|
|
|
|
<input type="time" id="time" name="time" />
|
2021-10-31 21:33:19 +07:00
|
|
|
</label>
|
2024-01-27 13:53:19 +07:00
|
|
|
<label for="color"
|
|
|
|
|
>Color
|
|
|
|
|
<input type="color" id="color" name="color" value="#0eaaaa" />
|
2021-10-31 21:33:19 +07:00
|
|
|
</label>
|
|
|
|
|
<footer class="code">
|
2024-01-27 13:53:19 +07:00
|
|
|
<pre><code><em><!-- Search --></em>
|
2022-03-13 11:01:44 +07:00
|
|
|
<<b>input</b> <i>type</i>=<u>"search"</u> <i>id</i>=<u>"search"</u> <i>name</i>=<u>"search"</u> <i>placeholder</i>=<u>"Search"</u>>
|
2023-01-16 22:13:30 +00:00
|
|
|
|
2024-01-27 13:53:19 +07:00
|
|
|
<em><!-- File browser --></em>
|
2021-10-31 21:33:19 +07:00
|
|
|
<<b>label</b> <i>for</i>=<u>"file"</u>>File browser
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"file"</u> <i>id</i>=<u>"file"</u> <i>name</i>=<u>"file"</u>>
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Range slider --></em>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"range"</u>>Range slider
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"range"</u> <i>min</i>=<u>"0"</u> <i>max</i>=<u>"100"</u> <i>value</i>=<u>"50"</u> <i>id</i>=<u>"range"</u> <i>name</i>=<u>"range"</u>>
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Date --></em>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"date"</u>>Date
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"date"</u> <i>id</i>=<u>"date"</u> <i>name</i>=<u>"date"</u>>
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Time --></em>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"time"</u>>Time
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"time"</u> <i>id</i>=<u>"time"</u> <i>name</i>=<u>"time"</u>>
|
|
|
|
|
</<b>label</b>>
|
|
|
|
|
|
|
|
|
|
<em><!-- Color --></em>
|
|
|
|
|
<<b>label</b> <i>for</i>=<u>"color"</u>>Color
|
|
|
|
|
<<b>input</b> <i>type</i>=<u>"color"</u> <i>id</i>=<u>"color"</u> <i>name</i>=<u>"color"</u> <i>value</i>=<u>"#0eaaaa"</u>>
|
|
|
|
|
</<b>label</b>></code></pre>
|
|
|
|
|
</footer>
|
|
|
|
|
</article>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
${require('./_footer.html')}
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<script src="js/commons.min.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
