Presentational Class Names Example for the Net Magazine article Form to Table

presentational-class-names-example.html

<div class="two-up-wider">
  <div class="input">
    <label for="firstname">First Name</label>
    <input id="firstname" class="valid icon-valid" type="text" value="Lisa" name="firstname" />
  </div>
  <div class="input">
    <label for="lastname">Last Name </label>
    <input id="lastname" class="valid icon-valid" type="text" value="Simpson" name="lastname" />
  </div>
</div>

<div class="two-up-wider">
  <div class="input">
    <label for="address1">Address</label>
    <input id="address1" class="invalid" type="text" name="address1" />
    <span class="validation-text invalid">invalid</span> 
  </div>
  <div class="input">
    <label for="address2">Apt. / Suite / Unit
      <span class="optional">(optional)</span> 
    </label>
    <input id="address2" type="text" name="address2" />
  </div>
</div>

<div class="three-up zip-city-state">
  <div class="input">
    <label for="zipcode">Zip Code</label>
    <input id="zipcode" class="invalid" type="text" name="zipcode" />
    <span class="validation-text invalid">invalid</span> 
  </div>
  <div class="input">
    <label for="city">City
    </label>
    <input id="city" type="text" name="city" />
  </div>
  <div class="input select">
    <label for="state">State
    </label>
    <select name="state" class="is-invalid">
      <option value="">Select a State</option>
      <option value="Alabama">AL</option>
        ...
      <option value="Wyoming">WY</option>
    </select>
  </div>
</div>