Function Forms

site/src/pages/forms/index.js:11–299

()

const description = 'Simple CSS for HTML forms.';

function Forms() {
    return (
        <Layout description={description} title={title}>
            <Header description={description} title={title} />

            <div className="content">
                <SectionHeader heading="Default Form" />

                <p>
              To create a default inline form, add the <code>pure-form</code> classname to any <code>&lt;form&gt;</code> element.
                </p>

                <Example>
                    <form className="pure-form">
                        <fieldset>
                            <legend>A compact inline form</legend>
                            <input type="email" placeholder="Email" />
                            <input type="password" placeholder="Password" />
                            <label htmlFor="default-remember">
                                <input id="default-remember" type="checkbox" /> Remember me
                            </label>
                            <button type="submit" className="pure-button pure-button-primary">Sign in</button>
                        </fieldset>
                    </form>
                </Example>

                <SectionHeader heading="Stacked Form" />

                <p>
              To create a stacked form with input elements below the labels, add the <code>pure-form-stacked</code> classname to a <code>&lt;form&gt;</code> element alongside <code>pure-form</code>.
                </p>

                <Example>
                    <form className="pure-form pure-form-stacked">
                        <fieldset>
                            <legend>A Stacked Form</legend>
                            <label htmlFor="stacked-email">Email</label>
                            <input id="stacked-email" type="email" placeholder="Email" />
                            <span className="pure-form-message">This is a required field.</span>
                            <label htmlFor="stacked-password">Password</label>
                            <input id="stacked-password" type="password" placeholder="Password" />
                            <label htmlFor="stacked-state">State</label>
                            <select id="stacked-state">
                                <option>AL</option>
                                <option>CA</option>
                                <option>IL</option>
                            </select>
                            <label htmlFor="stacked-remember" className="pure-checkbox">
                                <input id="stacked-remember" type="checkbox" /> Remember me
                            </label>
                            <button type="submit" className="pure-button pure-button-primary">Sign in</button>
                        </fieldset>
                    </form>
                </Example>

                <SectionHeader heading="Aligned Form" />

                <p>