Form Elements

<form action="#" method="post">
  <fieldset>
    <legend>Example HTML5 Form</legend>
    <div class="row">
      <div class="one half padded">
        <label for="name">Text Field</label>
        <input id="name" type="text" placeholder="First & Last Name">
      </div>
      <div class="one half padded">
        <label for="email">Email Field</label>
        <input id="email" type="email" placeholder="you@example.com">
      </div>
    </div>
    <div class="row">
      <div class="one whole padded">
        <label for="address">Address</label>
        <input id="address" type="text" placeholder="Street Address">
      </div>
    </div>
    <div class="row">
      <div class="two fourths padded">
        <input type="text" placeholder="City">
      </div>
      <div class="one fourth padded"><span class="select-wrap">
          <select class="unselected">
            <option value="" disabled="" selected="">State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
            <option value="AS">American Samoa</option>
            <option value="DC">District of Columbia</option>
            <option value="FM">Federated States of Micronesia</option>
            <option value="GU">Guam</option>
            <option value="MH">Marshall Islands</option>
            <option value="MP">Northern Mariana Islands</option>
            <option value="PW">Palau</option>
            <option value="PR">Puerto Rico</option>
            <option value="VI">Virgin Islands</option>
            <option value="AE">Armed Forces Africa</option>
            <option value="AA">Armed Forces Americas</option>
            <option value="AE">Armed Forces Canada</option>
            <option value="AE">Armed Forces Europe</option>
            <option value="AE">Armed Forces Middle East</option>
            <option value="AP">Armed Forces Pacific</option>
            <option value="AB">Alberta</option>
            <option value="BC">British Columbia</option>
            <option value="MB">Manitoba</option>
            <option value="NB">New Brunswick</option>
            <option value="NL">Newfoundland and Labrador</option>
            <option value="NS">Nova Scotia</option>
            <option value="NT">Northwest Territories</option>
            <option value="NU">Nunavut</option>
            <option value="ON">Ontario</option>
            <option value="PE">Prince Edward Island</option>
            <option value="QC">Quebec</option>
            <option value="SK">Saskatchewan</option>
            <option value="YT">Yukon Territory</option>
          </select></span></div>
      <div class="one fourth padded">
        <input type="text" placeholder="Zip Code">
      </div>
    </div>
    <div class="row">
      <div class="one whole padded">
        <label for="message">Special Instructions</label>
        <textarea id="message" placeholder="Enter your message..."></textarea>
      </div>
    </div>
    <div class="row">
      <div class="one whole pad-left">
        <label for="twitter">Prefixed & Suffixed</label>
      </div>
    </div>
    <div class="row">
      <div class="one half padded">
        <div class="row">
          <div class="one mobile sixth"><span class="prefix">@</span></div>
          <div class="five mobile sixths">
            <input id="twitter" type="text" name="twitter" placeholder="twitter handle">
          </div>
        </div>
      </div>
      <div class="one half padded">
        <div class="row">
          <div class="three mobile fifths">
            <input type="text" name="sidereel" placeholder="desired username">
          </div>
          <div class="two mobile fifths"><span class="suffix">@example.com</span></div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="one whole padded">
        <label for="thing1">Radio Buttons:</label>
        <ul class="unstyled zero">
          <li>
            <input id="thing1" type="radio" name="things" checked="">
            <label for="thing1" class="inline">Thing one</label>
          </li>
          <li>
            <input id="thing2" type="radio" name="things">
            <label for="thing2" class="inline">Thing two</label>
          </li>
        </ul>
      </div>
    </div>
    <div class="row">
      <div class="one whole padded">
        <input id="allthings" type="checkbox" name="things" checked="">
        <label for="allthings" class="inline"> I want all the things!</label>
      </div>
    </div>
  </fieldset>
</form>