2.16 A local university has asked you to create an HTML5 document that allows pr
ID: 3730289 • Letter: 2
Question
2.16 A local university has asked you to create an HTML5 document that allows prospective college students to provide feedback about their campus visit. Your HTML5 document should contain a form with text fields for a name and e-mail. Provide checkboxes that allow prospective students to indicate what they liked most about the campus. The checkboxes should include: campus, students, location, atmosphere, dorm rooms and sports. Also, provide radio buttons that ask the prospective students how they became interested in the college. Options should include: friends, television, Internet and other. In addition, provide a text area for additional comments, a submit button and a reset button. Use post to sent the information in the form to http://www.deitel.com (Links to an external site.)Links to an external site..
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 form’s opening tag.
h) Use a mark up element to highlight the second sentence in the following paragraph.
<p>Students were asked to rate the food in the cafeteria on a scale of 1 to 10. The average result was 7.</p>
Explanation / Answer
Feedback form
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<center> RESPONSE OF UNIVERSITY </center>
<br /><br /><br />
<form name="fr" id="fr" method="post" action="http://www.deitel.com/">
Name <input type="text" name="name" id="name" /><br /><br />
Email <input type="text" name="email" id="email" /><br /><br />
What do like most in the campus<br /><br />
<input type="checkbox" name="st" id="st" value="student"/>Student
<input type="checkbox" name="ca" id="ca" value="campus"/>Campus
<input type="checkbox" name="lo" id="lo" value="location"/>Location
<input type="checkbox" name="at" id="at" value="atmosphere"/>Atmosphere
<input type="checkbox" name="do" id="do" value="dorm"/>Dorm Rooms
<input type="checkbox" name="sp" id="sp" value="sports"/>Sports <br /><br />
How do you interested in this campus<br /><br />
<input type="radio" name="fr" id="fr" value="friends"/>friends
<input type="radio" name="tel" id="tel" value="television"/>television
<input type="radio" name="in" id="in" value="internet"/>internet
<input type="radio" name="ot" id="ot" value="other"/>other
<br /><br />
Additional comments<br /><br />
<textarea name="co" id="co"></textarea><br /><br />
<input type="submit" name="sub" id="sub" value="SUBMIT" /> <input type="reset" name="res" id="res" value="RESET" />
</form>
</body>
</html>
Ratings
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<center>RATINGS</center>
average rating was 7 out of 10
<meter value="7" min="0" max="10">7 out of 10</meter>average rating was 7 out of 10<br><br /><br />
<form>
<input type="text" name="fname" autofocus placeholder="first name"><br>
<label><b>Survey Results</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit"><br/>
<p><span id='display'></span></p>
<input list="browsers" name="browser" autocomplete>
<datalist id="browsers">
<option value="Assam">
<option value="Delhi">
<option value="Karnataka">
<option value="Madhya pradesh">
<option value="Maharashtra">
</datalist>
<br />
Range <select><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option><option value="100">100</option></select>
<p>Students were asked to rate the food in the cafeteria on a scale of 1 to 10. <mark>The average result was 7.</mark></p>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.