Untitled
<!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>
Leave a Comment