<form id="basicFormEl" class="well wide">
  <p>id is: <b><span data-name="id">unknown</span></b></p>
  <p>
    name:
    <input class='form-control' name="name" value="Commo" style='display:inline-block'>
  </p>
  <p>
    choose age:
    <select name="agegroup" style='display:inline-block'>
      <option></option>
      <option>20+</option>
      <option>30+</option>
      <option selected>40+</option>
      <option>50+</option>
    </select>
  </p>
  <p>
    district:<br>
    <label><input type="radio" name="district" value="upper" /> upper</label>
    <label><input type="radio" name="district" value="lower"  /> lower</label>
    <label><input type="radio" name="district" value="middle" /> middle</label>
  </p>
  <p>
    hobby (array checkboxes):<br>
    <label><input type="checkbox" name="hobby" value="sports" /> sports</label>
    <label><input type="checkbox" name="hobby" value="cinema" checked /> cinema</label>
    <label><input type="checkbox" name="hobby" value="books" checked /> books</label>
  </p>
  <p>
    is a good person (boolean checkbox):<br>
    <label><input type="checkbox" name="goodPerson" /> yes</label>
  </p>
  <p>
    comment:<br>
    <textarea class='wide form-control' name='comment' style='height:50px;'>some comment here</textarea>
  </p>
</form>