Forms

Updated 4 months ago by Wizzi

Form

A form

<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" tabindex="0" class="hidden">
<label>I agree to the Terms and Conditions</label>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>

Field

A field is a form element containing a label and an input

<div class="ui form">
<div class="field">
<label>User Input</label>
<input type="text">
</div>
</div>

Fields

A set of fields can appear grouped together

<div class="ui form">
<div class="field">
<label>User Input</label>
<input type="text">
</div>
</div>

A form can contain a dropdown

<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>

Size

A form can vary in size

Options: mini, tiny, small, large, big, huge, massive (leave blank for default)

// Mini
<div class="ui mini form">
<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>


// Large
<div class="ui large form">
<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>

// Huge
<div class="ui huge form">
<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>

Equal Width Form

Forms can automatically divide fields to be equal width

<div class="ui equal width form">
<div class="fields">
<div class="field">
<label>Username</label>
<input type="text" placeholder="Username">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
</div>
<div class="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>


How did we do?