Form design

One form can contain many input fields.

User name: text field input name="username" id="username" type="text" size="20" maxlength="10" placeholder="user name"
Password: password input type="password" name="psw" id="psw" size="20" maxlength="20" placeholder="user's password"
Comments text area textarea name="comments" id="comments" rows="5" cols="20"
Subjects checkbox input type="checkbox" name="eng" id="eng" value="english" checked
Evaluation: Good Average Poor radio buttons
Incorrect HTML. They have different names.
<input type="radio" name="good" id="good" value="good">Good
<input type="radio" name="average" id="average" value="average">Average
<input type="radio" name="poor" id="poor" value="poor">Poor
Sex: radio buttons The buttons have the same name but different IDs.
<label><input type="radio" name="sex" id="male" value="m" checked>Male</label>
<label><input type="radio" name="sex" id="female" value="f" >Female</label>
Class: pull-down menu/drop-down list with default value <select name="class" id="class">
<option value="" selected></option>
<option value="4A">4A</option>
<option value="4B">4B</option>
<option value="4C">4C</option>
<option value="4D">4D</option>
<option value="5A">5A</option>
<option value="5B">5B</option>
<option value="5C">5C</option>
<option value="5D">5D</option>
Subjects: menu/list with multiple values <select name="subjects" id="subjects" multiple size="5">
Date of birth DOB: date The appearance is browser dependent.
input type="date" name="dob" id="dob"
Email address: email Validation:format check.
input type="email" name="email" id="email"
Mark: number Validation:range check.
input type="number" name="mark" id="mark" min="0" max="100" step="10"
Score: range Displayed as a slider control
<input type="range" id="score" name="score" min="0" max="100">
Color: Color: Depending on the browser, a color picker shows up. The field is received with value ="#0000ff"
Photo: file input type="file" name="photo" id="photo"
Hidden field hidden field input type="hidden" name="answer" id="answer" value="2746"
Download button input type="button" value="download"
Reset reset input type="reset" name="resetbuttoon" id="resetbuttoon" value="重設"
  button (submit) <input type="submit" name="submitbutton" id="submitbutton" value="Submit/Send/Login/confirm/寄出/確定">