Create the following Web page with the heading ‘Calculator’ and provided images.
The web page should contain following input elements and apply the specified Constraints:
| Label Name | Element Name | Constraints |
| Input1 | input1 | This element is to get the first input. Type should be ‘number’ |
| Input2 | input2 | This element is to get the second input. Type should be ‘number’ |
| Select Operation | operation | A drop down list contains the following values: Select.. , ADD, SUBTRACT, MULTIPLY and DIVIDE.Set these values as its option tag text and option tag’s ‘value’ attributes |
| submit | An input field with image as type. | |
| reset | An input field with image as type. |
Consider the images are in the current folder and
- Use “calculator.jpg” as a header image.
- Use “calc.jpg” as calculation button and “reset.jpg” as reset button.
Apply following styles to the attributes: Do not use CSS .
- The heading should be done using the font color as ‘blue’ and with font size as ’20’. (Use <font> tag)
- The height and width of the images with the name “submit” and “reset” should be ’80’.
- The height and width of the calculator image should be ‘300’ and ‘400’.
Code:
<html>
<body>
<font size="20" color="blue">Calculator</font><br>
<img src="https://quizforexam.com/wp-content/uploads/2020/10/Capture.jpg" width="400" height="300"><br>
Input1<input type="number" name="input1" ><br>
Input2<input type="number" name="input2" ><br>
Select Operation <select name=operation>
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value ="DIVIDE">DIVIDE</option>
</select><br>
<input type="image" name="submit" src="https://quizforexam.com/wp-content/uploads/2020/10/calc.bmp" alt="Submit" height="80" width="80">
<input type="image" name="reset" src="https://quizforexam.com/wp-content/uploads/2020/10/reset.bmp" alt="Reset" height="80" width="80">
</body>
</html>
ConversionConversion EmoticonEmoticon