Forms

Block forms

Forms are a notoriously tough thing to implement, especially if you want to include them in a fluid layout, so we tried extra hard to make everything work as painlessly as possible while giving you multiple layout choices as you build your forms.

A form in Ink starts with a <form> tag with the .ink-form class. The default layout is what we call a block form, which means that your labels will come above your fields. You can change this, don't worry, just keep reading, or jump to inline forms now.

After your <form> tag is in place, you start adding what Ink calls control groups with form labels and controls within. In practice, this means that inside your <form> you'll create a <div> with the .control-group class. This is the wrapper for the group comprised of your label, your form control (e.g. text field, checkbox, etc), eventual notes and other text elements.

Finally, you want to make sure that the actual form element is wrapped in a <div> with the class .control

Example Notice the placeholder text, which is created with the placeholder="Your text here" attribute of the <input> tag.

Code

<form class="ink-form">
    <fieldset>
        <div class="control-group">
            <label for="text-input">Text input</label> 
            <div class="control">
                <input id="text-input" type="text" placeholder="Please input some text">
            </div>
        </div>
    </fieldset>
</form>

File input field exception

If you need a file input field, to allow users to upload files, then you need a little extra code to make sure you maintain consistency across browsers. So, if you have an <input type="file">, then add an extra <div> with the class .input-file around it. That is besides your <div class="control">, not instead of it. It's a little extra markup, but it will solve your file input problems.

Example

Code

<div class="control-group">
    <label>File input</label> 
    <div class="control">
        <div class="input-file"><input type="file"></div>
    </div>
</div>

Adding tips

Adding tips to forms fields is easy. Just add the message by using a paragraph element with the .tip class. Keep it inside your control group and you're home safe.

Example A simple text input field with a small note.

Code

<div class="control-group">
    <label for="text-input">Text input</label> 
    <div class="control">
        <input id="text-input" type="text" placeholder="Please input some text">
    </div>
    <p class="tip">You can add help text to fields</p>
</div>

Block form with inline fields

You're not always going to just need form fields which are vertically stacked, so Ink lets you use layout classes to build different form field layouts. For that, you can easily use a <fieldset> with the .column-group and .gutters classes, and then, apply the .large-xx .medium-xx and .small-xx classes to your control-group <div>

Tip if you haven't yet, read the layout section of this documentation to have a better understanding of how you can easily fit your forms into multiple fluid columns.

Example As you can see, these form elements are in blocks (labels over field), but each control group is inline with the previous.

Code

<form action="#" class="ink-form">
    <fieldset class="column-group gutters">
        <div class="control-group large-33 medium-33 small-100">
            <label for="name">Name</label>
            <div class="control">
                <input type="text" id="name">
            </div>
        </div>
        <div class="control-group large-33 medium-33 small-100">
            <label for="phone">Phone</label>
            <div class="control">
                <input type="text" id="phone">
            </div>
        </div>
        <div class="control-group large-33 medium-33 small-100">
            <label for="email">Email</label>
            <div class="control">
                <input type="text" id="email">
            </div>
        </div>
    </fieldset>
</form>

Inline form

Inline forms are the ones where the labels are next to the controls, instead of on top. The basic structure is the same as for block forms, so read above for the basics.

Building an inline form structure is as simple as using the Layout classes and simply making space for your labels and your controls, using the appropriate large, medium and small width classes.

Each of your .control-group elements, will now also have the .column-group and .gutters classes, allowing you to then define the width in the <label> and c.ontrol items.

So, to make it really simple: build a form just like before, but now define a width for your labels and another for your fields, such as 20/80 or 30/70, or whatever better fits your layout.

Example Here we made a 20% column for the labels aligning their text to the right-hand side and then added an 80% column for the form controls. We used the utility class .content-right to flush the labels right. Read more about these utilities in the Layout and Typography sections.

Example

Code

<form class="ink-form">
    <fieldset>
        <div class="control-group column-group gutters">
            <label class="large-20 content-right" for="phone">Phone:</label> 
            <div class="control large-80">
                <input type="text" id="phone">
            </div>
        </div>
    </fieldset>
</form>

Inline form with inline fields

