81 lines
2.8 KiB
HTML
81 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" dir="ltr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
|
<title>Form a Story</title>
|
|
</head>
|
|
<body>
|
|
<section id="top">
|
|
<img src="https://content.codecademy.com/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
|
|
</section>
|
|
|
|
<section id="main">
|
|
<h1>Complete the Form -<br> Complete the Story!</h1>
|
|
<hr>
|
|
<!--Add your form below:-->
|
|
<form action="/story.html" method="GET">
|
|
<!-- Text selection -->
|
|
<label for="animal-1">First Animal :</label>
|
|
<input type="text" id="animal-1" name="animal-1" value="fox" required>
|
|
<br>
|
|
|
|
<label for="animal-2">Second Animal :</label>
|
|
<input type="text" id="animal-2" name="animal-2" value="bunny" required>
|
|
<br>
|
|
|
|
<label for="animal-3">Third Animal :</label>
|
|
<input type="text" id="animal-3" name="animal-3" value="capybara" required>
|
|
<br>
|
|
|
|
<label for="adj-1">First Adjectiv (ends in -ed) :</label>
|
|
<input type="text" id="adj-1" name="adj-1" value="gawked" required>
|
|
<br>
|
|
|
|
<label for="verb-1">First Verb (ends in -ing) :</label>
|
|
<input type="text" id="verb-1" name="verb-1" value="running" required>
|
|
<br>
|
|
|
|
<!-- Number selection -->
|
|
<label for="num-1">Number :</label>
|
|
<input type="number" id="num-1" name="num-1" value="100" min="10" max="500" step="10" required>
|
|
<br>
|
|
|
|
<!-- Radio selection -->
|
|
<span>Yes or No :</span>
|
|
<input type="radio" id="yes" name="answer" value="yes" required>
|
|
<label for="yes">Yes</label>
|
|
<input type="radio" id="no" name="answer" value="no" required>
|
|
<label for="no">No</label>
|
|
<br>
|
|
|
|
<!-- List selection -->
|
|
<label for="speed">Relative speed :</label>
|
|
<select id="speed" name="speed" required>
|
|
<option value="slower">Slower</option>
|
|
<option value="faster">Faster</option>
|
|
</select>
|
|
<br>
|
|
|
|
<label for="quote">Motivational Quote :</label>
|
|
<input type="text" id="quote" name="quote" list="quote-choices" required>
|
|
<datalist id="quote-choices">
|
|
<option value="humility is key">Humility is key.</option>
|
|
<option value="brag after winning">Brag after winning.</option>
|
|
<option value="never get cocky">Never get cocky.</option>
|
|
</datalist>
|
|
<br>
|
|
|
|
<!-- Text input -->
|
|
<label for="message"></label>
|
|
<textarea id="message" name="message" rows="8" cols="40" required></textarea>
|
|
<br>
|
|
|
|
<!-- Final rendering of the story -->
|
|
<input type="submit" value="Form My Story!">
|
|
</form>
|
|
</section>
|
|
</body>
|
|
</html>
|