HTML Tables and Forms
Two Important Things That You Should Learn in HTML
HTML stands for HyperText Markup Language. In HTML it is very important to learn about table creation and HTML forms. HTML forms and tables are commonly used in front-end development to get the user’s interaction and to display data to the user. When considering the table creation, you should get to know about some of the few tags/HTML elements. You can find those tags below.
HTML Tables
<table>: It is used to create the table.
<caption>: It is used to add a caption to the table.
<tr>: It defines the table row.
<th>: It defines the table heading.
<td>: It defines the table data.
You can use some of the important attributes within the HTML element to modify the table more attractive. You can find some of those attributes below.
border: Used to set an outline for the table.
cell spacing: Used to make space between the table border and cell border.
cell padding: Used to make space between the cell border and cell data.
align: Used to give alignment to the table.
Here is a sample code for you to get an idea.
<table border=”10" cellspacing=”5" cellpadding=”5" align=”center”>
<caption><h4><b><u>Sales Figures</u></b></h4></caption>
<tr><th></th><th>2019</th><th>2020</th></tr>
<tr><td>Jan</td><td>10%</td><td>12%</td></tr>
<tr><td>Feb</td><td>14%</td><td>17%</td></tr>
</table>You can also attach the caption within the table itself, By the following code example, you can get an idea about it.
<table border=”10" cellspacing=”5" cellpadding=”5" align=”center”>
<tr><th colspan=”3">Sales Growth</th></tr>
<tr><th></th><th>2019</th><th>2020</th></tr>
<tr><td>Jan</td><td>10%</td><td>12%</td></tr>
<tr><td>Feb</td><td>14%</td><td>17%</td></tr>
</table>HTML Forms
HTML forms are mainly used to collect information from the user. In HTML forms we should know about the text box, password box, text area, radio button, check box, dropdown list box, dropdown list array, submit button, and reset button.
text box: Used to collect information in a single line.
password box: To get the user’s password.
text area: Used to get information in multiple lines.
radio button: Used to select a single option from a few options.
check box: Used to select multiple options from a few options.
dropdown list box: To select a single option when there are many options.
dropdown list array: To select multiple options when there are many options.
submit button: To submit the data collected from the user to the server page.
reset button: To clear the collected details from the browser.
We can collect details from the user by using the <form> tag in HTML. Within the <form> tag <input> tag is used to inform about the data collection sources. We use commonly two attributes within the <form> tag.
method: It informs the way of sending data to another page.
action: It informs about the target page where the information should be sent.
Within the <input> tag also some attributes can be used to get more advantage.
name: It shows the reference name for the data collected.
value: Used to display a piece of text information on the button.
You can get a better idea from the following sample codes and outputs.
<form method=”post” action=”ex10.php”>
First Name: <input type=”text” name=”fname”><br>
Last Name: <input type=”text” name=”lname”><p>
<input type=”submit” value=”Click here”>
<input type=”reset” value=”Clear All”>
</form>
<form method=”post” action=”ex10.php”>
Enter your password: <input type=”password” name=”pwd” maxlength=”10" size=”10"><br><br>
<input type=”submit” value=”Click here”>
<input type=”reset” value=”Clear All”>
</form>
<form method=”post” action=”ex10.php”>
Enter your text here:<br><br>
<textarea name=”address” rows=”6" cols=”25"></textarea>
<br><br>
<input type=”submit” value=”Click here”>
<input type=”reset” value=”Clear All”>
</form>
<form method=”post” action=”ex10.php”>
Select your Gender:<p>
<input type=”radio” name=”gender” value=”male”>Male<br>
<input type=”radio” name=”gender” value=”female”>Female</p>
<input type=”submit” value=”Click here”>
<input type=”reset” value=”Clear All”>
</form>
<form method=”post” action=”ex10.php”>
Select your qualifications:<p>
<input type=”checkbox” name=”ol” value=”G.C.E O/L”>G.C.E O/L<br>
<input type=”checkbox” name=”al” value=”G.C.E A/L”>G.C.E A/L<br>
<input type=”checkbox” name=”dp” value=”DIPLOMA”>DIPLOMA<br>
<input type=”checkbox” name=”dg” value=”DIGREE”>DIGREE<br></p>
<input type=”submit” value=”Click here”>
<input type=”reset” value=”Clear All”>
</form>
