一组实用的html5弹性表单和输入框

Flexy Forms and Inputs 常用于登记组织成员、工作应聘者信息等场合。

form, input, table

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*:before,
*:after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
body {
    font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
    color: #444;
    background: #f6f6f6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    outline: none;
    color: #aaa;
    text-decoration: none;
}
a:hover,
a:focus {
    color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
}
input {
    box-sizing: border-box;
}
button {
    background: #1A84D4;
    color: white;
}
form {
    margin: calc((10 / 16) * 1rem) auto;
}
fieldset {
    border: none;
    margin: 0;
    padding: 0;
    color: #466B75;
}
legend {
    border: none;
    margin-left: calc((10 / 16) * 1rem);
    margin-right: calc((10 / 16) * 1rem);
    padding-top: calc((20 / 16) * 1rem);
    padding-bottom: calc((20 / 16) * 1rem);
}
input,
button,
textarea,
select {
    border: none;
    padding: calc((10 / 16) * 1rem);
}
input:not([type="radio"]):not([type="checkbox"]),
button,
textarea,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
}
svg {
    height: auto;
    width: 20px;
    vertical-align: middle;
}
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: calc((20 / 16) * 1rem);
}
.content {
    padding: 3rem;
}
.logo {
    height: 150px;
    padding: calc((20 / 16) * 1rem);
    width: auto;
}
.form-group__errormsg {
    padding: calc((10 / 16) * 1rem);
}
.inputaddon-item {
    background: #1A84D4;
    fill: white;
}
.form--flexstretch,
.form-group.inputaddon,
.form-group--inline-btn {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
    background: rgba(63, 81, 181, 0.02);
    color: #78898B;
}
/*
 * =============================================
 * Layout: Grid & Form Group
 * =============================================
 */

.form-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.form-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
/*
 * =============================================
 * Pattern: Input Add-ons
 * =============================================
 */

.inputaddon-field {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}
.inputaddon-item {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    padding: calc((10 / 16) * 1rem);
    width: 20px;
}
.inputaddon-btn {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
}
.inputaddon-field--reverse {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}
.inputaddon-item--reverse {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
    order: 3;
}
.inputaddon-btn--reverse {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}
/*
 * =============================================
 * Pattern: Inline Input-Button Combo
 * =============================================
 */

.form-group--inline-btn {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
}
.form-group__input--inline-btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
/*
 * =============================================
 * Layout: Flex Stretch
 * =============================================
 */

