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 understand the algorithm carefully. Then study the program line-by-line and compare it with the output. Finally, review the explanation section to strengthen your logic and programming understanding.
Rewrite the program without looking at the code. Modify values, conditions or logic and run it again. This helps improve confidence and strengthens coding skills much faster.
