Pattern Lab

Forms Label

Lorem

HTML

									
										<label for="Lorem">Lorem</label>

Forms Input Text

HTML

									
										  <input class='form_input'  type="text" placeholder="Lorem">

Forms Input Text Error

HTML

									
										  <input class='form_input form_input-error'  type="text" placeholder="Lorem">

Forms Input Password

HTML

									
										<input class='form_input' type="password" placeholder="Lorem">

Forms Input Url

HTML

									
										<input class='form_input' type="url" placeholder="Lorem">

Forms Input Email

HTML

									
										<input class='form_input' type="email" placeholder="Lorem">

Forms Input Search

HTML

									
										<input class='form_input' type="search" placeholder="Lorem">

Forms Input Number

HTML

									
										<input class='form_input' type="number" placeholder="Lorem" pattern="[0-9]*">

Forms Checkbox

Choice A

HTML

									
										<label><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label>

Forms Radio Buttons

Option 1

HTML

									
										<label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label>

Forms Select Menu

HTML

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

Forms Input Textarea

HTML

									
										<textarea class='form_input' rows="8" cols="48" placeholder="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua (140 characters)"></textarea>

Forms Input Number

HTML

									
										<input class='form_input' type="number" min="1" max="99" value="1">

Forms Input Date

HTML

									
										<input class='form_input' type="date" value="1970-01-01">

Forms Input Range

HTML

									
										<input type="range" value="10">

Forms Input Week

HTML

									
										<input class='form_input' type="week" value="1970-W01">

Forms Input Month

HTML

									
										<input class='form_input' type="month" value="1970-01">

Forms Input Datetime Local

HTML

									
										<input class='form_input' type="datetime-local" value="1970-01-01T00:00">

Forms Input Datetime

HTML

									
										<input class='form_input' type="datetime" value="1970-01-01T00:00:00Z">