Forms[ Variable Reference ]

Jellyfish applies styling to all standard form elements to make them look great without hassle or additional classes.

Use the $form-accent-color variable to apply accent color to form elements.

<form>
  <label for="text">Name</label>
  <input id="text" type="text" placeholder="First Name">
  <label for="email">Email Address</label>
  <input id="email" type="email" placeholder="email@jellyfishrule.com">
  <label for="select">My message is about</label>
  <select id="select">
    <option disabled selected>Please select</option>
    <option>Jellyfish</option>
    <option>CSS</option>
    <option>Coffee</option>
    <option>Other</option>
  </select>
  <label for="textarea">Any other comments?</label>
  <textarea id="textarea" rows="5" cols="30" placeholder="Message"></textarea>
  <div class="form-group">
    <label for="rememberme"><input id="rememberme" name="checkbox" type="checkbox"> Remember Me</label>
  </div>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>

Form elements

Input Type	Example
checkbox	Checkbox 1 Checkbox 2
color
date
datetime-local
time
email
number
password
radio	Radio 1 Radio 2
range
search
text
select
textarea

Working with checkboxes and radio buttons

Wrap checkboxes and radio buttons in a .form-group to preserve spacing.

<input type="text">
<div class="form-group">
  <label><input type="radio" name="radio" checked=""> Radio 1</label>
  <label><input type="radio" name="radio"> Radio 2</label>
</div>
<textarea></textarea>

Radio 1 Radio 2

Add the class .form-group-inline to make checkboxes and radio buttons inline-block elements rather than block.

<div class="form-group-inline">
  ...
</div>

Radio 1 Radio 2 Radio 3

Checkboxes and radio buttons will scale to remain in proportion to their label.

<label style="font-size:2em"><input type="radio" name="radio" checked=""> Radio 1</label>
<label style="font-size:1.5em"><input type="radio" name="radio"> Radio 2</label>
<label><input type="radio" name="radio"> Radio 3</label>

Radio 1 Radio 2 Radio 3

Fieldsets

Related form controls can be grouped in a <fieldset>. An optional <legend> can be used to display a name for the group.

<fieldset>
<legend>Login</legend>
  ...
</fieldset>

Remember me

Form Layout

You can layout forms with the same classes as the grid - with .row and .col elements.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <textarea rows="5" placeholder="Your Message"></textarea>
    </div>
  </div>
</form>

For a tighter column gutter, you can use the class .form-row.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <textarea rows="5" placeholder="Your Message"></textarea>
    </div>
  </div>
</form>

Disabled forms

Add the disabled attribute to an input to disable it.