1. HTML – use HTML5 support to validate input boxes. 2. CSS – Provide format for
ID: 3791862 • Letter: 1
Question
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.
Explanation / Answer
<!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"></button> or
<button type="reset" value="Reset">Erase and Start Over</button>
</form>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.