Day 4 -
- <form>, <input> with attribute type of "text", "password", "radio", "checkbox", "reset", "submit"
- <select> -> <option>, <textarea> with attributes cols, rows
- name: sex: email: new password:Birthday:
- add on attribute such as: name, maxlength, value, checked, readonly, disabled
- <label> with attribute for, and refer to form's elements according to its attribute id
- arrange your form elements in a table so that label and input can be aligned nicely
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<form>
<table border="1">
<tr>
<td><label for="username">Name:</label></td>
<td colspan="6"><input type="text" value="your name here" id="username"/></td>
</tr>
<tr>
<td><label for="userpwd">Password:</label></td>
<td colspan="6"><input type="password" value="" id="userpwd"/></td>
</tr>
<tr>
<td><label for="male">Gender:</label></td>
<td colspan="3"><input type="radio" name="gender" value="M" id="male" checked/><label for="male">Male</label></td>
<td colspan="3"><input type="radio" name="gender" value="F" id="female" /><label for="female">Female</label></td>
</tr>
<tr>
<td><label for="twitter">Account:</label></td>
<td colspan="2"><input type="checkbox" name="account" value="T" id="twitter"/><label for="twitter">Twitter</label></td>
<td colspan="2"><input type="checkbox" name="account" value="Y" id="yahoo"/><label for="yahoo">Yahoo</label></td>
<td colspan="2"><input type="checkbox" name="account" value="Hot" id="hotmail"/><label for="hotmail">Hotmail</label></td>
</tr>
<tr>
<td><label for="day">BirthDate:</label></td>
<td colspan="2">
<select multiple="multiple" id="day">
<option value="0">Select a few Days</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</td>
<td colspan="2">
<select id="month">
<option value="0">Select a month</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
</select>
</td>
<td colspan="2"><input type="text" value="1988" maxlength="4" id="year" readonly="readonly"/></td>
</tr>
<tr>
<td><label for="findUs">How you find us?</label></td>
<td colspan="6"><textarea rows="3" cols="50" id="findUs"></textarea></td>
</tr>
<tr>
<td colspan="7" align="right"><input type="submit" value="Submit!" id=SubmitBtn" />
<input type="reset" value="Reset" id="resetBtn"/>
</td>
</tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment