HTML Forms & Input

<form action="/submit.php" method="POST">
  <!-- form fields go here -->
  <button type="submit">Submit</button>
</form>

<!-- method="GET"  → data visible in URL (search forms)
     method="POST" → data hidden in body (login, contact forms) -->

<!-- Text -->
<input type="text" name="username" placeholder="Enter username">

<!-- Password (hidden characters) -->
<input type="password" name="password">

<!-- Email (validates email format) -->
<input type="email" name="email" required>

<!-- Number -->
<input type="number" name="age" min="18" max="60">

<!-- Phone -->
<input type="tel" name="phone" pattern="[0-9]{10}">

<!-- Date -->
<input type="date" name="dob">

<!-- File upload -->
<input type="file" name="photo" accept="image/*">

<!-- Range slider -->
<input type="range" name="volume" min="0" max="100">

<!-- Color picker -->
<input type="color" name="fav_color">

<!-- Hidden (sent with form but not shown) -->
<input type="hidden" name="user_id" value="42">

<!-- Radio buttons (pick one) -->
<label><input type="radio" name="dept" value="cse"> CSE</label>
<label><input type="radio" name="dept" value="ece"> ECE</label>
<label><input type="radio" name="dept" value="mech"> MECH</label>

<!-- Checkboxes (pick multiple) -->
<label><input type="checkbox" name="skills" value="html"> HTML</label>
<label><input type="checkbox" name="skills" value="css" checked> CSS</label>

<!-- Dropdown select -->
<select name="semester">
  <option value="">Choose semester</option>
  <option value="1">Semester 1</option>
  <option value="2" selected>Semester 2</option>
  <option value="3">Semester 3</option>
</select>

<!-- Label links to input via "for" = input "id" -->
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" cols="40"
           placeholder="Type your message here..." required>
</textarea>

<form action="contact.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" required>

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

  <button type="submit">Send Message</button>
</form>