可访问/响应式/移动优先的表单元素设计

Accessible, responsive, mobile-first forms。包括普通输入框、邮件、链接、电话、正则表达输入、滑块、日期、时间、下拉选择框、单选框、按钮。

form

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2074
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #f0f0f0;
    box-sizing: border-box;
}
.container {
    width: 80%;
    margin: 0 auto;
    /* definition list base styles */
}
dl {
    max-width: 40em;
}
dt {
    background-color: #ddd;
    margin: 0;
    padding: 16px;
    color: #333;
    border-radius: 6px 6px 0 0;
}
dd {
    background-color: #f5f5f5;
    margin: 0 0 1em 0;
    padding: 16px;
    border: 1px solid #ddd;
    border-radius: 0 0 6px 6px;
}
dt h3 {
    margin: 0;
    /* basic label and input styles */
}
label {
    display: block;
    margin: 0 0 8px 0;
}
input {
    height: 1.75em;
    width: 93%;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 8px;
}
input[type="checkbox"] {
    width: 4%;
    height: 1em;
}
.note {
    font-size: 0.8em;
    color: #777;
    display: block;
    margin: 8px 0 0 0;
    /* fancy button styles */
}
button {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 6px;
    margin: 0 0 16px 0;
}
button h3 {
    margin: 0;
    padding: 9px;
    color: #fff;
}
button p {
    margin: 16px;
}
#basic_plan h3 {
    background-color: #2578cb;
}
#pro_plan h3 {
    background-color: #eca02a;
}
#guru_plan h3 {
    background-color: #bd1179;
}
@media all and (min-width: 640px) {
    label {
        display: inline-block;
        margin: 0 16px 0 0;
        width: 8em;
        text-align: right;
    }
    input {
        width: 60%;
    }
    .checkbox label {
        text-align: left;
        width: 100%;
    }
    .note {
        display: block;
        margin-left: 11.5em;
    }
    button {
        width: 32%;
        margin-left: 1%;
    }
    button:first-child {
        margin-left: 0;
    }
}

HTML

<div class="main-content container">
    <h1>Accessible, responsive, mobile-first forms</h1>
    <p>This collection of form elements are based on Aaron Gustafson's presentation <a href="https://plus.google.com/events/cp3298g4rgcrpaqcgfembbrj0uc" alt "Link to Aaron Gustafson's presentation Falling in love with forms">Falling in Love With Forms</a>        that he did for ChaDev. You can view the <a href="https://www.slideshare.net/AaronGustafson/falling-in-love-with-forms-bdconf-2014">related deck on slideshare.</a>
    </p>
    <p>Each element or group of elements is developed using progressive enhancment to be accessible.</p>
    <p>Be sure to read the notes under each field for more details on what's been done.</p>
    <hr />

<dl id="forms_list">

<dt><h3>Simple Label & Field group</h3></dt>
        <dd class="text">
            <label for="full_name">Full name</label>
            <input id="full_name" name="full_name" type="text" />
        </dd>

<dt><h3>Label, Field, & Note group</h3></dt>
        <dd class="email">
            <label for="email">Email</label>
            <input id="email" name="email" type="email" aria-describedby="email-note" />
            <em id="email-note" class="note">This note is linked to the field and label by the aria-describedby attribute.</em>
        </dd>

<dt><h3>Label, Field with placeholder text, Note group</h3></dt>
        <dd class="url">
            <label for="url">URL</label>
            <input id="url" name="url" type="url" aria-describedby="url-note" placeholder="Enter full url: https://www.example.com" />
            <em id="url-note" class="note">This example makes use of the placeholder attribute.</em>
        </dd>

<dt><h3>Phone number: using HTML5 input types</h3></dt>
        <dd class="tel">
            <label for="phone">Phone</label>
            <input id="phone" name="phone" type="tel" aria-describedby="phone-note" placeholder="Example: 000-000-0000" />
            <em id="phone-note" class="note">Setting the input type to "tel" will bring up the phone virtual keypad. FYI - the email and url fields above are set to their respective types too.</em>
        </dd>

<dt><h3>Number input with pattern attribute</h3></dt>
        <dd class="number">
            <label for="test">1 + 1 is:</label>
            <input id="test" name="test" type="number" pattern="[0-9]*" />
            <em id="test-note" class="note">Using a REGEX numbers only pattern ensures that Safari displays the number keypad.</em>
        </dd>

<dt><h3>Number range</h3></dt>
        <dd class="range">
            <label for="volume">Volume</label>
            <input id="volume" name="volume" type="range" min="1" max="11" step="1" value="1" />
            <em id="volume-note" class="note">Im looking for a solution to display the steps. Any suggestions?</em>
        </dd>

<dt><h3>Date selection field</h3></dt>
        <dd class="date">
            <label for="date">Pick a date</label>
            <input id="date" name="date" type="date" />
            <em id="date-note" class="note">You can add attriubutes define a date range.</em>
        </dd>

<dt><h3>Time selection field</h3></dt>
        <dd class="time">
            <label for="time">Pick a time</label>
            <input id="time" name="time" type="time" />
        </dd>

<dt><h3>Datalist with Select fallback</h3></dt>
        <dd class="datalist-select">
            <label for="state" id="state_label">Select a state</label>
            <datalist id="states">
                <select name="state" aria-describedby="state_label">
                    <option>Alabama</option>
                    <option>Alaska</option>
                    <option>Arizona</option>
                    <option>Arkansas</option>
                    <option>California</option>
                    
                </select>
                If other, please specify.
            </datalist>
            <input id="state" name="state" list="states" />
            <em id="date-note" class="note">You can add attriubutes define a date range.</em>
        </dd>

<dt>
      <h3>Accessible checkbox</h3>
    </dt>
        <dd class="checkbox">
            <label>
                <input type="checkbox" name="newsletter" value="yes" /> Sign up for our news letter.
            </label>
        </dd>

<dt>
      <h3>Fancy Button group</h3>
    </dt>
        <dd class="button">
            <button id="basic_plan" type="submit" value="basic">
                <h3>Basic Plan</h3>
                <p>This is the basic package that includes almost nothing.</p>
            </button>
            <button id="pro_plan" type="submit" value="basic">
                <h3>Pro Plan</h3>
                <p>This plan will give you more but it'll you cost more.</p>
            </button>
            <button id="guru_plan" type="submit" value="basic">
                <h3>Guru Plan</h3>
                <p>This is the most expensive plan. Trust us, you want it.</p>
            </button>
        </dd>
    </dl>

</div>

Accessible, responsive, mobile-first forms。包括普通输入框、邮件、链接、电话、正则表达输入、滑块、日期、时间、下拉选择框、单选框、按钮。

form

编辑器支持Emmet

快捷键

Accessible, responsive, mobile-first forms。包括普通输入框、邮件、链接、电话、正则表达输入、滑块、日期、时间、下拉选择框、单选框、按钮。

form

GentleForm演示： 一款可访问用户友好的表单验证JS库

一款移动友好的带动画效果的登录表单模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

GentleForm演示：一款可访问用户友好的表单验证JS库