Forms

Basic

This is a basic form composed of the <form> tag containing various <label>, <input>, <select> and <textarea> fields.

Each label and input pair are wrapped in a .form-item class that adds bottom margin and keeps our respective labels and inputs in their own block so no content wraps around them.

You can change the $placeholder-color variable in the /helpers/_variables.scss file to adjust the placeholder text color.

Preview

Code

<form>
    <div class="form-item">
      <label for="name">Name:</label>
      <input id="name" type="text" name="name" placeholder="John Doe" />
    </div>

    <div class="form-item">
      <label for="email">Email:</label>
      <input id="email" type="email" name="email" placeholder="john_doe@example.com" />
    </div>

    <div class="form-item">
      <label for="website">Website:</label>
      <input id="website" type="text" name="website" placeholder="http://example.com" disabled />
    </div>

    <div class="form-item">
      <label>Gender:</label>
      <input id="male" type="radio" name="gender" value="Male" /> <label for="male">Male</label> <br />
      <input id="female" type="radio" name="gender" value="Female" /> <label for="female">Female</label>
    </div>

    <div class="form-item">
      <label>Inquiry:</label>
      <input id="quote" type="checkbox" name="gender" value="Male" /> <label for="quote">Quote</label> <br />
      <input id="question" type="checkbox" name="gender" value="Female" /> <label for="question">Question</label>
    </div>

    <div class="form-item">
      <select>
        <option name="Test">Test</option>
      </select>
    </div>

    <div class="form-item">
      <label for="message">Message:</label>
      <textarea id="message" name="message" cols="40" rows="6"></textarea>
    </div>

    <input type="submit" value="Submit" class="btn">
</form>

Styled

A styled form can be created by using the .form class. We have isolated custom form styles into their own class because many JavaScript plugins use forms, and we wanted to avoid styling conflicts.

Preview

Code

<form class="form">
    <div class="form-item">
      <label for="name-2">Name:</label>
      <input id="name-2" type="text" name="name" placeholder="John Doe" />
    </div>

    <div class="form-item">
      <label for="email-2">Email:</label>
      <input id="email-2" type="email" name="email" placeholder="john_doe@example.com" />
    </div>

    <div class="form-item">
      <label for="website-2">Website:</label>
      <input id="website-2" type="text" name="website" placeholder="http://example.com" disabled />
    </div>

    <div class="form-item">
      <label>Gender:</label>
      <input id="male-2" type="radio" name="gender" value="Male" /> <label for="male-2">Male</label> <br />
      <input id="female-2" type="radio" name="gender" value="Female" /> <label for="female-2">Female</label>
    </div>

    <div class="form-item">
      <label>Inquiry:</label>
      <input id="quote-2" type="checkbox" name="gender" value="Male" /> <label for="quote-2">Quote</label> <br />
      <input id="question-2" type="checkbox" name="gender" value="Female" /> <label for="question-2">Question</label>
    </div>

    <div class="form-item">
      <select>
        <option name="Test">Test</option>
      </select>
    </div>

    <div class="form-item">
      <label for="message-2">Message:</label>
      <textarea id="message-2" name="message" cols="40" rows="6"></textarea>
    </div>

    <input type="submit" value="Submit" class="btn">
</form>

Fieldset

Wrapping your form content with a <fieldset> tag allows you to group related elements inside of your form. Adding the <legend> tag allows you to denote each section with a small heading.

Preview

Inline

Adding the class .form-inline to your <form> element allows you to display your form elements in an inline fashion. By default, the .form-inline class will give each <label> element a width of 100px.

Preview

Documentation

Learn how to use all of great features that Concise provides.

Forms

Basic

Styled

Fieldset

Inline