Homework Sourse1 HTML use HTML5 support to validate input boxes 2 CSS Pro
1. HTML – use HTML5 support to validate input boxes.
2. CSS – Provide format for tables and headers.
3. JavaScript – Read all information from HTML Form. Display Submitted information in the different window.
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<title>Guest Book</title>
<style>
fieldset {
padding: 1em;
font:80%/1 sans-serif;
border-color: red;
border-style: solid;
width : 50%
}
legend {
font-weight: bold;
font-size: 150%;
}
function display() {
document.write(\"hello\");
}
</style>
</head>
<body>
<header role=\"banner\">
<h1>My Guest Book </h1>
</header>
<form name=\"main\">
<fieldset >
<legend>Personal information</legend>
<h4>What is your name?: <input type=\"text\"><br>
What is your e-mail address? <input type=\"text\"></h4><br>
</fieldset>
<fieldset>
<legend>Survey Questions</legend>
<h4>Please check all that apply: </h4>
<input type=\"checkbox\" name=\"survey1\" value=\"option1\">I really like your Web Site.</br>
<input type=\"checkbox\" name=\"survey1\" value=\"option2\">it\'s one of the best sites I\'ve ever seen.</br>
<input type=\"checkbox\" name=\"survey1\" value=\"option3\">I sure with my site looked as good as yours.</br>
<input type=\"checkbox\" name=\"survey1\" value=\"option4\">I have no taste and I\'m pretty dense,so your site didn\'t do much for me.</br>
<h4> Please rate my site on a scale of 1(poor) to 10(awesome) :
<select>
<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>
</select> <h4>
<h4> Please choose the one thing you love best about my web site : </h4>
<input type=\"radio\" name=\"survey2\" value=\"radio1\"> That amazing picture of you</br>
<input type=\"radio\" name=\"survey2\" value=\"radio2\"> All the cat photos, of course</br>
<input type=\"radio\" name=\"survey2\" value=\"radio3\"> The inspiring recap of your suburban childhood</br>
<input type=\"radio\" name=\"survey2\" value=\"radio4\"> The detailed list of all your Elvis memorable</br>
</br>
<h4> How can I improve my web site?</h4>
<textarea rows=\"4\" cols=\"50\">
please write here.
</textarea>
</fieldset>
<fieldset >
<legend>Free for All!</legend>
Feel free to seed more praise,gift offers,etc.: </br>
<textarea rows=\"4\" cols=\"50\">
</textarea>
</fieldset>
<input type=\"submit\" value =\"Click here to Submit\" onclick =\"display();\"></button> or
<button type=\"reset\" value=\"Reset\">Erase and Start Over</button>
</form>
</body>
</html>
