Combine HTML form, and table elements and their respective sub elements or tags to design the user interface below:
Note: Choose your own formatting for the layout of the table but do use appropriate attribute value pairs. Make the “Unique Product Code” textbox a compulsory field.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr >
<td colspan="2" align="center">
Provide details of new product
</td>
</tr>
<tr>
<td>Product Code:</td>
<td> <input type = "text" name = "product_code" placeholder="Unique Product Code"></td>
</tr>
<tr>
<td>Name of the Product:</td>
<td> <input type = "text" name = "product_name" placeholder="Name of Product"></td>
</tr>
<tr>
<td>Category of Product:</td>
<td>
<select name="selCat">
<option selected="selected" value=""> Select Product Category </option>
<option value="cat1"> Category 1 </option>
<option value="cat2"> Category 2 </option>
<option value="cat3"> Category 3 </option>
</select>
</td>
</tr>
<tr>
<td>Product Manufacturers:</td>
<td>
<select name="selMan">
<option selected="selected" value=""> Select Manufacturers </option>
<option value="man1"> Manufacturers 1 </option>
<option value="man2"> Manufacturers 2 </option>
<option value="man3"> Manufacturers 3 </option>
</select>
</td>
</tr>
<tr>
<td>Product Location:</td>
<td>
<select name="selLoc">
<option selected="selected" value=""> Select Location </option>
<option value="Loc1"> Location 1 </option>
<option value="Loc2"> Location 2 </option>
<option value="Loc3"> Location 3 </option>
</select>
</td>
</tr>
<tr >
<td colspan="2" align="center">
<input type="submit" name="submit" value="Save">
<input type="reset" value="Cancel">
</td>
</tr>
</table>
</body>
</html>
First read the algorithm, then study the program code line by line. After that, compare the code with the output and finally go through the explanation. This approach helps learners understand both the logic and the implementation properly.
After understanding this example, try to rewrite the same program without looking at the code. Then change some values or logic and run it again. This helps improve confidence and keeps learners engaged on the page for longer.
