Create a valid HTML 5 document have a level 1 heading \'Movie Review\' create a
ID: 3837675 • Letter: C
Question
Create a valid HTML 5 document have a level 1 heading 'Movie Review' create a form with the following attributes-- id (movie_survey), name (movie_survey), action (form.php) and method (post). There isn't a form.php file so the form will not actually send the data. Inside the form add the following. For accessibility use label element 'label for' with each except for the radio buttons and buttons. You will not receive credit for empty attribute values. Group in a fieldset with a legend (Movie Genre) the following: a radio set for Movie Genre and include at least 6 different movie genres. Include attributes for name, id, type and value for each radio button. Buttons must be exclusive so that you may only select one of the buttons at a time. Add a text input for Movie Name (moviename). Include attributes for id, name, and type. Add a date input for Review Date. Include attributes for id, name and type. Add a url input for Movie Website. Include attributes for id, name and type. Use a select list to pick a rating. Add 5 possible ratings from 1 to 5 stars Include attributes for name, id, option, size (5), and value for each option. Add a comments area using a textarea with attributes for name, id, rows, and columns. Add a submit button with a value, type and id (submitButton) Add a reset button with a value, type and id (resetButton) Style the form with the following embedded CSS *{box sizing: border-box:} form {backsground-color: #660000; font-family-arial; padding: 10px; width: 500px; color: #eeeeee } fieldset {width: 150px; float: right; } input{type = "radio"}{display: inline: padding-right: 5px;} input{type = "date"}{width: 150px;} input {type = "url"}{width: 150px;} input{type = "text"}{width: 150px;} label float: left; width: 150px; clear: left; text-align: right; padding right: 10px; margin-top: 10px;} input, select, textarea {margin-top: 10px; display: block;} select width: 150px; text-align center; font-size: 1em; } textarea {width: 100%;} #submitButton {display: inline; width: 50%; text-align: center: clear: both; font-size: 1em:} #resetButton {display:inline; width: 50%; text-align: center; clear: both; font-size: 1em;} Submit the html file Below is a screen shot of the final formExplanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
*{box-sizing: border-box;}
form{background-color:#660000;
font-family:arial;
padding:10px;
width: 500px;
color: #eeeeee;
}
fieldset{width: 150px;float: right;margin-bottom: 10px;}
input[type="radio"]{display:inline;padding-right:5px;}
input[type="date"]{width:150px;}
input[type="url"]{width:150px;}
input[type="text"]{width:150px;}
label{
float:left;
width:150px;
clear:left;
text-align:right;
padding-right:10px;
margin-top:10px;
}
input,select,textarea{margin-top:10px;display:block;}
select{width:150px;text-align:center;font-size:1em;}
textarea{width:100%;}
#submitButton{display:inline;width:49%;text-align:center;clear:both;font-size:1em;}
#resetButton{display:inline;width:49%;text-align:center;clear:both;font-size:1em;}
</style>
</head>
<body>
<h1>Movie Review</h1>
<form id="movie_survey" name="movie_survey" action="form.php" method="POST">
<fieldset>
<legend>Movie Genre</legend>
<input type="radio" name="movie_type" value="1"> Action<br>
<input type="radio" name="movie_type" value="2"> Comedy<br>
<input type="radio" name="movie_type" value="3"> Drama<br>
<input type="radio" name="movie_type" value="4"> Horror<br>
<input type="radio" name="movie_type" value="5"> Kids<br>
<input type="radio" name="movie_type" value="6"> Sci-Fi<br>
<input type="radio" name="movie_type" value="7"> Western<br>
</fieldset>
<label for="moviename">Movie Name</label><input type="text" id="moviename" name="moviename" value="">
<label for="reviewdate">Review Date</label><input type="date" id="reviewdate" name="reviewdate" value="">
<label for="moviewebsite">Movie Website</label><input type="url" id="moviewebsite" name="moviewebsite" value="">
<label for="movie_rating">Rating</label><select id="movie_rating" name="movie_rating" multiple>
<option value=1>1 Star</option>
<option value=2>2 Star</option>
<option value=3>3 Star</option>
<option value=4>4 Star</option>
<option value=5>5 Star</option>
</select>
<label for="movie_comment">Comment</label><textarea rows="4" cols="50" id ="movie_comment" name="movie_comment"> </textarea>
<div>
<button type="submit" id="submitButton" value="Submit">Submit</button>
<button type="reset" id="resetButton" value="Reset">Reset</button>
</div>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.