Forms - Foundation Framework Elements
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>