Forms | Max Quattromani

Forms

A pretty standard form to allow users to enter requested data. Most every form element is covered in this sample. Input fields, checkboxes, radio buttons, select dropdowns, etc. alos included is a submit button and a reset, or clear, button that wipes any filled-in information to be wiped.

* Indicates a required field

Contact Information

First Name:

Last Name:

Service Address:

Apt., Suite, or Floor:

City:

State:

ZIP Code:

Phone Number

Alternate Phone Number

Email Address:

Website:

Pick a Start Date

Pick an End Date

Leave a really complimentary comment about us here:

Choose a file:

Checkbox & Radio Inputs

I choose this

I choose that
Male

Female

<input type="checkbox" class="switch" id="switch-this" name="switch-this" checked>
<label for="switch-this">I choose this</label>

<input type="checkbox" class="switch" id="switch-that" name="switch-that">
<label for="switch-that">I choose that</label>

<input type="radio" class="radio" id="radio-this" name="sex" value="male">
<label for="radio-this">Male</label>

<input type="radio" class="radio" id="radio-that" name="sex" value="female">
<label for="radio-that">Female</label>

Datalist Field

Internet Browsers

Search Field

If you see this, leave this form field blank.

<fieldset>
  <div class="formitem">
    <label for="generic" class="visually-hidden">Generic</label>
    <input type="text" id="" class="" name="" value="" placeholder="Generic" tabindex="21" required>
  </div>
</fieldset>

Select with a Link

Select elements are native parts of web forms; however, they will not naturally take links as values. Having the ability to create a dropdown that contains a series of links can be an effective method to minimize the real estate impact on the UI.

<div class="select">
  <select name="" class="selectLink">
    <option value="null">Select a link</option>
    <option value="http://google.com">Go</option>
    <option value="http://google.com">Goo</option>
    <option value="http://google.com">Goog</option>
    <option value="http://google.com">Googl</option>
    <option value="http://google.com">Google</option>
  </select>
</div>