Form Element

Forms

We set out in Foundation 3 to create an easy to handle, powerful, and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything you need.

The Basics

Form elements in Foundation 3 are styled based on their type attribute rather than .input-text classes, so the Scss/CSS is much simpler.

Inputs in Foundation 3 have another major change — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile:

• You can size inputs using column sizes, like .six.
• You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing.

Here’s an example of a form layout controlled with rows and columns.

• This is a label. Address

  Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of .right to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of .inline will have it vertically center against an input.

  Address Name:

  City:

  ZIP:

•  <!-- Row Layout for forms --> <form>   <label>This is a label.</label>   <input type="text" placeholder="Standard Input" />   <label>Address</label>   <input type="text" class="twelve" placeholder="Street" />   <div class="row">     <div class="six columns">       <input type="text" placeholder="City" />     </div>     <div class="three columns">       <input type="text" placeholder="State" />     </div>     <div class="three columns">       <input type="text" placeholder="ZIP" />     </div>   </div>   <textarea placeholder="Message"></textarea> </form>  <!-- Right aligned and inline labels --> <form>   <div class="row">     <div class="two mobile-one columns">       <label class="right inline">Address Name:</label>     </div>     <div class="ten mobile-three columns">       <input type="text" placeholder="e.g. Home" class="eight" />     </div>   </div>   <div class="row">     <div class="two mobile-one columns">       <label class="right inline">City:</label>     </div>     <div class="ten mobile-three columns">       <input type="text" class="eight" />     </div>   </div>   <div class="row">     <div class="two mobile-one columns">       <label class="right inline">ZIP:</label>     </div>     <div class="ten mobile-three columns">       <input type="text" class="three" />     </div>   </div> </form> 

Simple elements that can contain all or part of a form to create better division.

• Fieldset Name

  This is a label. Address

•  <form>   <fieldset>      <legend>Fieldset Name</legend>      <label>This is a label.</label>     <input type="text" placeholder="Standard Input" />      <label>Address</label>     <input type="text" />     <input type="text" class="six" />    </fieldset> </form> 

Foundation forms support actions tied to buttons, and prefix / postfix labels, through a versatile approach using special grid properties. Essentially you can use a ‘collapsed’ row to create label / action / input combinations. Here are a few examples.

Note: for these prefix and postfix labels we’re using the mobile grid to size our labels correctly on small devices.

• Input with a prefix character

  #

  Input with a postfix label

  .com

•  <!-- Prefix label --> <label>Input with a prefix character</label> <div class="row">   <div class="four columns">     <div class="row collapse">       <div class="two mobile-one columns">         <span class="prefix">#</span>       </div>       <div class="ten mobile-three columns">         <input type="text" />       </div>     </div>   </div> </div>  <!-- Postfix label --> <label>Input with a postfix label</label> <div class="row">   <div class="five columns">     <div class="row collapse">       <div class="nine mobile-three columns">         <input type="text" />       </div>       <div class="three mobile-one columns">         <span class="postfix">.com</span>       </div>     </div>   </div> </div>  <!-- Postfix action --> <div class="row collapse">   <div class="ten mobile-three columns">     <input type="text" />   </div>   <div class="two mobile-one columns">     <a class="button expand postfix">Search</a>   </div> </div> 

Input with a postfix action (button)

Foundation includes error states for labels, inputs and messaging that you can have your app generate programatically.

You can attach a class of .error either to the individual elements (label, input, small) or to a column/div.

• Error Invalid entry

  Another Error Invalid entry

•  <div class="row">   <div class="five columns">     <label class="error">Error</label>     <input type="text" class="error" />     <small class="error">Invalid entry</small>   </div>    <div class="five columns end error">     <label>Another Error</label>     <input type="text" />     <small>Invalid entry</small>   </div> </div> 

Here’s an example of how you can use the grid to build out a complex form layout.

• Large Form Example

  Name Occupation Twitter

  @

  URL

  .com

  Field with Error Invalid entry

  Another Error Invalid entry

  Address

  CA

