Form Elements

Basic Styling for various form elements.

Base Input Fields


Code <label id="input-Text">Text</label>
<input type="text" id="input-Text" />


Code <label for="input-Text-dl">Text w/Data List</label>
<input id="input-Text-dl" list="list-Name" type="text" placeholder="Choose" />
<datalist id="list-Name">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</datalist>


Code <label id="input-Email">Text</label>
<input type="email" id="input-Email" />


Code <label id="input-Pw">Text</label>
<input type="password" id="input-Pw" />


Code <label id="input-Url">Text</label>
<input type="url" id="input-Url" />


Code <label id="input-Tel">Text</label>
<input type="tel" id="input-Tel" />


Code <label id="input-Search">Search</label>
<input id="input-Search" type="search" placeholder="Search..." />
<input type="submit" value="Search" />


Code <label for="text-Area">Text Area</label>
<textarea id="text-Area"></textarea>

Selections


Code <label for="base-Select">Select</label>
<select id="base-Select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>


Code <label for="multi-Select">Multiple Select</label>
<select id="multi-Select" multiple size="5">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Code <label>Disabled</label>
<input type="text" value="Disabled" disabled="disabled" />


Code <label>Readonly Input</label>
<input type="text" value="Readonly" readonly="readonly" />


Code <label for="input-Required">Required Input</label>
<input type="text" id="input-Required" required="required" />


Code <label>File Input</label>
<input type="file" id="input-File" />

Check Boxes / Radios


Code <label for="check-1">Check Box</label>
<input type="checkbox" id="check-1" />




Code <label for="radio-1">Radio</label>
<input type="radio" id="radio-1" name="radio-Set" />

Button Inputs


Code <label>Input - Reset</label>
<input type="reset" value="Reset" />


Code <label>Input - Submit & Button</label>
<input type="submit" value="Submit" />


Code <label>Input - Reset</label>
<input type="reset" value="Reset" />

Additional Inputs

These inputs will default to input type=text styling and functionality in browsers that don't support support them yet.








Code <label for="num-Spin">Number Spinbox</label>
<input id="num-Spin" type="number" min="0" max="20" step="1" value="5" />

<label for="num-Date">Date: mm/dd/yyy</label>
<input id="num-Date" type="date" />

<label for="num-Time">Time: 12:00 PM</label>
<input id="num-Time" type="time" />

<label for="color-Picker">Hex Color</label>
<input id="color-Picker" type="color" />