mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
268 lines
12 KiB
HTML
268 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
${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"
|
|
}
|
|
</head>
|
|
|
|
<body>
|
|
${require('./_nav.html')}
|
|
|
|
<main class="container" id="docs">
|
|
${require('./_sidebar.html') active="forms-link"}
|
|
|
|
<div role="document">
|
|
<section id="forms">
|
|
<hgroup>
|
|
<h1>Forms</h1>
|
|
<h2>All form elements are fully responsive in pure semantic HTML, allowing forms to scale gracefully across devices and viewports.</h2>
|
|
</hgroup>
|
|
<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 natives form elements are fully customizable and themeable with CSS variables.</p>
|
|
<article aria-label="Form example">
|
|
<form>
|
|
<div class="grid">
|
|
<label for="firstname">
|
|
First name
|
|
<input type="text" id="firstname" name="firstname" placeholder="First name" required>
|
|
</label>
|
|
<label for="lastname">
|
|
Last name
|
|
<input type="text" id="lastname" name="lastname" placeholder="Last name" required>
|
|
</label>
|
|
</div>
|
|
<label for="email">Email address</label>
|
|
<input type="email" id="email" name="email" placeholder="Email address" required>
|
|
<small>We'll never share your email with anyone else.</small>
|
|
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button>
|
|
</form>
|
|
<footer class="code">
|
|
|
|
<pre><code><<b>form</b>>
|
|
|
|
<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">
|
|
<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>
|
|
</form>
|
|
<footer class="code">
|
|
|
|
<pre><code><<b>input</b> <i>type</i>=<u>"text"</u> <i>placeholder</i>=<u>"Valid"</u> <i>aria-invalid</i>=<u>"false"</u>>
|
|
<<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>
|
|
<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>
|
|
<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">
|
|
<input type="radio" id="small" name="size" value="small" checked>
|
|
Small
|
|
</label>
|
|
<label for="medium">
|
|
<input type="radio" id="medium" name="size" value="medium">
|
|
Medium
|
|
</label>
|
|
<label for="large">
|
|
<input type="radio" id="large" name="size" value="large">
|
|
Large
|
|
</label>
|
|
<label for="extralarge">
|
|
<input type="radio" id="extralarge" name="size" value="extralarge" disabled>
|
|
Extra Large
|
|
</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="terms">
|
|
<input type="checkbox" id="terms" name="terms">
|
|
I agree to the Terms and Conditions
|
|
</label>
|
|
<label for="terms_sharing">
|
|
<input type="checkbox" id="terms_sharing" name="terms_sharing" disabled checked>
|
|
I agree to share my information with partners
|
|
</label>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="switch">
|
|
<input type="checkbox" id="switch" name="switch" role="switch">
|
|
Publish on my profile
|
|
</label>
|
|
<label for="switch_disabled">
|
|
<input type="checkbox" id="switch_disabled" name="switch_disabled" role="switch" disabled checked>
|
|
Publish on my profile my accomplishments
|
|
</label>
|
|
</fieldset>
|
|
<footer class="code">
|
|
|
|
<pre><code><em><!-- Select --></em>
|
|
<<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>>
|
|
</<b>label</b>>
|
|
<<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>>
|
|
</<b>fieldset</b>>
|
|
|
|
<em><!-- Checkboxes --></em>
|
|
<<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>>
|
|
<<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>>
|
|
</<b>fieldset</b>>
|
|
|
|
<em><!-- Switches --></em>
|
|
<<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>>
|
|
<<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>>
|
|
Publish on my profile my accomplishments
|
|
</<b>label</b>>
|
|
</<b>fieldset</b>></code></pre>
|
|
|
|
</footer>
|
|
</article>
|
|
<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>
|
|
<article aria-label="Indeterminate checkbox example">
|
|
<label for="indeterminate-checkbox">
|
|
<input type="checkbox" id="indeterminate-checkbox" name="indeterminate-checkbox">
|
|
Select all
|
|
</label>
|
|
<script>document.getElementById('indeterminate-checkbox').indeterminate = true;</script>
|
|
<footer class="code">
|
|
|
|
<pre><code><<b>script</b>>
|
|
<i>document</i>.<b>getElementById</b>(<u>'indeterminate-checkbox'</u>).<i>indeterminate</i> = <u>true</u>;
|
|
</<b>script</b>></code></pre>
|
|
|
|
</footer>
|
|
</article>
|
|
<p>Others input types:</p>
|
|
<article aria-label="File browser, range slider, date, time, color examples">
|
|
<label for="file">File browser
|
|
<input type="file" id="file" name="file">
|
|
</label>
|
|
<label for="range">Range slider
|
|
<input type="range" min="0" max="100" value="50" id="range" name="range">
|
|
</label>
|
|
<label for="date">Date
|
|
<input type="date" id="date" name="date">
|
|
</label>
|
|
<label for="time">Time
|
|
<input type="time" id="time" name="time">
|
|
</label>
|
|
<label for="color">Color
|
|
<input type="color" id="color" name="color" value="#0eaaaa">
|
|
</label>
|
|
<footer class="code">
|
|
|
|
<pre><code><em><!-- File browser --></em>
|
|
<<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>
|