•  <form>   <fieldset>     <legend>Large Form Example</legend>      <div class="row">       <div class="five columns">          <label>Name</label>         <input type="text">          <label>Occupation</label>         <input type="text">          <label>Twitter</label>         <div class="row collapse">           <div class="two mobile-one columns">             <span class="prefix">@</span>           </div>           <div class="ten mobile-three columns">             <input type="text" placeholder="foundationzurb">           </div>         </div>          <label>URL</label>         <div class="row collapse">           <div class="nine mobile-three columns">             <input type="text" placeholder="foundation.zurb">           </div>           <div class="three mobile-one columns">             <span class="postfix">.com</span>           </div>         </div>        </div>        <div class="five columns">          <label class="error">Field with Error</label>         <input type="text" class="error">         <small class="error">Invalid entry</small>          <div class="error">           <label>Another Error</label>           <input type="text">           <small>Invalid entry</small>         </div>        </div>     </div>      <label>Address</label>     <input type="text" placeholder="Street (e.g. 123 Awesome St.)">      <div class="row">       <div class="six columns">         <input type="text" placeholder="City">       </div>       <div class="two columns">         <select>           <option>CA</option>         </select>       </div>       <div class="four columns">         <input type="text" placeholder="ZIP">       </div>     </div>    </fieldset> </form> 

Creating easy to style custom form elements is so crazy easy, it’s practically a crime. Just add a class of «custom» to a form and, if you want, jquery.foundation.forms.js will do everything.

• Once initialized it will look for any checkbox, radio button, or select element and replace it with custom markup that Foundation provides styles for. It will even correctly respect and apply default states for radio, checkbox and select elements. You can use the «checked» or «selected» properties just like normal.

  If you want to avoid a potential flash (waiting for js to load and replace your default elements) you can supply the custom markup as part of the page, and the js will instead simply map the custom elements to the inputs.

  If you dynamically add inputs to your page you’ll need to update the custom markup. You can safely call the previous function again, but to improve performance you can also scope it to only update a single input.

•  <form class="custom">   <!-- No custom markup applied -->   <label for="radio1">     <input name="radio1" type="radio" id="radio1"> Radio Button 1   </label>    <!-- Above markup will become this -->   <label for="radio1">     <input name="radio1" type="radio" id="radio1" style="display:none;">     <span class="custom radio"></span> Radio Button 1   </label>    <!-- This markup will NOT be touched by Javascript -->   <label for="radio2">     <input name="radio1" type="radio" id="radio2" style="display:none;">     <span class="custom radio checked"></span> Radio Button 2   </label> </form>  <!-- The HTML for Scoping to Single Input --> <select id="changedSelectInput">   <option>Pick One</option> </select>  <!-- The JS for Scoping to Single Input --> $("#changedSelectInput").foundationCustomForms(); 

With the patterns described above, we’re able to easily construct customizable radio buttons and checkboxes.

• Radio Button 1 Radio Button 2 Radio Button 3

  Radio Button 1 Radio Button 2 Radio Button 3

  Label for Checkbox Label for Checkbox Label for Checkbox

  Select Elements

  Also made with the patterns described above, we’ve made it simple to create customizable select lists too!

  Dropdown Label This is a dropdownThis is another optionLook, a third option

  This is a dropdown

  • This is a dropdown
  • This is another option
  • Look, a third option

•  <form class="custom">    <!-- Custom Radio -->   <div class="row">     <div class="four columns">       <label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>       <label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>       <label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>     </div>     <div class="four columns">       <label for="radio4"><input name="radio2" type="radio" id="radio4"> Radio Button 1</label>       <label for="radio5"><input name="radio2" CHECKED type="radio" id="radio5"> Radio Button 2</label>       <label for="radio6"><input name="radio2" type="radio" id="radio6"> Radio Button 3</label>     </div>      <!-- Custom Checkbox -->     <div class="four columns">       <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>       <label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>       <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>     </div>   </div>    <!-- Custom Selects -->   <label for="customDropdown">Dropdown Label</label>   <select style="display:none;" id="customDropdown">     <option SELECTED>This is a dropdown</option>     <option>This is another option</option>     <option>Look, a third option</option>   </select>   <div class="custom dropdown">     <a href="#" class="current">       This is a dropdown     </a>     <a href="#" class="selector"></a>     <ul>       <li>This is a dropdown</li>       <li>This is another option</li>       <li>Look, a third option</li>     </ul>   </div> </form>