form.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Gallery - Jacob Howard</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style4.css" type="text/css">
</head>
<body>
 <div id="wrapper">
<header>
<h1>Gallery of Cute Cats</h1>
</header>
<nav>
<ul>
<li><a href="index.html"><button>Home</button></a></li>
<li><a href="gallery2.html"><button>Page 1</button></a></li>
<li><a href="gallery3.html"><button>Page 2</button></a></li>
<li><a href="form.html"><button class="current">Form</button></a></li>
</ul>
</nav>
<main>
<h2>Cute Cats Convention RSVP</h2>
<p>You can fill out the form below to let us know that you plan on attending one or more days the Cute Cats Convention on December 26th through December 31st, 1999.<br>Fields ticked with an asterisk (*) are required.</p>
<fieldset>
<legend>Form</legend>
<form name="rsvp" method="post" id="rsvp" action="#">
Your Name: <input type="text" name="name" id="name" placeholder="John Doe" autofocus><br><br>
* Your Phone Number: <input type="tel" name="number" id="number" placeholder="555-555-5555" required><br><br>
* Check the boxes next to the reasons you wish to attend Cute Cats Convention:<br>
<input type="checkbox" name="loveCats" id="loveCats" value="yes" checked>I love cats!<br>
<input type="checkbox" name="learnMore" id="learnMore" value="yes">I'd like to know more about cats.<br>
<input type="checkbox" name="friend" id="friend" value="yes">A friend is making me.<br><br>
* Do you own any cats? If so, would you like to bring them to the Cute Cats Convention?<br>
<input type="radio" name="yesBring" id="yesBring" value="yes">I own a cat, and I would like to bring them.<br>
<input type="radio" name="yesNoBring" id="yesNoBring" value="yes" checked>I own a cat, but I would not like to bring them.<br>
<input type="radio" name="noCat" id="noCat" value="yes">I do not own a cat.<br><br>
* Please select the day you plan on attending the Cute Cats Convention. If you will attend more than one day, select "multiple".<br>
<select size="1" name="days" id="days" required>
<option value="26th">December 26th</option>
<option value="27th">December 27th</option>
<option value="28th">December 28th</option>
<option value="29th">December 29th</option>
<option value="30th">December 30th</option>
<option value="31st">December 31st</option>
<option value="Multiple">Multiple</option>
</select><br><br>
You may list any other comments you have below.<br>
<textarea name="comments" id="comments" rows="4" cols="40" placeholder="Cats are really great and I can't wait to attend!"></textarea>
<br><br>
<input type="submit" id="submit">
<input type="reset" id="reset">
</form>
</fieldset>
</main>
<footer>
&copy; Jacob Howard 2018
</footer>
</div>
</body>
</html>