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
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:
Male
Female
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:
4A
4B
4C
4D
5A
5B
5C
5D
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>
</select>
Subjects:
Chinese
English
Maths
Physics
Chemistry
Biology
ICT
P.E.
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/寄出/確定">