To achieve a form in multiple columns in which everything is inline, you need to do some column nesting. Just add an extra <div> with the column-group and gutters classes within your control-group to create further columns of each label/field pair.

So, basically, you first think in your major columns, in our example we have three, and then, inside each column, you build your inline label/field pair.

Example

Code

<form action="#" class="ink-form">
    <fieldset class="column-group gutters">
        
        <div class="control-group large-33 medium-33 small-100">
            <div class="column-group gutters">
                <label for="name" class="large-20 content-right">Name</label>
                <div class="control large-80">
                    <input type="text" id="name">
                </div>
            </div>
        </div>

        <div class="control-group large-33 medium-33 small-100">
            <div class="column-group gutters">
                <label for="phone" class="large-20 content-right">Phone</label>
                <div class="control large-80">
                    <input type="text" id="phone">
                </div>
            </div>
        </div>

        <div class="control-group large-33 medium-33 small-100">
            <div class="column-group gutters">
                <label for="email" class="large-20 content-right">Email</label>
                <div class="control large-80">
                    <input type="text" id="email">
                </div>
            </div>
        </div>

    </fieldset>
</form>

Yes, it gets a little complicated, but it's very powerful and flexible. If you indent your code and use empty lines to separate your blocks, like we did in the example above, you'll be fine.

Required fields and warnings

Ink forms also have utility classes to address and highlight warnings and required fields. So if you have a required field, use the field wrapping element .control-group to add a .required class. Generated content will be added to mark your field as required, so you don't need to do it manually.

Example Notice the red asterisk denoting the text input field as mandatory. Don't forget to add a simple instruction letting your users know what the asterisks mean.

Code

<form action="#" class="ink-form">
    <fieldset class="column-group gutters">
        <div class="control-group required validation error">
            <label for="text-input">Text input</label> 
            <div class="control">
                <input id="text-input" type="text" placeholder="Please input some text">
            </div>
            <p class="tip">You can add help text to fields</p>
        </div>
    </fieldset>
</form>

If something doesn't quite validate or is completely filled out, you can warn users, using color coding and adding an error or warning message. Just add two more classes to the .control-group wrapper. Use the .validation class to mark the field for validation and either .warning or .error for the styling (yellow or red color codes, as defaults, respectively).

Add a tip just as explained above to explain what the error is.

Example

Code

<form action="#" class="ink-form">
    <fieldset class="column-group gutters">
        <div class="control-group required validation warning">
            <label for="text-input">Text input</label> 
            <div class="control">
                <input id="text-input" type="text" placeholder="Please input some text">
            </div>
            <p class="tip">Warn about something</p>
        </div>
        <div class="control-group required validation error">
            <label for="text-input">Text input</label> 
            <div class="control">
                <input id="text-input" type="text" placeholder="Please input some text">
            </div>
            <p class="tip">This field is required</p>
        </div>
    </fieldset>
</form>

Checkboxes and radio buttons

Lists of checkboxes or radio buttons follow the same structure as the previous examples, only here your inputs should be wrapped by a <ul> with the .control class, in place of the <div>. Then, each of your checkbox/label pairs needs to be inside an <li>

If you need to add a label to the field group, add a <p> element with the label class. This pseudo-label will also display an icon if the control group contains required fields, so don't forget to add this, if your checkboxes are a required input.

For your giving your checkbox group a title, use the <legend> tag.

Group of Checkboxes

Example

Note To remove any undesired paddings or list-style add the class .unstyled to the <ul>, like shown in the lists section.

Code

<form action="" class="ink-form">
    <fieldset>
        <legend>Group of checkboxes</legend>
        <div class="control-group">
            <p class="label">Please select one or more options</p>
            <ul class="control unstyled">
                <li>
                    <input type="checkbox" id="cb1">
                    <label for="cb1">Option 1</label>
                </li>
                ...
            </ul>
        </div>
    </fieldset>                     
</form>

Group of Radio Buttons

Example

Code

<form action="" class="ink-form">
    <fieldset>
        <legend>Group of checkboxes</legend>
        <div class="control-group">
            <p class="label">Please select one of these options</p>
            <ul class="control unstyled">
                <li>
                    <input type="radio" id="rb1">
                    <label for="rb1">Option 1</label>
                </li>
                ...
            </ul>
        </div>
    </fieldset>                     
