Formの使い方

Text

<form class="ui form">
  <div class="field">
    <label>ID</label>
    <input type="text" name="id" placeholder="ID">
  </div/>
</form/>

.mini

<form class="ui mini form">
  <div class="field">
    <label>First name</label>
    <input type="text" name="first_name">
  </div/>
</form/>

.tiny

<form class="ui tiny form">
  <div class="field">
    <label>Last name</label>
    <input type="text" name="last_name">
  </div/>
</form/>

.small

<form class="ui small form">
  <div class="field">
    <label>Last name</label>
    <input type="text" name="last_name">
  </div/>
</form/>

.large

<form class="ui large form">
  <div class="field">
    <label>Last name</label>
    <input type="text" name="last_name">
  </div/>
</form/>

.big

<form class="ui big form">
  <div class="field">
    <label>Last name</label>
    <input type="text" name="last_name">
  </div/>
</form/>

.huge

<form class="ui huge form">
  <div class="field">
    <label>Last name</label>
    <input type="text" name="last_name">
  </div/>
</form/>

.massive

<form class="ui massive form">
  <div class="field">
    <label>Last name</label>
    <input type="text" name="last_name">
  </div/>
</form/>

Checkbox

<form class="ui form">
  <div class="field">
    <div class="ui checkbox">
      <input type="checkbox">
      <label>Checkbox</label>
    </div/>
  </div/>
</form/>

.slider

<form class="ui form">
  <div class="field">
    <div class="ui slider checkbox">
      <input type="checkbox">
      <label>Slider</label>
    </div/>
  </div/>
</form/>

.toggle

<form class="ui form">
  <div class="field">
    <div class="ui toggle checkbox">
      <input type="checkbox">
      <label>Toggle</label>
    </div/>
  </div/>
</form/>

Radio

<form class="ui form">
  <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>Pears</label>
      </div/>
    </div/>
  </div/>
</form/>

Select

<form class="ui form">
  <div class="field">
    <select>
      <option value="1">1st option</option>
      <option value="2">2nd option</option>
      <option value="3">3rd option</option>
    </select>
  </div/>
</form/>

Textarea

<form class="ui form">
  <div class="field">
    <label>Textarea</label>
    <textarea placeholder="Textarea"></textarea>
  </div/>
</form/>