Untitled

 avatar
unknown
plain_text
a month ago
3.2 kB
2
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>
Leave a Comment