Form input types and built-in validation

<style>
  body { font-family: sans-serif; }
  label { display: block; margin-top: 10px; font-weight: bold; }
  input, select { padding: 8px; width: 100%; max-width: 320px; box-sizing: border-box; }
  input:invalid:not(:placeholder-shown) { border: 2px solid #dc2626; }
  input:valid:not(:placeholder-shown) { border: 2px solid #16a34a; }
</style>
<form>
  <label for="name">Full name</label>
  <input id="name" name="name" required minlength="3" autocomplete="name" placeholder="Amina Wanjiru">

  <label for="phone">Safaricom number</label>
  <input id="phone" name="phone" type="tel" required pattern="0[17][0-9]{8}" placeholder="0712345678"
         title="10 digits starting with 07 or 01">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" placeholder="you@example.com">

  <label for="qty">How many cakes? (1 to 10)</label>
  <input id="qty" name="qty" type="number" min="1" max="10" value="1" required>

  <label for="day">Delivery date</label>
  <input id="day" name="day" type="date" required>

  <label for="size">Size</label>
  <select id="size" name="size" required>
    <option value="">Choose a size</option>
    <option>1 kg</option>
    <option>2 kg</option>
  </select>

  <p><label><input type="checkbox" required> I agree to the terms</label></p>
  <button type="button" onclick="if (this.form.reportValidity()) document.getElementById('ok').textContent = 'Looks good! (practice form, nothing is sent)';">Send</button>
  <p id="ok"></p>
</form>

<form>
  <fieldset>
    <legend>How will you pay?</legend>
    <label><input type="radio" name="pay" value="mpesa" checked> M-Pesa</label>
    <label><input type="radio" name="pay" value="card"> Card</label>
    <label><input type="radio" name="pay" value="cash"> Cash on delivery</label>
  </fieldset>
  <fieldset>
    <legend>Extras</legend>
    <label><input type="checkbox" name="extra" value="candles"> Candles</label>
    <label><input type="checkbox" name="extra" value="card"> Greeting card</label>
  </fieldset>
</form>

<input type="text" name="fullname" autocomplete="name" autocapitalize="words" required>
<input type="email" name="email" autocomplete="email" required>
<input type="tel" name="phone" autocomplete="tel" inputmode="tel" pattern="0[17][0-9]{8}" required>
<input type="text" name="otp" autocomplete="one-time-code" inputmode="numeric" maxlength="6">
<input type="password" name="new-password" autocomplete="new-password" minlength="8">
<input type="text" name="town" list="towns">
<datalist id="towns"><option value="Nairobi"><option value="Mombasa"><option value="Kisumu"><option value="Nakuru"><option value="Eldoret"></datalist>

<style>
  form { font: 14px system-ui; max-width: 340px; }
  label { display: block; margin-top: 10px; font-weight: 600; }
  input, select, textarea { width: 100%; box-sizing: border-box; padding: 8px; border: 2px solid #cbd5e1; border-radius: 8px; font: inherit; margin-top: 4px; }
  input:user-invalid, select:user-invalid { border-color: #dc2626; }
  fieldset { border: 1px solid #e2e8f0; border-radius: 8px; margin-top: 12px; }
  fieldset label { display: inline; font-weight: 400; }
  button { margin-top: 14px; padding: 10px 16px; background: #0b1b35; color: #fff; border: 0; border-radius: 8px; font-weight: 700; }
  output { display: block; margin-top: 8px; }
</style>
<form id="book">
  <label for="n">Full name</label>
  <input id="n" name="name" autocomplete="name" required minlength="3">
  <label for="p">Phone</label>
  <input id="p" name="phone" type="tel" autocomplete="tel" required pattern="0[17][0-9]{8}" title="10 digits starting with 07 or 01" placeholder="0712345678">
  <label for="s">Service</label>
  <select id="s" name="service" required>
    <option value="">Choose a service</option>
    <option>Website design</option><option>Computer repair</option><option>Training</option>
  </select>
  <label for="d">Preferred date</label>
  <input id="d" name="date" type="date" required>
  <label for="b">Budget: <output id="bo">20000</output></label>
  <input id="b" name="budget" type="range" min="5000" max="100000" step="5000" value="20000">
  <fieldset>
    <legend>Contact me by</legend>
    <input type="radio" id="c1" name="contact" value="call" required><label for="c1">Call</label>
    <input type="radio" id="c2" name="contact" value="whatsapp"><label for="c2">WhatsApp</label>
  </fieldset>
  <label for="m">Details (optional)</label>
  <textarea id="m" name="details" rows="3" maxlength="300"></textarea>
  <label><input type="checkbox" name="consent" required style="width:auto"> I agree to be contacted about this booking</label>
  <button>Book now</button>
  <output id="res"></output>
</form>
<script>
  const d = document.getElementById("d");
  d.min = new Date().toISOString().slice(0, 10);          // no past dates
  const b = document.getElementById("b");
  b.addEventListener("input", () => document.getElementById("bo").textContent = Number(b.value).toLocaleString());
  document.getElementById("book").addEventListener("submit", e => {
    e.preventDefault();
    document.getElementById("res").textContent = "Booked: " + JSON.stringify(Object.fromEntries(new FormData(e.target)));
  });
</script>

const phone = document.querySelector("#p");
phone.addEventListener("input", () => {
  phone.setCustomValidity("");
  if (phone.validity.patternMismatch) {
    phone.setCustomValidity("Enter a Kenyan mobile number like 0712345678");
  }
});

<form action="/contact.php" method="post">           <!-- your own server script -->
<form action="https://formspree.io/f/xxxx" method="post">  <!-- a form service -->
<form action="/search" method="get">                  <!-- data appears in the URL: good for search -->