|
|
---layout : 'default'css : 'form'
title : 'Form'description : 'A form is a collection of user input elements'type : 'UI Collection'---<script src="/javascript/form.js"></script>
<%- @partial('header') %>
<div class="main container"> <div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">Elements</a> <a class="item">States</a> <a class="item">Variations</a> <a class="item">Groups</a> </div> </div> <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> <p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p> <div class="ui ignored warning 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 message"> <p>This example uses a <a href="/elements/segment.html">ui segment</a> to add the padding and background color. This is not required.</p> </div> <div class="ui form segment"> <div class="field"> <label>Username</label> <div class="ui left labeled icon input"> <input type="text" placeholder="Username"> <i class="user icon"></i> <div class="ui corner label"> <i class="icon asterisk"></i> </div> </div> </div> <div class="field"> <label>Password</label> <div class="ui left labeled icon input"> <input type="password"> <i class="lock icon"></i> <div class="ui corner label"> <i class="icon asterisk"></i> </div> </div> </div> <div class="ui error message"> <div class="header">We noticed some issues</div> </div> <div class="ui blue submit button">Login</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">Javascript Checkbox</h4> <p><a href="/modules/checkbox.html">UI Checkboxes</a> allow a user to select individual options in a form</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="example"> <a id="html-checkbox"></a> <h4 class="ui header">HTML Only Checkbox</h4> <p>Using checkboxes with HTML only, you must match the <code>for</code> attribute of your label to the <code>id</code> attribute of your checkbox. <div class="ui form"> <div class="inline field"> <div class="ui checkbox"> <input id="check1" type="checkbox" /> <label for="check1">Checkbox</label> </div> </div> <div class="inline field"> <div class="ui slider checkbox"> <input id="check2" type="checkbox" /> <label for="check2">Slider</label> </div> <label></label> </div> <div class="inline field"> <div class="ui toggle checkbox"> <input id="check3" type="checkbox" /> <label for="check3">Toggle</label> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Radio Box</h4> <p>Radio boxes are a type of <a href="/modules/checkbox.html">UI Checkboxes</a> allowing only exclusive choice of options</p> <div class="evaluated code" data-type="javascript" data-label="true"> $('.ui.radio.checkbox') .checkbox() ; </div> <div class="ui form"> <div class="grouped inline fields"> <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">HTML Only Radio Box</h4> <p>Using checkboxes with HTML only, you must match the <code>for</code> attribute of your label to the <code>id</code> attribute of your checkbox. <div class="ui form"> <div class="grouped inline fields"> <div class="field"> <div class="ui radio checkbox"> <input id="choice-1" type="radio" name="fruit" checked /> <label for="choice-1">Apples</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input id="choice-2" type="radio" name="fruit" /> <label for="choice-2">Oranges</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input id="choice-3" type="radio" name="fruit" /> <label for="choice-3">Pears</label> </div> </div> <div class="field"> <div class="ui radio checkbox"> <input id="choice-4" type="radio" name="fruit" /> <label for="choice-4">Grapefruit</label> </div> </div> </div> </div> </div>
<div class="no 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 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 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 fluid selection dropdown"> <div class="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 blue 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 fluid selection dropdown"> <div class="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 blue 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 error fields"> <div class="field"> <label>First Name</label> <input placeholder="First Name" type="text"> <div class="ui red pointing above ui label">Enter a first name</div> </div> <div class="field"> <label>Last Name</label> <input placeholder="Last Name" type="text"> <div class="ui red pointing above ui label">Enter a last name</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 blue 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 segment"> <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 fluid selection dropdown"> <div class="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> </div>
<div class="example"> <h4 class="ui header">Disabled</h4> <p>Individual fields may be disabled or read only</p>
<div class="ui form segment"> <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 blue 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 blue small 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 blue 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: #333333; 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 blue 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">Date</h4> <p>A field can let users know they are for dates</p> <div class="ui form"> <div class="date field"> <label>Birthday</label> <input type="text" placeholder="xx/xx/xxxx"> </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>Grouped 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">Fields Grid</h4> <p>Fields can be aligned to a <a href="/collections/grid.html">ui grid</a></p> <div class="ui form"> <div class="fields"> <div class="four wide field"> <label>First name</label> <input type="text" placeholder="First Name"> </div> <div class="four wide field"> <label>Middle name</label> <input type="text" placeholder="Middle Name"> </div> <div class="eight wide 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 inline fields"> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="fruit" /> <label></label> </div> <label> Apples</label> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="fruit" /> <label></label> </div> <label> Oranges</label> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="fruit" /> <label></label> </div> <label> Pears</label> </div> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="fruit" /> <label></label> </div> <label> Grapefruit</label> </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>
|
