Introduction
In this article I explain creation of a form using Zurb foundation in PHP. This is a very simple and basically is a phenomenal and suitable for web development design. For creating a form with Zurb foundation, first download the Zurb foundation package and place it in your PHP directory, then try it. Let's start creating a form using Zurb foundation.
Example
The following properties of a form, such as size of input, row, column and padding spacing are from the "foundation.css" file and simply makes a contact form.
<html>
<head>
<title>Example of form</title>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
</head>
<body>
<div class="row">
<div class="six columns">
<form>
<label>Name</label>
<input type="text" placeholder="Input full name">
<label>Address</label>
<input type="text" class="twelve" placeholder="Address">
<div class="row">
<div class="six columns">
<label>City Name</label>
<input type="text" placeholder="Enter City Name">
</div>
<div class="three columns">
<label>State Name</label>
<input type="text" placeholder="State">
</div>
<div class="three columns">
<label>Country</label>
<input type="text" placeholder="Country">
</div>
<div class="ten mobile-three columns">
<label>ZIP:</label>
<input type="text" class="ZIP">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Output
![cal.jpg]()
Example
This example is used with field set. This example shows how to use field set with foundation. See:
<html>
<head>
<title>Example of Form</title>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
</head>
<body>
<div class="row">
<div class="six columns">
<form class="custom">
<fieldset>
<legend>Personal Detail</legend>
<label>Name IN Full</label>
<input type="text" placeholder="Name">
<label>Address</label>
<input type="text" placeholder="Address">
<input type="text" class="six" placeholder="State">
<input type="text" class="six" placeholder="PIN">
</fieldset>
</form>
</div>
</div>
</body>
</html>
Output
![cal1.jpg]()
Example
This example is for use with an option list with foundation. Here add some extra files, jQuery min and jQuery custom forms files, then you can try it. See:
<html>
<head>
<title>Example of Form</title>
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
</head>
<body>
<div class="row">
<h2>option list with form</h2>
<form class="custom">
<label for="customDropdown">Select Technology</label>
<select style="display:none;" id="customDropdown">
<option SELECTED>PHP</option>
<option>C</option>
<option>ASP.NET</option>
<option>JSP</option>
<option>PERL</option>
</select>
</div>
</form>
<script src="foundation/javascripts/jquery.min.js"></script>
<script src="foundation/javascripts/jquery.customforms.js"></script>
</body>
</html>