</form>

Inline Checkboxes & Radio Buttons

If you prefer to have your checkboxes or radio buttons inline, just add the .inline class to the containing <ul>.

Example with checkboxes.

Code

<form action="" class="ink-form">
  <fieldset>
    <legend>Group of checkboxes</legend>
    <div class="control-group">
      <p class="label">Please select one or more options</p>
      <ul class="control unstyled inline">
        <li>
          <input type="checkbox" id="cb1">
          <label for="cb1">Option 1</label>
        </li>
        ...
      </ul>
    </div>
  </fieldset>                     
</form>

Buttons

Your forms will need at least one button. You can create a button with one of several markup elements, although <button> is most appropriate. Just add the .ink-button class for the button layout and then use a utility class to give it a specific meaning. You can find out about color coding utility classes in the Typography section.

Example

Code

<button class="ink-button">Cancel Dinner</button> <!-- A default button -->
<button class="ink-button blue">Execute Order 66</button> <!-- A blue button -->
<button class="ink-button red" disabled>Disable Missiles</button> <!-- A red button that's disabled -->

Button Groups

Need to group buttons? Ink has an easy solution for that. Wrap your .ink-buttons in a <div> with the .button-group class, this will render your buttons neatly grouped with rounded left corners on the first button and rounded right corners on the last one.

Example

Code

<div class="button-group">
    <button class="ink-button">left</button>
    <button class="ink-button">middle</button>
    <button class="ink-button">right</button>
</div>

Inline button groups

To achieve a button toolbar look wrap your button groups in a <div> with the .button-toolbar class. Just create the toolbar and then add as many .button-group within it as you need.

Example

Code

<div class="button-toolbar">
    <div class="button-group">
        <button class="ink-button"><span class="icon-file"></span></button>
        <button class="ink-button"><span class="icon-save"></span></button>
    </div>

    <div class="button-group">
        <button class="ink-button"><span class="icon-bold"></span></button>
        <button class="ink-button"><span class="icon-italic"></span></button>
        <button class="ink-button"><span class="icon-underline"></span></button>
    </div>

    <div class="button-group">
        <button class="ink-button"><span class="icon-align-left"></span></button>
        <button class="ink-button"><span class="icon-align-center"></span></button>
        <button class="ink-button"><span class="icon-align-right"></span></button>
        <button class="ink-button"><span class="icon-align-justify"></span></button>
    </div>
</div>

Prepended and appended inputs

Case you need to append or prepend buttons or symbols to your form input, Ink has got that covered aswell.

To achieve that, and depending on your use case, just add the class .append-button, .prepend-button, .append-symbol or .prepend-symbol to the .control element. After that, wrap your <input> in a <span> and you're good to go.

Buttons

So to append or prepend buttons follow these examples.

Example

Code

<!-- Append button -->
<div class="control-group">
    <div class="column-group gutters">
        <label for="name" class="large-20 content-right">Label</label>
        <div class="control large-80 append-button">
            <span><input type="text" id="name"></span>
            <button class="ink-button"><i class="icon-search"></i> Search</button>
        </div>
    </div>
</div>

<!-- Prepend button -->
<div class="control-group">
    <div class="column-group gutters">
        <label for="phone" class="large-20 content-right">Label</label>
        <div class="control large-80 prepend-button">
            <input type="submit" value="Search" class="ink-button">
            <span><input type="text" id="phone"></span>
        </div>
    </div>
</div>

Symbols

For symbols, just choose one from the icon section and place it inside the <span> element.

Example

Code

<!-- Append Symbol -->
<div class="control-group">
    <div class="column-group gutters">
        <label for="email" class="large-20 content-right">Email</label>
        <div class="control large-80 append-symbol">
            <span>
                <input type="text" id="email">
                <i class="icon-envelope-alt"></i>
            </span>
        </div>
    </div>
</div>

<!-- Prepend Symbol -->
<div class="control-group">
    <div class="column-group gutters">
        <label for="email" class="large-20 content-right">Email</label>
        <div class="control large-80 prepend-symbol">
            <span>
                <input type="text" id="email">
                <i class="icon-envelope-alt"></i>
            </span>
        </div>
    </div>
</div>