| 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: |
|
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>
</select> |
| 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/寄出/確定"> |