3.5 Write an HTML5 element (or elements) to accomplish each of the following tas
ID: 3530440 • Letter: 3
Question
3.5 Write an HTML5 element (or elements) to accomplish each of the following tasks: a. Students were asked to rate the food in the cafeteria on a scale of 1 to 10. Use a meter element with text to its left and right to indicate that the average rating was 7 out of 10. b. Create a details element that displays the summary text "Survey Results" for Part (a). When the user clicks the arrow next to the summary text, an explanatory paragraph about the survey should be displayed. c. Create a text input element for a first name. The element should automatically receive the focus when the form is rendered in a browser. d. Modify Part (c) to eliminate the label element and use placeholder text in the input element. e. Use a datalist to provide an autocomplete list for five states. f. Create a range input element that allows the user to select a number from 1 to 100. g. Specify that autocomplete should not be allowed for a form. Show only the formExplanation / Answer
Hey this is the complete code for your questions ..please rate with 5 stars...:)
a. Students were asked to rate the food in the cafeteria on a scale of 1 to 10. Use a meter element with text to its left and right to indicate that the average rating was 7 out of 10.
Ans :
<!DOCTYPE html>
<html>
<body>
<p>Display a gauge:</p>
7<meter value="7" min="1" max="10">7 out of 10</meter>10<br>
</body>
</html>
Note: The details tag is not supported in IE.
OUTPUT :
b. Create a details element that displays the summary text "Survey Results" for Part (a). When the user clicks the arrow next to the summary text, an explanatory paragraph about the survey should be displayed.
Ans :
<!DOCTYPE html>
<html>
<body>
<details>
<summary>Survey Results</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>Your survey socres a good result .70 people out of each 100 attended this survey..</p>
</details>
</body>
</html>
Note: The details tag is currently only supported in Chrome and in Safari 6.
OUTPUT :
after click on arrow
c. Create a text input element for a first name. The element should automatically receive the focus when the form is rendered in a browser.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name:<input type="text" name="fname" autofocus><br>
<input type="submit">
</form>
</body>
</html>
d. Modify Part (c) to eliminate the label element and use placeholder text in the input element.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
<input type="text" name="fname" placeholder="First name"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Note: The placeholder attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.
OUTPUT :
e. Use a datalist to provide an autocomplete list for five states.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>
Note:The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.
Output :
f. Create a range input element that allows the user to select a number from 1 to 100.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Points: <input type="range" name="points" min="1" max="100">
<input type="submit">
</form>
</body>
</html>
g. Specify that autocomplete should not be allowed for a form. Show only the form
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.