Simple Form Example

An example of some of the most popular form elements

by James Doyle

HTML

<form action="#" method="GET" accept-charset="utf-8" enctype="multipart/form-data">
  <label for="searchbox">Search Box</label>
  <input type="search" name="searchbox" autocomplete="off" placeholder="Search Box" />
  <label for="textbox">Text Box</label>
  <input type="text" name="textbox" autocomplete="off" placeholder="Text Box" />
  <label for="emailbox">Email Box</label>
  <input type="email" name="emailbox" autocomplete="off" placeholder="Email Box" />
  <label for="password">Password Input</label>
  <input type="password" name="password" autocomplete="off" placeholder="Password Input" />
  <label for="textbox">Text Area</label>
  <textarea name="textarea" placeholder="Text Area"></textarea>
  <label for="dropdown">Dropdown</label>
  <select id="dropdown">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label for="checkbox1">
    <input type="checkbox" name="checkbox1" id="checkbox1" checked />
    Checkbox 1
  </label>
  <label for="checkbox2">
    <input type="checkbox" name="checkbox2" id="checkbox2" />
    Checkbox 2
  </label>
  <label for="radio">Radio Select</label>
  <input type="radio" name="radio" value="1" checked /> 1
  <input type="radio" name="radio" value="2" /> 2
  <input type="radio" name="radio" value="3" /> 3
  <label for="file">File</label>
  <input type="file" name="file" />
  <input type="submit" value="Submit Button" />
  <button type="submit">Submit Button</button>
</form>

CSS

label, input[type=submit], button[type=submit] {
  display: block;
}