53 lines
1.7 KiB
HTML
53 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<title>Happy Birthday Message Creator</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<body>
|
||
|
|
<h1>Happy Birthday Message Creator</h1>
|
||
|
|
<form method="POST" action="https://wp.zybooks.com/form-viewer.php">
|
||
|
|
<div>
|
||
|
|
<label for="birthdayMessage">Message?</label>
|
||
|
|
<input type="text" id="birthdayMessage" name="birthdayMessage" value="Happy birthday!">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="emailAddr">Email address?</label>
|
||
|
|
|
||
|
|
<!-- TODO: Add regular expression to pattern -->
|
||
|
|
<input type="email" id="emailAddr" name="emailAddr"
|
||
|
|
placeholder="name@domain.com"
|
||
|
|
pattern="[a-zA-Z0-9-_\.]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="dateToSend">Date to send?</label>
|
||
|
|
<!-- TODO: Add date widget -->
|
||
|
|
<input type="date" id="dateToSend" name="dateToSend">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="messageColor">Message color?</label>
|
||
|
|
<!-- TODO: Add color widget -->
|
||
|
|
<input type="color" id="messageColor" name="messageColor">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="numBlinks">Number of blinks?</label>
|
||
|
|
<!-- TODO: Add number widget -->
|
||
|
|
<input type="number" value=0 min=0 max=10 name="numBlinks"
|
||
|
|
id="numBlinks">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label for="musicVolume">Music volume?</label>
|
||
|
|
<!-- TODO: Add range widget -->
|
||
|
|
<input type=range min=0 max=50 value=20 name="musicVolume"
|
||
|
|
id="musicVolume">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TODO: Add submit button -->
|
||
|
|
<div>
|
||
|
|
<button type="Submit">Send Birthday Message</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|