Lesson 11
In our last section ‘Using Different Inputs Types,’ we built a basic form it doesn’t look aesthetically pleasing. In this section, we will layout out our form using a table. For more information, see ‘Lesson 7‘.
- Change the code that you used in the previous section to this:
<!doctype html>
<html>
<head>
<title>Lesson 8</title>
<head>
<body>
<form name="simpleform" action="lesson 1.html" method="post">
<table width="400" border="1">
<tr>
<td>Name :</td>
<td><input type="text" name="first name" size="10"></td>
</tr>
<tr>
<td>Email id :</td>
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="pass" size="20"></td>
</tr>
<tr>
<td>Address :</td>
<td><textarea name="address" cols="20" rows="3"> </textarea></td>
</tr>
<tr>
<td>Gender:</td>
<td>male:
<input type="radio" name="gender" value="male">
<br/>
female:
<input type="radio" name="gender" value="female"></td>
</tr>
<tr>
<td>Hobbies:</td>
<td><input type="checkbox" name="hobbies" value="cricket">
cricket <br/>
<input type="checkbox" name="hobbies" value="football">
football <br/>
<input type="checkbox" name="hobbies" value="swimming">
swimming<br/></td>
</tr>
<tr>
<td><input type="submit" value="submit"/></td>
<td> </td>
</tr>
</table>
</body>
</html>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
The form is now nicely laid out. We have set a fixed width on the form and a small border using the width=”400″ border=”1″ attributes. You can take this styling further using different fonts and colours.
Move to the next lesson 'Using advanced styling'