Skip to content

Instantly share code, notes, and snippets.

@greggoldring
Last active December 13, 2015 18:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save greggoldring/4956618 to your computer and use it in GitHub Desktop.
Save greggoldring/4956618 to your computer and use it in GitHub Desktop.
Typical Contact information section for forms. Foundation 3 Grid
<fieldset>
<legend>Personal Information</legend>
<div class="row">
<div class="small-12 large-6 columns">
<label>First Name:</label>
<input name="First Name" type="text" />
</div>
<div class="small-12 large-6 columns">
<label>Last Name:</label>
<input name="Last Name" type="text" />
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
<label>Phone Number:</label>
<input name="Phone Number" type="tel" />
</div>
<div class="small-12 large-6 columns">
<label>Email:</label>
<input name="Email" type="email">
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
<label>Age:</label>
<input name="Age" type="text">
</div>
<div class="small-12 large-6 columns ">
<label>
<input type="radio" name="Gender" value="male">
Male</label>
<label>
<input type="radio" name="Gender" value="female">
Female</label>
</div>
</div>
</fieldset>
<fieldset>
<legend>Address Information</legend>
<div class="row">
<div class="small-12 large-6 columns">
<label>Address Line 1:</label>
<input name="Address" type="text" />
</div>
<div class="small-12 large-6 columns">
<label>Address Line 2:</label>
<input name="Address 2" type="text" />
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
<label>City:</label>
<input name="City" type="text" />
</div>
<div class="small-12 large-6 columns">
<label>State:</label>
<select name="State">
<option value="" selected="selected">Select a State</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland">Newfoundland</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
</select>
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns end">
<label>Zip Code:</label>
<input name="Zip Code" type="text" />
</div>
</div>
</fieldset>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment