Pattern Lab

Text Fields

HTML

									
										<form action="#">

<fieldset>
	
    <div class="field-container">
        <label for="text">Text Input <abbr title="Required" class="req">*</abbr></label>
        <input id="text" type="text" placeholder="Text Input">
    </div>
    
    <div class="field-container">
        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Type your Password">
    </div>
    
    <div class="field-container">
        <label for="webaddress">Web Address</label>
        <input id="webaddress" type="url" placeholder="http://yoursite.com">
    </div>
    
    <div class="field-container">
        <label for="emailaddress">Email Address</label>
        <input id="emailaddress" type="email" placeholder="name@email.com">
    </div>
    
    <div class="field-container">
        <label for="search">Search</label>
        <input id="search" type="search" placeholder="Enter Search Term">
    </div>
    
    <div class="field-container">
        <label for="number">Number Input <abbr title="Required" class="req">*</abbr></label>
        <input id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*">
    </div>
    
    <div class="field-container">
        <label for="textarea">Textarea</label>
        <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
    </div>
    
    <div class="field-container error">
        <label class="error">Form Label <abbr title="Required" class="req">*</abbr></label>
        <p class="formError">Please fill out this field.</p>
        <input class="is-error" type="text" placeholder="Text Input">
    </div>
    
    <div class="field-container">
        <label  class="valid">Valid</label>
        <input  class="is-valid" type="text" placeholder="Text Input">
    </div>
    
</fieldset>

</form>

Select Menu

HTML

									
										<form action="#">

<fieldset>
    <div class="field-container">

        <label for="select">Select</label>
        <select id="select">
            <optgroup label="Option Group">
                <option>Option One</option>
                <option>Option Two</option>
                <option>Option Three</option>
            </optgroup>
        </select>

    </div>
</fieldset>

</form>

Checkbox

HTML

									
										<form action="#">
	
    <fieldset class="select checkbox">
	    
	    <div class="field-container">		    
        <legend>Checkbox <abbr title="Required" class="req">*</abbr></legend>
        <ul>
            <li>
            	<input id="checkbox1" name="checkbox" type="checkbox" checked="checked">
            	<label for="checkbox1"><span></span>Choice A</label>
            </li>
            
            <li>
            	<input id="checkbox2" name="checkbox" type="checkbox">
            	<label for="checkbox2"><span></span>Choice B</label>
            </li>
            
            <li>
            	<input id="checkbox3" name="checkbox" type="checkbox">
            	<label for="checkbox3"><span></span>Choice C</label>
            </li>
        </ul>
	    </div>
	    
    </fieldset>
    
</form>

Radio Buttons

HTML

									
										<form action="#">
	
    <fieldset class="select radio">
	    
	    <div class="field-container">
        <legend>Radio</legend>
        <ul>
            <li>
            	<input id="radio1" name="radio" type="radio" class="radio" checked="checked">
            	<label for="radio1"><span></span>Option 1</label>
            </li>
            
            <li>
            	<input id="radio2" name="radio" type="radio" class="radio">
            	<label for="radio2"><span></span>Option 2</label>
            </li>
            
            <li>
            	<input id="radio3" name="radio" type="radio" class="radio">
            	<label for="radio3"><span></span>Option 3</label>
            </li>
        </ul>  
	    </div>    
        
    </fieldset>
    
</form>

Submit Button

HTML

									
										<form action="#">
	
    <fieldset class="select radio">
	    
	    <div class="field-container">
		    <button class="submit-but">Button Text</button>
	    </div>
	    
    </fieldset>
</form>