You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
694 lines
21 KiB
694 lines
21 KiB
---
|
|
layout : 'default'
|
|
css : 'form'
|
|
|
|
element : 'form'
|
|
elementType : 'collection'
|
|
|
|
title : 'Form'
|
|
description : 'A form displays a set of related user input fields in a structured way'
|
|
type : 'UI Collection'
|
|
|
|
themes : ['Default', 'Flat', 'Chubby', 'GitHub']
|
|
---
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/form.less" />
|
|
<script src="/javascript/form.js"></script>
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Form</h4>
|
|
<p>
|
|
Forms always include fields, and fields always contain form elements. Fields themselves may also include:
|
|
<a href="/elements/input.html">inputs</a>, standard form fields, <a href="/elements/label.html">labels</a>, <a href="/modules/dropdown.html">selection dropdowns</a>, textareas, as well as:
|
|
<a href="/modules/checkbox.html">checkboxes</a>, and <a href="/collections/message.html">message blocks</a>.
|
|
</p>
|
|
<div class="ui ignored warning top attached message">
|
|
<p>If you are looking for form validation, you should check out <a href="/modules/form.html">form validation</a>.</p>
|
|
</div>
|
|
<div class="ui ignored info attached message"><p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
|
|
</div>
|
|
<div class="ui ignored hidden divider"></div>
|
|
<div class="ui form">
|
|
<h4 class="ui dividing header">Personal Information</h4>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>Name</label>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<input type="text" name="first-name" placeholder="First Name">
|
|
</div>
|
|
<div class="field">
|
|
<input type="text" name="last-name" placeholder="Last Name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Gender</label>
|
|
<div class="ui selection dropdown">
|
|
<input type="hidden" name="gender">
|
|
<div class="default text">Gender</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item" data-value="male">Male</div>
|
|
<div class="item" data-value="female">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Biography</label>
|
|
<textarea></textarea>
|
|
</div>
|
|
<h4 class="ui dividing header">Account Info</h4>
|
|
<div class="two fields">
|
|
<div class="required field">
|
|
<label>Username</label>
|
|
<div class="ui left labeled icon input">
|
|
<input type="text" placeholder="Username">
|
|
<i class="user icon"></i>
|
|
</div>
|
|
</div>
|
|
<div class="required field">
|
|
<label>Password</label>
|
|
<div class="ui left labeled icon input">
|
|
<input type="password">
|
|
<i class="lock icon"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="ui block top attached header">Optional Survey</h4>
|
|
<div class="ui bottom attached secondary segment">
|
|
<div class="grouped fields">
|
|
<label for="alone">Are you a human?</label>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" checked="" name="alone">
|
|
<label>Yes</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="alone">
|
|
<label>No</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="ui dividing header">Settings</h4>
|
|
<h5 class="ui header">Privacy</h5>
|
|
<div class="field">
|
|
<div class="ui toggle checkbox">
|
|
<input type="radio" name="privacy">
|
|
<label>Allow <b>anyone</b> to see my account</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui toggle checkbox">
|
|
<input type="radio" name="privacy">
|
|
<label>Allow <b>only friends</b> to see my account</label>
|
|
</div>
|
|
</div>
|
|
<h5 class="ui header">Newsletter Subscriptions</h5>
|
|
<div class="field">
|
|
<div class="ui slider checkbox">
|
|
<input type="checkbox" name="top-posts">
|
|
<label>Top Posts This Week</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui slider checkbox">
|
|
<input type="checkbox" name="hot-deals">
|
|
<label>Hot Deals</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" name="hot-deals">
|
|
<label>I agree to the <a href="#">Terms of Service</a>.</label>
|
|
</div>
|
|
</div>
|
|
<div class="ui error message">
|
|
<div class="header">We noticed some issues</div>
|
|
</div>
|
|
<div class="ui submit button">Register</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Elements</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Field</h4>
|
|
<p>A field is a form element containing a label and an input</p>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>User Input</label>
|
|
<input type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Text Area</h4>
|
|
<p>A textarea uses the default form element</p>
|
|
<div class="ui form">
|
|
<div class="field">
|
|
<label>User Text</label>
|
|
<textarea></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Checkbox</h4>
|
|
<p><a href="/modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p>
|
|
<div class="evaluated code" data-type="javascript" data-label="true">
|
|
$('.ui.checkbox')
|
|
.checkbox()
|
|
;
|
|
</div>
|
|
<div class="ui form">
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label>Checkbox</label>
|
|
</div>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui slider checkbox">
|
|
<input type="checkbox" />
|
|
<label>Slider</label>
|
|
</div>
|
|
<label></label>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui toggle checkbox">
|
|
<input type="checkbox" />
|
|
<label>Toggle</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form example">
|
|
<h4 class="ui header">Select</h4>
|
|
<p>A selection dropdown, a type of <a href="/modules/dropdown.html">ui dropdown</a> can be used to allow for a selection from multiple choices</p>
|
|
<div class="evaluated code" data-type="javascript" data-label="true">
|
|
$('.ui.selection.dropdown')
|
|
.dropdown()
|
|
;
|
|
</div>
|
|
<div class="ui form">
|
|
<div class="ui selection dropdown">
|
|
<input type="hidden" name="gender">
|
|
<div class="default text">Gender</div>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu">
|
|
<div class="item" data-value="male">Male</div>
|
|
<div class="item" data-value="female">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Radio Box</h4>
|
|
<p>Radio boxes are styled forms of standard form radio controls.</p>
|
|
<div class="evaluated code" data-type="javascript" data-label="true">
|
|
$('.ui.radio.checkbox')
|
|
.checkbox()
|
|
;
|
|
</div>
|
|
<div class="ui form">
|
|
<div class="inline fields">
|
|
<label for="fruit">Select your favorite fruit:</label>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" checked />
|
|
<label>Apples</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Oranges</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Pears</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Grapefruit</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grouped fields">
|
|
<label for="fruit">Select your second favorite fruit:</label>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" checked />
|
|
<label>Apples</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Oranges</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Pears</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Grapefruit</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Text Block</h4>
|
|
<p>Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.</p>
|
|
<div class="ui form">
|
|
<div class="ui message">
|
|
<div class="header">We had some issues</div>
|
|
<ul class="list">
|
|
<li>Please enter your first name</li>
|
|
<li>Please enter your last name</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<h3 class="ui header">Form</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Loading</h4>
|
|
<p>If a form is in loading state, it will automatically show a loading indicator:</p>
|
|
|
|
<div class="ui loading form segment">
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Gender</label>
|
|
<div class="ui selection dropdown" tab-index="2">
|
|
<div class="default text">Select</div>
|
|
<i class="dropdown icon"></i>
|
|
<input type="hidden" name="gender">
|
|
<div class="menu">
|
|
<div class="item" data-value="male">Male</div>
|
|
<div class="item" data-value="female">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label>I agree to the terms and conditions</label>
|
|
</div>
|
|
</div>
|
|
<div class="ui submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Error</h4>
|
|
<p>If a form is in an error state, it will automatically show any error message blocks:</p>
|
|
<div class="ui error form segment">
|
|
<div class="ui error message">
|
|
<div class="header">Action Forbidden</div>
|
|
<p>You can only sign up for an account once with a given e-mail address.</p>
|
|
</div>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Gender</label>
|
|
<div class="ui selection dropdown">
|
|
<div class="default text">Select Gender</div>
|
|
<i class="dropdown icon"></i>
|
|
<input type="hidden" name="gender">
|
|
<div class="menu">
|
|
<div class="item" data-value="male">Male</div>
|
|
<div class="item" data-value="female">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label>I agree to the Terms and Conditions</label>
|
|
</div>
|
|
</div>
|
|
<div class="ui submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Warning</h4>
|
|
<p>If a form is in warning state, it will automatically show any warning message block:</p>
|
|
|
|
<div class="ui warning form segment">
|
|
<div class="ui warning message">
|
|
<div class="header">Could you check something!</div>
|
|
<ul class="list">
|
|
<li>You forgot your <b>first name</b></li>
|
|
<li>And also your <b>last name</b></li>
|
|
</ul>
|
|
</div>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Username</label>
|
|
<input placeholder="Username" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Password</label>
|
|
<input type="password">
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label>I agree to the Terms and Conditions</label>
|
|
</div>
|
|
</div>
|
|
<div class="ui submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="ui header">Form Fields</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Error</h4>
|
|
<p>Individual fields may contain an error state</p>
|
|
|
|
<div class="ui form">
|
|
<div class="two fields">
|
|
<div class="field error">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="field error">
|
|
<label>Gender</label>
|
|
<div class="ui selection dropdown">
|
|
<div class="default text">Select</div>
|
|
<i class="dropdown icon"></i>
|
|
<input type="hidden" name="gender">
|
|
<div class="menu">
|
|
<div class="item" data-value="male">Male</div>
|
|
<div class="item" data-value="female">Female</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inline error field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label>I agree to the Terms and Conditions</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>Individual fields may be disabled or read only</p>
|
|
|
|
<div class="ui form">
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="Read Only" readonly="readonly" type="text">
|
|
</div>
|
|
<div class="disabled field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Disabled" disabled="disabled" type="text">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Variations</h2>
|
|
|
|
<h3 class="ui header">Forms</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Fluid</h4>
|
|
<p>A form can take the width of its container</p>
|
|
<div class="ui fluid form segment">
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="ui submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Size</h4>
|
|
<p>A form can also be small or large</p>
|
|
<div class="ui small form segment">
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="ui submit button">Submit</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="ui large form segment">
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="ui submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A form on a dark background may have to invert its color scheme</p>
|
|
|
|
<div style="background-color: #000; padding: 15px;">
|
|
<div class="ui inverted form">
|
|
<div class="ui info message">
|
|
<div class="header">We had some issues</div>
|
|
<ul class="list">
|
|
<li>Please enter your first name</li>
|
|
<li>Please enter your last name</li>
|
|
</ul>
|
|
</div>
|
|
<div class="two fields">
|
|
<div class="field">
|
|
<label>First Name</label>
|
|
<input placeholder="First Name" type="text">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last Name</label>
|
|
<input placeholder="Last Name" type="text">
|
|
</div>
|
|
</div>
|
|
<div class="inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label>I agree to the terms and conditions</label>
|
|
</div>
|
|
</div>
|
|
<div class="ui submit button">Submit</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3 class="ui header">Fields</h3>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inline</h4>
|
|
<p>A field can have its label next to instead of above it.</p>
|
|
<div class="ui form">
|
|
<div class="inline field">
|
|
<label>Last name</label>
|
|
<input type="text" placeholder="Full Name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Required</h4>
|
|
<p>A field can format itself to show that an input is mandatory</p>
|
|
<div class="ui form">
|
|
<div class="required field">
|
|
<label>Last name</label>
|
|
<input type="text" placeholder="Full Name">
|
|
</div>
|
|
<div class="required inline field">
|
|
<div class="ui checkbox">
|
|
<input type="checkbox" />
|
|
<label>I agree to the terms and conditions</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Groups</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Fields</h4>
|
|
<p>Fields can exist together side by side</p>
|
|
<div class="ui ignored positive icon message">
|
|
<i class="mobile icon"></i>
|
|
<div class="content">
|
|
<h3 class="header">Responsive Element</h3>
|
|
<p>Split Width Fields automatically receive responsive styling, swapping to one field per row for mobile.</p>
|
|
</div>
|
|
</div>
|
|
<div class="ui form">
|
|
<div class="ui three fields">
|
|
<div class="field">
|
|
<label>First name</label>
|
|
<input type="text" placeholder="First Name">
|
|
</div>
|
|
<div class="field">
|
|
<label>Middle name</label>
|
|
<input type="text" placeholder="Middle Name">
|
|
</div>
|
|
<div class="field">
|
|
<label>Last name</label>
|
|
<input type="text" placeholder="Last Name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Grouped Fields</h4>
|
|
<p>Fields can be grouped to show related choices</p>
|
|
<div class="ui form">
|
|
<div class="grouped fields">
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Apples</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Oranges</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Pears</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" name="fruit" />
|
|
<label>Grapefruit</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inline</h4>
|
|
<p>Multiple fields may be inline in a row</p>
|
|
<div class="ui form">
|
|
<div class="inline fields">
|
|
<div class="field">
|
|
<label>Phone Number</label>
|
|
<input type="text" placeholder="(xxx)">
|
|
</div>
|
|
<div class="field">
|
|
<input type="text" placeholder="xxx">
|
|
</div>
|
|
<div class="field">
|
|
<input type="text" placeholder="xxxx">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|