.form--flexstretch {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 75vh;
}
.form__body--stretch {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.form-group--stretch {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 5%;
    -ms-flex: 1 0 5%;
    flex: 1 0 5%;
}
/*
 * =============================================
 * Layout: Long Label
 * =============================================
 */

.form-group--lnglabl {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.form-group__label--lng {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: 150px;
}
.form-group__input--lnglabl {
    width: 100%;
}
/*
 * =============================================
 * Layout: Button Group Inline
 * =============================================
 */

.form-group__btn--inline {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
}
.form-group__btn--inline:not(:first-child) {
    margin-left: calc((20 / 16) * 1rem);
}
/*
 * =============================================
 * Form Group Utilities
 * =============================================
 */

.form-group--spacebetween {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.form-group--gutter10 {
    margin: calc((10 / 16) * 1rem);
}
.form-group--push {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
/*
 * =============================================
 * Error Messages
 * =============================================
 */

.form-group__errormsg {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}
/*
 * =============================================
 * Error States
 * =============================================
 */

.has-errors-form-group {
    color: red;
}
/*
 * =============================================
 * Error State Themes
 * =============================================
 */

.form-group__errormsg--cinnabar {
    background: red;
    color: white;
}
/*
 * =============================================
 * Flush Form Groups
 * =============================================
 */

.form-group--flush {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.form-group--flush input {
    -webkit-transition: 250ms all ease-in-out;
    transition: 250ms all ease-in-out;
    outline: 1px solid gray;
}
.form-group--flush input:focus,
.form-group--flush input:hover {
    outline: 1px solid #444444;
    outline-offset: 0;
    background: #444444;
    color: white;
}
/*
 * =============================================
 * Global Utilities: Not Required;
 * =============================================
 */

.clearfix::before,
.clearfix::after {
    display: table;
    content: '';
}
.clearfix::after {
    clear: both;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
.hidden {
    position: absolute;
    overflow: hidden;
    width: 0;
    height: 0;
    pointer-events: none;
}

HTML

<h3>Inline Input-Button Combo</h3>
    <form>
        <div class="form-group form-group--inline-btn" role="search">
            <input type="search" class="form-group__input form-group__input--inline-btn" placeholder="Search Archives">

<button class="form-group__button form-group__button--inline-btn">search</button>
        </div>
    </form>

<h3>Input Add-ons</h3>

<span><b>Single</b>: Default, Reversed</span>
    <form class="form">
        <div class="form-group inputaddon">
            <label for="" class="visuallyhidden">Mailbox</label>
            <input class="inputaddon-field inputaddon-field--reverse" type="text">

<span class="inputaddon-item inputaddon-item--reverse" aria-hidden="true">
        <svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-icon="envelope-closed" data-container-transform="scale(1 1 ) translate(0 2 )" viewBox="0 -2 16 20" x="0px" y="0px"><path d="M0 0v2l8 4 8-4v-2h-16zm0 4v8h16v-8l-8 4-8-4z" transform="translate(0 2)"/><text x="0" y="31" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by useiconic.com</text><text x="0" y="36" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
      </span>
        </div>
    </form>
    <form class="form">
        <div class="form-group inputaddon">
            <label for="" class="visuallyhidden">Mailbox</label>
            <input class="inputaddon-field" type="text">

<span class="inputaddon-item" aria-hidden="true">
        <svg xmlns="https://www.w3.org/2000/svg" version="1.1" data-icon="envelope-closed" data-container-transform="scale(1 1 ) translate(0 2 )" viewBox="0 -2 16 20" x="0px" y="0px"><path d="M0 0v2l8 4 8-4v-2h-16zm0 4v8h16v-8l-8 4-8-4z" transform="translate(0 2)"/><text x="0" y="31" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">Created by useiconic.com</text><text x="0" y="36" fill="#000000" font-size="5px" font-weight="bold" font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif">from the Noun Project</text></svg>
      </span>
        </div>
    </form>

<span><b>Dual</b>: Default, Reversed</span>
    <form class="form">
        <div class="form-group inputaddon">
            <label for="" class="visuallyhidden">Mailbox</label>
            <input class="inputaddon-field" type="text">
            <button class="inputaddon-btn">Go</button>

</div>
    </form>

<h3>Flex Stretch Form</h3>
    <form class="form form--flexstretch">

<div class="form__body form__body--stretch">
            <fieldset>
                <legend>Personal Information</legend>

<div class="form-group form-group--stretch form-group--gutter10">
                    <label for="fname">First Name</label>
                    <input type="text" id="fname" placeholder="example: John">
                </div>

<fieldset>
                <legend>Mailing Information</legend>

<div class="form-group form-group--stretch form-group--gutter10">
                    <label for="address">Address</label>
                    <input type="text" id="address" placeholder="example: 555 Fake Street, Fake, NY 5555">
                </div>

<div class="form-group form-group--stretch form-group--gutter10">
                    <label for="country">Country</label>
                    <input type="text" id="country" placeholder="example: Merica">
                </div>
            </fieldset>
        </div>

<footer class="form-group form-group--push form-group--gutter10">
            <button type="submit">submit</button>
        </footer>
    </form>

<h3>Long Label w/Flex Stretch Form</h3>
    <form class="form form--flexstretch form--lnglabl">
        <div class="form__body form__body--stretch">
            <fieldset>
                <legend>Personal Information</legend>

<div class="form-group form-group--lnglabl form-group--gutter10">
                    <label for="fname" class="form-group__label form-group__label--lng">A Really long piece of content for the label should that ever become a problem</label>
                    <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">
                </div>

<div class="form-group form-group--lnglabl form-group--gutter10">
                    <label for="fname" class="form-group__label form-group__label--lng">Another Long Label asdassadsa dsadas adsa dadsadas</label>
                    <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">
                </div>

<div class="form-group form-group--lnglabl form-group--gutter10">
                    <label for="fname" class="form-group__label form-group__label--lng">First Name</label>
                    <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">
                </div>
            </fieldset>
        </div>

<footer class="form-group form-group--push form-group--gutter10">
            <button type="submit">Submit</button>
        </footer>
    </form>

<h3>Long Label Form with Grids, Flex Stretch Form & Errors</h3>
    <form class="form form--flexstretch">
        <div class="form__body form__body--stretch">
            <fieldset>
                <legend>Personal Information</legend>

<div class="form-grid">
                    <div class="form-group has-errors-form-group form-group--lnglabl form-group--gutter10">
                        <label for="fname" class="form-group__label form-group__label--lng">A Really long piece of content for the label should that ever become a problem</label>
                        <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">

<span class="form-group__errormsg form-group__errormsg--cinnabar">Error!</span>
                    </div>

<div class="form-group form-group--lnglabl form-group--gutter10">
                        <label for="fname" class="form-group__label form-group__label--lng">Another Long Label asdassadsa dsadas adsa dadsadas</label>
                        <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">
                    </div>

<div class="form-group has-errors-form-group form-group--lnglabl form-group--gutter10">
                        <label for="fname" class="form-group__label form-group__label--lng">First Name</label>
                        <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">

<span class="form-group__errormsg form-group__errormsg--cinnabar">Error!</span>
                    </div>
                </div>

<div class="form-grid">
                    <div class="form-group form-group--lnglabl form-group--gutter10">
                        <label for="fname" class="form-group__label form-group__label--lng">A Really long piece of content for the lable should that ever become a problem</label>
                        <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">
                    </div>

<div class="form-group form-group--lnglabl form-group--gutter10">
                        <label for="fname" class="form-group__label form-group__label--lng">Another Long Label asdassadsa dsadas adsa dadsadas</label>
                        <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">
                    </div>

<div class="form-group form-group--lnglabl form-group--gutter10">
                        <label for="fname" class="form-group__label form-group__label--lng">First Name</label>
                        <input type="text" id="fname" class="form-group__input form-group__input--lnglabl" placeholder="name must be 60 chars max">
                    </div>
                </div>

<footer class="form-group form-group--push form-group--gutter10">
            <button type="submit">Submit</button>
        </footer>
    </form>

<h3>App Login w/Flex Stretch Form & Inline Button Group</h3>
    <form class="form form--flexstretch">

<div class="form__body form__body--stretch">
            <fieldset>
                <legend>System Login</legend>

<div class="form-group form-group--stretch form-group--gutter10">
                    <label for="login-password">Password</label>
                    <input type="password" id="login-password" placeholder="5 digit account number">
                </div>

<div class="form-group form-group--gutter10">
                    <label for="login-status">
                        <input type="radio" name="login-status" value="logged-in"> Remember Me On This Computer
                    </label>
                </div>
            </fieldset>
        </div>

<footer class="form-group form-group--spacebetween form-group--gutter10">
            <button type="button" class="form-group__btn form-group__btn--inline">Create Account</button>
            <button type="submit" class="form-group__btn form-group__btn--inline">Login</button>
        </footer>
    </form>

<h3>Flex Stretch Form with Grids & Errors</h3>
    <form class="form form--flexstretch">
        <div class="form__body form__body--stretch">
            <fieldset>
                <legend>Personal Information</legend>

<div class="form-grid">
                    <div class="form-group form-group--stretch form-group--gutter10">
                        <label for="">First Name</label>
                        <input type="text" placeholder="First Name">
                    </div>

<div class="form-group has-errors-form-group form-group--stretch form-group--errors form-group--gutter10">
                        <label for="">Telephone</label>
                        <input type="tel" placeholder="(XXX)XXX-XXXX)">

<span class="form-group__errormsg form-group__errormsg--cinnabar">Error!</span>
                    </div>

<div class="form-group form-group--stretch form-group--gutter10">
                        <label for="">Personal Email</label>
                        <input type="email" placeholder="user@mailbox.com">
                    </div>

<div class="form-group form-group--stretch form-group--gutter10">
                        <label for="">Address</label>
                        <input type="text" placeholder="Mailing Address">
                    </div>

</div>
            </fieldset>

<fieldset>
                <legend>Billing Information</legend>

<div class="form-grid">
                    <div class="form-group form-group--stretch form-group--gutter10">
                        <label for="">Account Nameholder</label>
                        <input type="text" placeholder="Official Billing Name">
                    </div>

<div class="form-group has-errors-form-group form-group--stretch form-group--gutter10">
                        <label for="">Billing Address</label>
                        <input type="text" placeholder="Official Billing Address">

<span class="form-group__errormsg form-group__errormsg--cinnabar">Error!</span>
                    </div>
                </div>

<div class="form-group form-group--stretch form-group--gutter10">
                        <label for="gender-female" class="">Female
                            <input type="radio" name="gender" id="female" value="female">
                        </label>
                    </div>
                </div>

<div class="form-grid">
                    <div class="form-group form-group--stretch form-group--gutter10">
                        <label for="">Meter Reading</label>
                        <input type="text" placeholder="XXXXXXXXX">
                    </div>

<div class="form-group form-group--stretch form-group--gutter10">
                        <label for="">Billing Email</label>
                        <input type="email" placeholder="johndoe@mailbox.com">
                    </div>
                </div>
            </fieldset>

<fieldset>
                <legend>Additional Information</legend>

<div class="form-grid">
                    <div class="form-group form-group--stretch form-group--gutter10">
                        <label for="">Message</label>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                    </div>
                </div>
            </fieldset>
        </div>

<footer class="form-group form-group--push form-group--gutter10">
            <button type="submit">submit</button>
        </footer>
    </form>

<h3>Flush Aligned Form Inputs with Grids <span>(no <code>@media</code> query required)</span></h3>
    <form action="#" class="form">
        <fieldset>
            <legend class="visuallyhidden">Personal Information</legend>

<div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">First Name</label>
                    <input type="text" placeholder="First Name">
                </div>

<div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">Address</label>
                    <input type="text" placeholder="Address">
                </div>
            </div>

<div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">Email</label>
                    <input type="email" placeholder="Email">
                </div>
            </div>
        </fieldset>

<fieldset>
            <legend class="visuallyhidden">Contact Information</legend>
            <div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">Street Address</label>
                    <input type="search" placeholder="Street Address">
                </div>

<div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">City and State</label>
                    <input type="search" placeholder="City/State">
                </div>
            </div>
        </fieldset>

<fieldset>
            <legend class="visuallyhidden">Billing Information</legend>
            <div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">Billing Name</label>
                    <input type="text" placeholder="Billing Name">
                </div>

<div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">Billing Address</label>
                    <input type="text" placeholder="Billing Address">
                </div>

<div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">Billing Phone</label>
                    <input type="tel" placeholder="Billing Phone">
                </div>

<div class="form-group form-group--flush">
                    <label for="" class="visuallyhidden">Billing Email</label>
                    <input type="email" placeholder="Billing Email">
                </div>
            </div>
        </fieldset>
    </form>
    <span><b>Visually Hidden Labels & Legend</b></span>

<form action="#" class="form">
        <fieldset>
            <legend class="visuallyhidden">Personal Information</legend>

<div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="">First Name</label>
                    <input type="text" placeholder="First Name">
                </div>

<div class="form-group form-group--flush">
                    <label for="">Address</label>
                    <input type="text" placeholder="Address">
                </div>
            </div>

<div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="">Email</label>
                    <input type="email" placeholder="Email">
                </div>
            </div>
        </fieldset>

<fieldset>
            <legend class="visuallyhidden">Contact Information</legend>
            <div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="">Street Address</label>
                    <input type="search" placeholder="Street Address">
                </div>

<div class="form-group form-group--flush">
                    <label for="">City and State</label>
                    <input type="search" placeholder="City/State">
                </div>
            </div>
        </fieldset>

<fieldset>
            <legend class="visuallyhidden">Billing Information</legend>
            <div class="form-grid">
                <div class="form-group form-group--flush">
                    <label for="">Billing Name</label>
                    <input type="text" placeholder="Billing Name">
                </div>

<div class="form-group form-group--flush">
                    <label for="">Billing Address</label>
                    <input type="text" placeholder="Billing Address">
                </div>

<div class="form-group form-group--flush">
                    <label for="">Billing Phone</label>
                    <input type="tel" placeholder="Billing Phone">
                </div>

<div class="form-group form-group--flush">
                    <label for="">Billing Email</label>
                    <input type="email" placeholder="Billing Email">
                </div>
            </div>
        </fieldset>
    </form>
    <span><b>Visible Labels & Visually Hidden Legend</b></span>

</div>

Flexy Forms and Inputs 常用于登记组织成员、工作应聘者信息等场合。

form, input, table

编辑器支持Emmet

快捷键

Flexy Forms and Inputs 常用于登记组织成员、工作应聘者信息等场合。

form, input, table

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

使用React、MobX和jQuery实现的支付表单模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

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