Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Chris Rodriguez
committed
May 26, 2015
1 parent
539d87e
commit 5818212
Showing
17 changed files
with
1,866 additions
and
788 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,152 @@ | ||
| --- | ||
| layout: element | ||
| title: Forms | ||
| date: 2015-05-12 16:02:35 | ||
|
|
||
| categories: elements | ||
| tags: | ||
| - atomic | ||
| - pattern | ||
| - forms | ||
|
|
||
| slug: forms | ||
| scssurl: "https://github.com/edx/ux-pattern-library/blob/master/_src/edx-pl/sass/components/_forms.scss" | ||
|
|
||
| description: Various examples of different form fields and their usage and options. | ||
|
|
||
| info: Forms allow users to interact with the interface, set preferences, and enter any necessary personal information. They also form the base of individual exercises within each class. | ||
| --- | ||
|
|
||
| <h3 class="hd-4 example-set-hd">Forms</h3> | ||
| <h4 class="hd-5">Text inputs</h4> | ||
| <div class="example-set"> | ||
| <h5 class="hd-6">Default</h5> | ||
| <fieldset class="fieldset"> | ||
| <legend class="group-legend is-hidden">Personal Details</legend> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="full_name_default">Your name</label> | ||
| <input class="input input-text" type="text" name="full_name_default" id="full_name_default" placeholder="e.g. Jane Doe" required> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="email_address_default">Email address</label> | ||
| <input class="input input-text" type="email" name="email_address_default" id="email_address_default" placeholder="e.g. jane@email.com" disabled> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="email_address_default_helper">Email address</label> | ||
| <input class="input input-text" type="email" name="email_address_default_helper" id="email_address_default_helper" placeholder="e.g. jane@email.com" aria-describedby="email_address_default_helper" required> | ||
| <div class="helper-text" id="email_address_default_helper"> | ||
| <p>Your email address will never be shared. We promise.</p> | ||
| </div> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="full_name_simple">Your name</label> | ||
| <input class="input input-text input-simple" type="text" name="full_name_simple" id="full_name_simple" placeholder="e.g. Jane Doe" required> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
|
|
||
| <h4 class="hd-5">Select/Dropdown/Combo</h4> | ||
| <div class="example-set"> | ||
| <fieldset class="fieldset"> | ||
| <legend class="group-legend is-hidden">Some select menus</legend> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="select_01">Select something already!</label> | ||
| <select class="input input-select replace-select" name="select_01" id="select_01"> | ||
| <option>- Choose one -</option> | ||
| <option value="Mary">Mary</option> | ||
| <option value="had">had</option> | ||
| <option value="a">a</option> | ||
| <option value="Little">Little</option> | ||
| <option value="Lamb">Lamb</option> | ||
| </select> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
|
|
||
| <h4 class="hd-5">Radio buttons and Checkboxes</h4> | ||
| <div class="example-set"> | ||
| <h5 class="hd-6">Radios</h5> | ||
| <fieldset class="fieldset form-group"> | ||
| <legend class="group-legend form-label">How may we send updates?</legend> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label inline-label" for="updates_mobile_text"> | ||
| <input type="radio" class="input input-radio replace-radio" name="updates_notifications" id="updates_mobile_text" value="Mobile text messages" aria-describedby="updates_mobile_text_helper" checked="checked"> | ||
| Text messages on my mobile phone | ||
| </label> | ||
| <div class="helper-text" id="updates_mobile_text_helper">Rates apply. Pelase consult your plan.</div> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label inline-label" for="updates_email"> | ||
| <input type="radio" class="input input-radio replace-radio" name="updates_notifications" id="updates_email" value="Email messages" aria-describedby="updates_email_helper"> | ||
| Email at matttracker@gmail.com | ||
| </label> | ||
| <div class="helper-text" id="updates_email_helper">We will never spam you. Pinky swear.</div> | ||
| </div> | ||
| </fieldset> | ||
|
|
||
| <h5 class="hd-6">Checkboxes</h5> | ||
| <fieldset class="fieldset form-group"> | ||
| <legend class="group-legend form-label">What are your goals with edX?</legend> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label inline-label is-selected" for="outsmart_prof"> | ||
| <input type="checkbox" class="input input-checkbox replace-checkbox is-selected" name="edx_goals" id="outsmart_prof" value="Outsmart those professors" checked="checked"> | ||
| Outsmart those professors | ||
| </label> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label inline-label" for="try_and_see"> | ||
| <input type="checkbox" class="input input-checkbox replace-checkbox" name="edx_goals" id="try_and_see" value="Try it out and see what I can learn"> | ||
| Try it out and see what I can learn | ||
| </label> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label inline-label is-selected" for="new_job"> | ||
| <input type="checkbox" class="input input-checkbox replace-checkbox is-selected" name="edx_goals" id="new_job" value="I need a new jobby job!" checked="checked"> | ||
| I need a new jobby job! | ||
| </label> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
|
|
||
| <h4 class="hd-5">Textareas</h4> | ||
| <div class="example-set"> | ||
| <fieldset class="fieldset"> | ||
| <legend class="group-lebend is-hidden">Storytime!</legend> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="textarea_01">Short textarea</label> | ||
| <textarea class="textarea input-textarea textarea-short" name="textarea_01" id="textarea_01"></textarea> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="textarea_02">Medium textarea</label> | ||
| <textarea class="textarea input-textarea textarea-medium" name="textarea_02" id="textarea_02"></textarea> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="textarea_03">Tall textarea</label> | ||
| <textarea class="textarea input-textarea textarea-tall" name="textarea_03" id="textarea_03"></textarea> | ||
| </div> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="textarea_04">Block textarea</label> | ||
| <textarea class="textarea input-textarea textarea-medium textarea-block" name="textarea_04" id="textarea_04"></textarea> | ||
| </div> | ||
| </fieldset> | ||
| </div> | ||
|
|
||
| <h4 class="hd-5">Sliders</h4> | ||
| <div class="example-set"> | ||
| <div class="form-group"> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="slider_01">Slide it</label> | ||
| <input type="range" class="slider input-slider" name="slider_01" id="slider_01" min="1" max="12" step="1" value="6" role="slider" aria-min="1" aria-max="12" aria-now="6"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h4 class="hd-5">Progress bars</h4> | ||
| <div class="example-set"> | ||
| <div class="form-group"> | ||
| <div class="field-wrapper"> | ||
| <label class="form-label" for="progress_01">You're doing great! Keep it up!</label> | ||
| <progress class="progress input-progress" name="progress_01" id="progress_01" role="progressbar" value="50" max="100" aria-valuenow="50" aria-valuemax="100"></progress> | ||
| </div> | ||
| </div> | ||
| </div> |
Oops, something went wrong.