HTML Forms

Forms allow users to send data to a server. A form is created with the <form> element and contains controls such as <input>, <select>, and <textarea>.

  • action — URL where the form data is sent.
  • method — HTTP method: GET or POST.

1) Basic Form Structure


<form action="/submit.php" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

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

  <button type="submit">Submit</button>
</form>

2) Common Form Controls


<!-- Text, Password, Number, Date -->
<input type="text" name="username" maxlength="20" required>
<input type="password" name="pwd">
<input type="number" name="age" min="1" max="120">
<input type="date" name="dob">

<!-- Radio (single choice) -->
<p>Gender:
  <label><input type="radio" name="gender" value="male"> Male</label>
  <label><input type="radio" name="gender" value="female"> Female</label>
</p>

<!-- Checkbox (multiple choice) -->
<p>Skills:
  <label><input type="checkbox" name="skills[]" value="html"> HTML</label>
  <label><input type="checkbox" name="skills[]" value="css"> CSS</label>
</p>

<!-- Select & Textarea -->
<label for="country">Country</label>
<select id="country" name="country">
  <option value="">--Select--</option>
  <option value="in">India</option>
  <option value="us">USA</option>
</select>

<label for="msg">Message</label>
<textarea id="msg" name="message" rows="4"></textarea>

<!-- Submit / Reset -->
<button type="submit">Send</button>
<button type="reset">Reset</button>

3) Group Fields with <fieldset> and <legend>


<fieldset>
  <legend>Login</legend>
  <label>Username</label>
  <input type="text">
  <label>Password</label>
  <input type="password">
</fieldset>

4) Basic Validation (HTML5 attributes)


<!-- required, minlength, maxlength, pattern -->
<input type="text" name="pin" pattern="[0-9]{6}" title="6 digit PIN" required>

<!-- email and url are validated automatically -->
<input type="email" name="work_email" required>
<input type="url" name="portfolio">

GET vs POST

  • GET: appends data to the URL (good for simple searches, not sensitive data, limited length).
  • POST: sends data in the request body (preferred for login forms and larger/secure submissions).

Live Preview (static)

Tip: Always provide a name attribute for inputs; otherwise, their values are not sent to the server.