@picocss/pico

<!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> Inputs are <code>width: 100%;</code> by default. You can use <code>.grid</code> inside a form. All natives form elements are fully customizable and themeable with CSS variables. <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> We'll never share your email with anyone else. <button type="submit" aria-label="Example button" onclick="event.preventDefault()">Submit</button> </form> <footer class="code"> <pre><code><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">Submit</button> </form></code></pre> </footer> </article> Disabled and validation states: <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><input type="text" placeholder="Valid" aria-invalid="false"> <input type="text" placeholder="Invalid" aria-invalid="true"> <input type="text" placeholder="Disabled" disabled> <input type="text" value="Readonly" readonly></code></pre> </footer> </article> <code><fieldset></code> is unstyled and acts as a container for radios and checkboxes, providing a consistent <code>margin-bottom</code> for the set. <code>role="switch"</code> on a <code>type="checkbox"</code> enable a custom switch. <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> User must change password at next logon </label> </fieldset> <footer class="code"> <pre><code> <label for="fruit">Fruit</label> <select id="fruit" required> <option value="" selected>Select a fruit…</option> <option>…</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" disabled checked> User must change password at next logon </label> </fieldset></code></pre> </footer> </article> You can change a checkbox to an indeterminate state by setting the <code>indeterminate</code> property to <code>true</code> <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><script> document.getElementById('indeterminate-checkbox').indeterminate = true; </script></code></pre> </footer> </article> Others input types: <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"> </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> <input type="search" id="search" name="search" placeholder="Search">  <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></code></pre> </footer> </article> </section> ${require('./_footer.html')} </div> </main> <script src="js/commons.min.js"></script> </body> </html>