Foundation 3 Large Form Example

f3-form-example.html

<form>
  <fieldset>
    <legend>Large Form Example</legend>
  
    <div class="row">
      <div class="five columns">
        
        <label>Name</label>
        <input type="text" />
        
        <label>Occupation</label>
        <input type="text" />
        
        <label>Twitter</label>
        <div class="row collapse">
          <div class="two mobile-one columns">
            <span class="prefix">@</span>
          </div>
          <div class="ten mobile-three columns">
            <input type="text" placeholder="foundationzurb" />
          </div>
        </div>
        
        <label>URL</label>
        <div class="row collapse">
          <div class="nine mobile-three columns">
            <input type="text" placeholder="foundation.zurb" />
          </div>
          <div class="three mobile-one columns">
            <span class="postfix">.com</span>
          </div>
        </div>
        
      </div>
      <div class="five columns">
          
        <label class="error">Field with Error</label>
        <input type="text" class="error" />
        <small class="error">Invalid entry</small>
          
        <div class="error">
          <label>Another Error</label>
          <input type="text" />
          <small>Invalid entry</small>
        </div>
          
      </div>

    </div>
    
    <label>Address</label>
    <input type="text" placeholder="Street (e.g. 123 Awesome St.)" />
    
    <div class="row">
      <div class="six columns">
        <input type="text" placeholder="City" />
      </div>
      <div class="two columns" />
        <select>
          <option>CA</option>
        </select>
      </div>
      <div class="four columns">
        <input type="text" placeholder="ZIP" />
      </div>
    </div>
  
  </fieldset>
</form>