Forms, Inputs & Validation

HTML Forms

Forms collect user input — login, search, contact, signup. Wrap fields in <form action="/submit" method="post">.

method="get" sends data in the URL (search). method="post" sends in the body (passwords, long forms).

Real-life example: A form is like a paper admission form — blank boxes you fill, then hand to the office (server).

<form action="/contact" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <button type="submit">Send</button>
</form>

Form Attributes

action is where data goes. method is get or post. autocomplete="on|off" helps browsers fill saved data. novalidate skips browser check (use carefully).

target="_blank" opens the response in a new tab — rare for forms.

Real-life example: action is the address on the envelope. method is whether you send a postcard (get, visible) or sealed letter (post).

• action — URL that receives the form
• method — get or post
• name on inputs — keys sent to the server

Form Elements

Common elements: <input>, <textarea>, <select>, <option>, <button>, and <label>. Always pair <label for="id"> with input id.

Labels help everyone click the right field — especially on mobile.

Real-life example: label is the printed question on a form — "Father's name:" next to the blank line (input).

<label for="msg">Message:</label>
<textarea id="msg" name="msg" rows="4" placeholder="Type here..."></textarea>

<label for="city">City:</label>
<select id="city" name="city">
  <option value="">Choose...</option>
  <option value="delhi">Delhi</option>
  <option value="mumbai">Mumbai</option>
</select>

Input Types

type sets keyboard and validation: text, email, password, number, date, checkbox, radio, file, color, range, tel, url, search, and more.

Use the most specific type — email on mobile shows @ key.

Real-life example: Input type is like choosing the right box on a form — date box for birthday, not a plain text line.

<input type="email" name="email" placeholder="you@email.com" />
<input type="password" name="pass" />
<input type="number" name="age" min="1" max="120" />
<input type="date" name="dob" />
<input type="checkbox" name="agree" /> I agree
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro

Input Attributes

Important attributes: name, value, placeholder, required, disabled, readonly, min, max, maxlength, pattern, and step.

required stops submit until the field is filled. pattern uses regex for custom rules.

Real-life example: required is like "must fill" marked with a red star on school forms.

<input type="text" name="username" required minlength="3" maxlength="20" />
<input type="tel" name="phone" pattern="[0-9]{10}" placeholder="10 digit mobile" />

Input Form Attributes

form="form-id" links an input outside the form tag. formaction and formmethod on submit buttons can override the form defaults.

These are advanced but useful for one input that belongs to a distant form.

Real-life example: form attribute is like a detachable coupon — the coupon (input) sits on another page but still belongs to the main form when submitted.

<form id="contact-form" action="/send" method="post">
  <label for="fullname">Full name</label>
  <input type="text" id="fullname" name="fullname" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="topic">Topic</label>
  <select id="topic" name="topic">
    <option value="course">Course help</option>
    <option value="other">Other</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Send to Rishtaara</button>
</form>