Untitled
unknown
plain_text
10 months ago
3.2 kB
4
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoo Keeper Application Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
form {
max-width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
h1 {
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea, select, button {
width: 100%;
margin-bottom: 15px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.checkbox-group label {
display: flex;
align-items: center;
gap: 5px;
}
.mandatory {
color: red;
}
</style>
</head>
<body>
<form>
<h1>Zoo Keeper Application Form</h1>
<p>Please complete the form. Mandatory fields are marked with <span class="mandatory">*</span></p>
<fieldset>
<legend><strong>Contact Details</strong></legend>
<label for="name">Name <span class="mandatory">*</span></label>
<input type="text" id="name" name="name" required>
<label for="telephone">Telephone</label>
<input type="tel" id="telephone" name="telephone">
<label for="email">Email <span class="mandatory">*</span></label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend><strong>Personal Information</strong></legend>
<label for="age">Age</label>
<input type="number" id="age" name="age" min="0">
<label for="gender">Gender</label>
<select id="gender" name="gender">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
<label for="reason">When did you first know you wanted to be a zoo-keeper?</label>
<textarea id="reason" name="reason" rows="4"></textarea>
</fieldset>
<fieldset>
<legend><strong>Pick Your Favorite Animals</strong></legend>
<div class="checkbox-group">
<label><input type="checkbox" name="animals" value="zebra"> Zebra</label>
<label><input type="checkbox" name="animals" value="cat"> Cat</label>
<label><input type="checkbox" name="animals" value="anaconda"> Anaconda</label>
<label><input type="checkbox" name="animals" value="human"> Human</label>
<label><input type="checkbox" name="animals" value="elephant"> Elephant</label>
<label><input type="checkbox" name="animals" value="wildebeest"> Wildebeest</label>
<label><input type="checkbox" name="animals" value="pigeon"> Pigeon</label>
<label><input type="checkbox" name="animals" value="crab"> Crab</label>
</div>
</fieldset>
<button type="submit">Submit Application</button>
</form>
</body>
</html>
Editor is loading...
Leave a Comment