Here we go for the part 2 of HTML which is learn about how to create a form.
Since our lecturer need us to do a lab exercise and submit on spot, I just share what code I created.
I used to practice HTML in click here to practice
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h3> Registration Form : Dance Club </h3>
<form action="insert.asp" method="post">
<hr>
<table border="2" align="left" width="30%">
<tr>
<td><b>Name:</b></td>
<td><INPUT type="text" name="yourname" size=30 maxlength=60>
</td>
</tr>
<tr>
<td><b>IC No:</b></td>
<td><INPUT type="text" name="icnumber" size=6 maxlength=6>-
<INPUT type="text" name="icnumber" size=2 maxlength=2>-
<INPUT type="text" name="icnumber" size=4 maxlength=4>
</td>
</tr>
<tr>
<td><b>Address:</b></td>
<td><TEXTAREA name="address" rows=5 cols=60></TEXTAREA>
</td>
</tr>
<tr>
<td><b>Gender:</b></td>
<td><INPUT type="radio" name="gender" value="male">Male
<INPUT type="radio" name="gender" value="female">Female
</td>
</tr>
<tr>
<td><b>Dance Type:</b></td>
<td>
<INPUT type="checkbox" name="dancetype" value="zapin">Zapin
<INPUT type="checkbox" name="dancetype" value="joget">Joget
<INPUT type="checkbox" name="dancetype" value="inang">Inang
<INPUT type="checkbox" name="dancetype" value="liondance">Lion Dance
</td>
</tr>
<tr>
<td><b>Competition:</b></td>
<td>
<SELECT name="competition" size=3>
<OPTION>State Level
<OPTION>National Level
<OPTION>StateInternational Level
</td>
</tr>
<tr>
<td><b>Nationality:</b></td>
<td>
<SELECT name="nationality">-please select
<OPTION>-please select
<OPTION>Malaysian
<OPTION>Non-Malaysian
</td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<INPUT type="password" name="pwd" size=15 maxlength=15
</td>
</tr>
</table>
<INPUT type="Submit" value="Register Me">
<INPUT type="Reset" value="Cancel">
</form>
</body>
</html>
So the result should be
So far, what I highlight in creating HTML form is..
Firstly, just categories what type of input you want to create.
Just like the example above.
Name, IC No - TEXT
Address - TEXTAREA
Gender - radio button
Dance Type - check box
Competition - SELECT
Password - password
My step is first create the table, I put all the question in the form such as name, IC No, Address.... creating the columns and rows.
After I done all the formation of the form then I only insert the type of input coding into each column.
It is easier for me and reduce the confusion.
Need a more clear tutorial?
This video may help you build your basic of HTML form.
No comments:
Post a Comment