Forms and inputs

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Order a cake | Sunrise Bakery</title>
  <meta name="description" content="Order a celebration cake from Sunrise Bakery at least two days ahead. Choose the size, flavour and date, and we'll confirm by phone.">
</head>
<body>
  <main>
    <h1>Order a cake</h1>
    <p>Order at least two days ahead. Fields marked * are required.</p>

    <form action="thanks.html" method="get">
      <p>
        <label for="name">Your name *</label><br>
        <input id="name" name="name" type="text" autocomplete="name" required minlength="2">
      </p>

      <p>
        <label for="phone">Phone number *</label><br>
        <input id="phone" name="phone" type="tel" autocomplete="tel" required
               pattern="[0-9 +]{10,15}" aria-describedby="phone-hint">
        <br><small id="phone-hint">10 to 15 digits. We call to confirm your order.</small>
      </p>

      <p>
        <label for="email">Email</label><br>
        <input id="email" name="email" type="email" autocomplete="email">
      </p>

      <p>
        <label for="date">Collection date *</label><br>
        <input id="date" name="date" type="date" required>
      </p>

      <p>
        <label for="flavour">Flavour *</label><br>
        <select id="flavour" name="flavour" required>
          <option value="">Choose a flavour</option>
          <option value="chocolate">Chocolate</option>
          <option value="carrot">Carrot</option>
          <option value="vanilla">Vanilla</option>
        </select>
      </p>

      <fieldset>
        <legend>Size *</legend>
        <label><input type="radio" name="size" value="500g" required> 500 g</label>
        <label><input type="radio" name="size" value="1kg"> 1 kg</label>
        <label><input type="radio" name="size" value="2kg"> 2 kg</label>
      </fieldset>

      <p>
        <label for="qty">How many cakes? *</label><br>
        <input id="qty" name="qty" type="number" min="1" max="10" value="1" required>
      </p>

      <p>
        <label for="message">Message on the cake</label><br>
        <textarea id="message" name="message" rows="3" maxlength="40"></textarea>
      </p>

      <p>
        <label><input type="checkbox" name="eggless" value="yes"> Make it eggless</label>
      </p>

      <button type="submit">Send order</button>
    </form>
  </main>
</body>
</html>