Creating Form With Zurb Foundation in PHP

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>

 

Up Next
    Ebook Download
    View all
    Learn
    View all