Fancier Forms

Checkbox Example

This

<input type="checkbox" id="pizza" name="pizza" value="pizza" />
<label for="pizza">I like pizza!</label>

becomes

Radio Button Example

This

<label>Do you like salad?</label>
<input type="radio" id="likeSaladYes" name="likeSalad" value="yes" />
<label for="likeSaladYes">Yes</label>
<br />
<input type="radio" id="likeSaladNo" name="likeSalad" value="no" />
<label for="likeSaladNo">No</label>

becomes

Select Example

This

<label for="contactMethod">Preferred Contact Method</label>
<select id="contactMethod" name="contactMethod">
    <option value="">Select</option>
    <option value="phone">Phone</option>
    <option value="email">Email</option>
</select>

becomes

Optgroup Example

This

<label for="fruitOrVegetable">Pick a fruit or vegetable</label>
<select id="fruitOrVegetable" name="fruitOrVegetable">
    <option value="">Select</option>
    <optgroup label="Fruits">
        <option value="bananas">Bananas</option>
        <option value="apples">Apples</option>
        <option value="blueberries">Blueberries</option>
        <option value="strawberries">Strawberries</option>
        <option value="grapes">Grapes</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="peas">Peas</option>
        <option value="carrots">Carrots</option>
        <option value="cucumbers">Cucumbers</option>
        <option value="zucchini">Zucchini</option>
        <option value="green-beans">Green Beans</option>
    </optgroup>
</select>

becomes

Disabled Checkbox Example

This

<input type="checkbox" disabled id="agree" name="agree" value="agree" />
<label for="agree">I agree to the Terms &amp; Conditions</label>

becomes

Disabled Radio Button Example

This

<label>What's your favorite drink?</label>
<input type="radio" id="drinkCoffee" name="drink" value="coffee" />
<label for="drinkCoffee">Coffee</label>
<br />
<input type="radio" id="drinkTea" name="drink" value="tea" />
<label for="drinkTea">Tea</label>
<br />
<input type="radio" disabled id="drinkWater" name="drink" value="water" />
<label for="drinkWater">Water</label>
<br />
<input type="radio" id="drinkJuice" name="drink" value="juice" />
<label for="drinkJuice">Juice</label>

becomes

Disabled Select Example

This

<label for="contactMethodDisabled">Preferred Contact Method</label>
<select id="contactMethodDisabled" name="contactMethodDisabled" disabled>
    <option value="">Select</option>
    <option value="phone">Phone</option>
    <option value="email">Email</option>
</select>

becomes

Disabled Optgroup Example

This

<label for="vegetableDisabled">Pick a fruit or vegetable</label>
<select id="vegetableDisabled" name="vegetableDisabled">
    <option value="">Select</option>
    <optgroup label="Fruits">
        <option value="bananas">Bananas</option>
        <option value="apples">Apples</option>
        <option value="blueberries">Blueberries</option>
        <option value="strawberries">Strawberries</option>
        <option value="grapes">Grapes</option>
    </optgroup>
    <optgroup label="Vegetables" disabled>
        <option value="peas">Peas</option>
        <option value="carrots">Carrots</option>
        <option value="cucumbers">Cucumbers</option>
        <option value="zucchini">Zucchini</option>
        <option value="green-beans">Green Beans</option>
    </optgroup>
</select>

becomes

Disabled Option Example

This

<label for="weirdColors">Preferred Contact Method</label>
<select id="weirdColors" name="weirdColors">
    <option value="">Select</option>
    <option value="periwinkle">Periwinkle</option>
    <option value="fuchsia" disabled>Fuchsia</option>
    <option value="mauve">Mauve</option>
</select>

becomes