Forms Advanced

All HTML topics

∙ Chapter 29

Forms Advanced

Modern HTML forms support many input types and built-in validation. Often you can do a lot without JavaScript.

Feature	How	Why
Validation	`required`, `minlength`, `pattern`	Stops bad data early
Mobile keyboards	`type="email"`, `type="tel"`	Right keyboard on phones
Grouping	`<fieldset>` + `<legend>`	Clarity + accessibility
Suggestions	`<datalist>`	Quick hints

forms-advanced.php

📝 Edit Code

<style>  body{font-family:sans-serif;padding:16px}  label{display:block;margin:10px 0 4px}  input,select{padding:9px;width:100%;max-width:360px}  fieldset{border:1px solid #ddd;border-radius:12px;padding:12px 14px;max-width:420px}  legend{padding:0 6px}  button{margin-top:12px;padding:10px 12px;border:0;border-radius:10px;background:#7c4dff;color:#fff;font-weight:700;cursor:pointer}</style><form>  <fieldset>    <legend>Profile</legend>    <label for="email2">Email (required)</label>    <input id="email2" name="email" type="email" autocomplete="email" required>    <label for="phone">Phone (pattern)</label>    <input id="phone" name="phone" type="tel" placeholder="10 digits" pattern="\d{10}">    <label for="color">Favorite color</label>    <input id="color" name="color" type="color" value="#00e5ff">    <label for="role">Role (datalist)</label>    <input id="role" name="role" list="roles" placeholder="Start typing...">    <datalist id="roles">      <option value="Frontend Developer"></option>      <option value="Backend Developer"></option>      <option value="Full Stack Developer"></option>      <option value="UI/UX Designer"></option>    </datalist>    <label for="plan">Plan</label>    <select id="plan" name="plan">      <option>Free</option>      <option>Pro</option>      <option>Team</option>    </select>    <button type="submit">Submit</button>  </fieldset></form><p style="max-width:420px;color:#555">Try submitting with empty email to see browser validation. Phone accepts exactly 10 digits.</p>

👁 Live Preview

💡 Browser validation helps UX, but always validate again on the server in real apps.

PreviousHTML Landing

HTML Tutorial

NextAll Topics →