<fieldset>
  <legend>Legend</legend>
  <p>
    Wafer biscuit chupa chups donut. Cheesecake dragée macaroon. Bear claw candy
    canes jelly cake tootsie roll chocolate caramels candy. Chocolate bar toffee
    candy canes caramels cookie soufflé. Danish powder pie bonbon pastry carrot
    cake candy. Candy fruitcake jelly-o sweet roll gingerbread toffee chupa
    chups.
  </p>
</fieldset>

<form>
  <p><label for="text_field">Text Field:</label>
    <input type="text" id="text_field">
  </p>

  <p><label for="text_field">Invalid Text Field:</label>
    <input type="text" id="text_field" required>
    <div class="description">This example demonstrates the default state of a required input element.</div>
  </p>

  <p><label for="text_field">Error Text Field:</label>
    <input type="text" id="text_field" required class="error">
    <div class="description">This example demonstrates the error state of a required input element.</div>
  </p>

  <p><label for="text_field_disabled">Disabled Text Field:</label>
    <input type="text" id="text_field_disabled" disabled="" value="I'm disabled">
  </p>

  <p><label for="text_field_readonly">Readonly Text Field:</label>
    <input type="text" id="text_field_readonly" readonly="" value="I'm readonly">
  </p>

  <p><label for="text_area">Text Area:</label>
    <textarea id="text_area" style="margin: 0px; width: 357px; height: 69px;"></textarea>
  </p>

  <p><label for="text_area_disabled">Disabled Text Area:</label>
    <textarea id="text_area_disabled" disabled="">I'm disabled</textarea>
  </p>

  <p><label for="text_area">Readonly Text Area:</label>
    <textarea id="text_area" readonly="">I'm readonly</textarea>
  </p>

  <p><label for="select_element">Select Element:</label>
    <select id="select_element">
      <optgroup label="Option Group 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </optgroup>
      <optgroup label="Option Group 2">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3" disabled="">Disabled Option</option>
      </optgroup>
    </select>
  </p>

  <p><label for="select_element_disabled">Disabled Select Element:</label>
    <select id="select_element_disabled" disabled="">
      <option value="1">Unselectable Option</option>
      <option value="2">This option should not even be seen</option>
    </select>
  </p>

  <p>Radio Buttons:
    <input type="radio" class="radio" name="radio_button" value="radio_1">
      <label for="radio1">Radio 1</label>
    <input type="radio" class="radio" name="radio_button" value="radio_2">
      <label for="radio2">Radio 2</label>
    <input type="radio" class="radio" name="radio_button" value="radio_3">
      <label for="radio3">Radio 3</label>
    <input type="radio" class="radio" name="radio_button" value="radio_4" disabled="">
      <label for="radio4">Radio Disabled</label>
  </p>

  <p>Checkboxes:
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_1">
      <label for="check_1">Checkbox 1</label>
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_2">
      <label for="check_2">Checkbox 2</label>
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_3">
      <label for="check_3">Checkbox 3</label>
    <input type="checkbox" class="checkbox" name="checkboxes" value="check_4" disabled="">
      <label for="check_4">Checkbox Disabled</label>
  </p>

  <p><label for="password">Password:</label>
    <input type="password" class="password" id="password">
  </p>

  <p><label for="file">File Input:</label>
    <input type="file" class="file" id="file">
  </p>

</form>

<form>


  <p><label for="email">Email:</label>
    <input type="email" id="email">
  </p>

  <p><label for="url">URL:</label>
    <input type="url" id="url">
  </p>

  <p><label for="tel">Telephone:</label>
    <input type="tel" id="tel">
  </p>

  <p><label for="number">Number:</label>
    <input type="number" id="number" min="0" max="10" step="1" value="5">
  </p>

  <p><label for="search">Search:</label>
    <input type="search" id="search">
  </p>

  <p><label for="date">Date:</label>
    <input type="date" id="date">
  </p>

  <p><label for="datetime">Datetime:</label>
    <input type="datetime" id="datetime">
  </p>

  <p><label for="datetime-local">Datetime-local:</label>
    <input type="datetime-local" id="datetime-local">
  </p>

  <p><label for="time">Time:</label>
    <input type="time" id="time">
  </p>

  <p><label for="color">Color:</label>
    <input type="color" id="color">
  </p>

  <p><label for="datalist">Datalist:</label>
    <input list="browsers" name="browser" type="datalist" id="datalist">
    <datalist id="browsers">
      <option value="Internet Explorer">
      </option>
      <option value="Firefox">
      </option>
      <option value="Chrome">
      </option>
      <option value="Opera">
      </option>
      <option value="Safari">
      </option>
    </datalist>
  </p>

  <p><label for="range">Range:</label>
    <input type="range" id="range" name="points" min="1" max="10">
  </p>

  <p><label for="output">Output:</label>
    <output name="result" id="output">42</output>
  </p>

  <p><label for="progress">Progress:</label>
    <progress id="progress" value="65" max="100"></progress>
  </p>

  <p><label for="meter">Meter:</label>
    <meter id="meter" min="200" max="500" value="350">350 degrees</meter>
  </p>

  <p>
    <button class="button">Button Element</button>
  </p>

  <p>
    <input class="button" type="reset" value="Clear">
  </p>

  <p>
    <input class="button" type="submit" value="Submit">
  </p>

</form>