Forms

Example block-level help text here.

<form class="form">
  <div class="form-group">
    <label>Normal input</label>
    <input type="text" placeholder="Text" class="form-control">
  </div>

  <div class="form-group">
    <label>E-mailadress</label>
    <input type="email" placeholder="Email" class="form-control">
  </div>

  <div class="form-group">
    <label>Password</label>
    <input type="password" placeholder="Password" class="form-control">
  </div>

  <div class="form-group">
    <label>Datum</label>
    <input type="date" class="form-control">
  </div>

  <div class="form-group">
    <label>Tid</label>
    <input type="time" class="form-control">
  </div>

  <div class="form-group">
    <label>Select</label>
    <select class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <div class="form-group">
    <label>File</label>
    <input type="file">
    <p class="help-block">Example block-level help text here.</p>
  </div>

  <button type="submit" class="btn btn-default">Submit</button>
</form>
<select>
  <option>A first not real article title</option>
  <option>A second article, also not real</option>
  <option>A third longer article for you</option>
</select>
<form class="form">
  <div class="form-group">
    <label>Stor input</label>
    <input type="text" placeholder=".input-lg" class="form-control input-lg">
  </div>
  <div class="form-group">
    <label>Normal input</label>
    <input type="text" placeholder="input" class="form-control">
  </div>
  <div class="form-group">
    <label>Liten input</label>
    <input type="text" placeholder=".input-sm" class="form-control input-sm">
  </div>
</form>
<form class="form">
  <div class="form-group has-success">
    <label>Success input</label>
    <input type="text" placeholder="Success input" class="form-control">
  </div>
  <div class="form-group has-warning">
    <label>Warning input</label>
    <input type="text" placeholder="Warning input" class="form-control">
  </div>
  <div class="form-group has-error">
    <label>Error input</label>
    <input type="text" placeholder="Error input" class="form-control">
  </div>
  <div class="form-group">
    <label>Disabled input</label>
    <input type="text" disabled="disabled" placeholder="Disabled" class="form-control">
  </div>
</form>
<div class="form-group">
  <textarea class="form-control">This is a textarea</textarea>
</div>
<form class="form">
  <div class="form-group">
    <div class="form-group-checkbox">
      <input id="checkbox" type="checkbox">
      <label for="checkbox">Checkbox</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-checkbox">
      <input id="checkboxchecked" type="checkbox" checked="checked">
      <label for="checkboxchecked">Checkbox checked</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-checkbox">
      <input id="checkboxdisabled" type="checkbox" disabled="disabled">
      <label for="checkboxdisabled">Checkbox disabled</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-radio">
      <input id="radio" type="radio" name="radios">
      <label for="radio">radio</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-radio">
      <input id="radiochecked" type="radio" name="radios" checked="checked">
      <label for="radiochecked">radio checked</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-radio">
      <input id="radiodisabled" type="radio" name="radios" disabled="disabled">
      <label for="radiodisabled">radio disabled</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-checkbox">
      <input id="switch" type="checkbox" class="switch">
      <label for="switch">Switch</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-checkbox">
      <input id="switchchecked" type="checkbox" checked="checked" class="switch">
      <label for="switchchecked">Switch checked</label>
    </div>
  </div>
  <div class="form-group">
    <div class="form-group-checkbox">
      <input id="switchdisabled" type="checkbox" disabled="disabled" class="switch">
      <label for="switchdisabled">Switch disabled</label>
    </div>
  </div>
</form>