Foundation framework allows user to create easy and powerful form layout. We do anything by using form style and grids.

HTML Code

<form>
  <div class="row">
    <div class="large-12 columns">
      <label>User Name
        <input type="text" placeholder="User Name" />
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-4 columns">
      <label>First Name
        <input type="text" placeholder="First Name" />
      </label>
    </div>
    <div class="large-4 columns">
      <label>Last Name
        <input type="text" placeholder="Last Name" />
      </label>
    </div>
    <div class="large-4 columns">
      <div class="row collapse">
        <label>Email ID</label>
        <div class="small-9 columns">
          <input type="text" placeholder="Email" />
        </div>
        <div class="small-3 columns">
          <span class="postfix">.com</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Select Your Country
        <select>
          <option value="US">US</option>
          <option value="England">England</option>
          <option value=" India ">India</option>
          <option value=" New Zealand">New Zealand</option>
        </select>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      <label>Gender</label>
      <input type="radio" name="gender" value="male" id="gendermale"><label for=" gendermale ">Male</label>
      <input type="radio" name="gender" value="female" id="genderfemale"><label for=" genderfemale ">Female</label>
    </div>
    <div class="large-6 columns">
      <label>Check these out</label>
      <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
      <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Address
        <textarea placeholder="address"></textarea>
      </label>
    </div>
  </div>
</form>

Output

1. Switches

Switch is toggle element that act as switch between an On and Off state on click. It no needs java script.

HTML Code

<div class="switch">
  <input id="exampleCheckboxSwitch" type="checkbox">
  <label for="exampleCheckboxSwitch"></label>
</div> 

<!-- Using radio buttons – each switch turns off the other two -->
<div class="switch small">
  <input id="exampleRadioSwitch1" type="radio" checked name="testGroup">
  <label for="exampleRadioSwitch1"></label>
</div> 

<div class="switch radius">
  <input id="exampleRadioSwitch2" type="radio" name="testGroup">
  <label for="exampleRadioSwitch2"></label>
</div> 

<div class="switch round large">
  <input id="exampleRadioSwitch3" type="radio" name="testGroup">
  <label for="exampleRadioSwitch3"></label>
</div>

Output

Range Slider

Range Slider allows user to select a specific value from a range by dragging.

Horizontal Slider

HTML Code

<div class="range-slider" data-slider data-options="start: 1; end: 10; step: 2;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

Output

Vertical Slider

HTML Code

<div class="range-slider vertical-range" data-slider data-options="vertical: true;">
  <span class="range-slider-handle"></span>
  <span class="range-slider-active-segment"></span>
  <input type="hidden">
</div>

Output

Abide Validation

Abide validation have HTML5 Form validation library. This library use pattern and required attribute.

• Required attribute - input that you want to require (not empty).
• Pattern - Defines input format.

HTML Code

<form>
<div class="row">
<div class="large-12 columns">
<label for="password">Password <small>required</small>
<input type="password" id="password" placeholder="Password123" name="password" required></label>
<small class="error">Passwords must be at least 8 characters with 1 capital letter, 1 number,
and one special character.</small>
</div>
<div class="large-12 columns">
<label for="confirmPassword">Confirm Password <small>required</small>
<input type="password" id="confirmPassword" placeholder="Password123" name="confirmPassword" required data-equalto="password"> </label>
<small class="error">Passwords must match.</small>
    </div>
</div>
<div class="row">
     <div class="large-6 columns">
	<label for="email">Email
	<input type="email" id="email" placeholder="foundation@zurb.com">
	</label>
	<small class="error">Valid email required.</small>
     </div>
     <div class="large-6 columns">
	<label for="url">URL <small>required</small>
	<input type="url" id="url" placeholder="http://zurb.com" required>
	</label>
	<small class="error">Valid URL required.</small>
     </div>
</div>
<div class="row">
      <div class="large-12 columns">
        <button type="submit" class="medium button green">Submit</button>
      </div>
</div>
</form>

Output

Next Lesson > Callouts & Prompts