Forms

Updated 4 years 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?