<form action="#" method="POST">

  <header>
    <h2>Example Form</h2>
  </header>

  <!-- Full Name -->
  <div>
    <label for="full_name">Full Name</label>
    <div>
      <input id="full_name" name="full_name" type="text" maxlength="50" tabindex="1">
    </div>
  </div>

  <!-- Email -->
  <div>
    <label for="my_email">
      Email
    </label>
    <div>
      <input id="my_email" name="my_email" type="email" spellcheck="false" maxlength="255" tabindex="2">
    </div>
  </div>

  <!-- Large Text Area -->
  <div>
    <label for="message">
      Message
    </label>
    <div>
      <textarea id="message" name="message" spellcheck="true" rows="10"  tabindex="3"></textarea>
    </div>
  </div>

   <!-- Radio Buttons -->
  <div>
    <fieldset>
      <legend>
        Select a Choice
      </legend>

      <div>
        <div>
          <input id="choice1" name="my_radio_buttons" type="radio" value="First Choice" tabindex="4" checked="checked">
          <label for="choice1">First Choice</label>
        </div>
        <div>
          <input id="choice2" name="my_radio_buttons" type="radio" value="Second Choice" tabindex="5">
          <label for="choice2">Second Choice</label>
        </div>
        <div>
          <input id="choice3" name="my_radio_buttons" type="radio" value="Third Choice" tabindex="6">
          <label for="choice3">Third Choice</label>
        </div>
      </div>
    </fieldset>
  </div>

  <!-- Checkboxes -->
  <div>
    <fieldset>
      <legend>
        Check All That Apply
      </legend>
      <div>
        <div>
          <input id="cb1" name="my_checkboxes" type="checkbox" value="First Choice" tabindex="7">
          <label for="cb1">First Choice</label>
        </div>
        <div>
          <input id="cb2" name="my_checkboxes" type="checkbox" value="Second Choice" tabindex="8">
          <label for="cb2">Second Choice</label>
        </div>
        <div>
          <input id="cb3" name="my_checkboxes" type="checkbox" value="Third Choice" tabindex="9">
          <label for="cb3">Third Choice</label>
        </div>
    </fieldset>
  </div>

<!--  Select (dropdown menu) -->
  <div>
    <label for="dropdown">
Select a Choice (similar idea to radio buttons, but useful if you have many choices -- it saves screen real estate)
    </label>
    <div>
      <select id="dropdown" name="dropdown" class="field select medium" tabindex="10">
        <option value="First Choice">First Choice</option>
        <option value="Second Choice">Second Choice</option>
        <option value="Third Choice">Third Choice</option>
        <option value="Fourth Choice">Fourth Choice</option>
        <option value="Fifth Choice">Fifth Choice</option>
        <option value="Sixth Choice">Sixth Choice</option>
        <option value="Seventh Choice">Seventh Choice</option>
      </select>
    </div>
  </div>

  <div>
    <div>
      <input id="saveForm" name="saveForm" type="submit" value="Submit">
    </div>
  </div>

</form>
boady * {
  box-sizing: border-box;
}

body, div, fieldset, header, h2 {
  padding: 10px;
}

textarea, input[type="text"], input[type="email"],select, fieldset {
  width: 300px;
}
label {
  display: inline-block;
   padding-left: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.