🌐 HTML Lesson 05 — Forms & Inputs

1. Form Structure

<form action="/submit" method="POST">
  <!-- inputs here -->
  <button type="submit">Submit</button>
</form>

2. Input Types

<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="tel">
<input type="url">
<input type="date">
<input type="time">
<input type="color">
<input type="range">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="hidden">
<input type="submit">
<input type="reset">

3. Important Input Attributes

<input type="text"
  name="username"         ← PHP/server မှာ ဒီ name နဲ့ ရမယ်
  id="username"           ← label for= နဲ့ ချိတ်ဆက်
  placeholder="Enter..."  ← hint text
  value="default"         ← initial value
  required                ← submit မရအောင် မဖြည့်ရင်
  minlength="3"           ← minimum characters
  maxlength="50"          ← maximum characters
  disabled                ← click မရဘူး
  readonly                ← change မရဘူး
  autofocus               ← page load ရင် focus
>

4. Label — Input ကို Label နဲ့ ချိတ်ဆက်

<!-- ✅ Recommended: for + id -->
<label for="email">Email:</label>
<input type="email"
       id="email"
       name="email">

<!-- Also works: wrap input -->
<label>
  Username:
  <input type="text" name="user">
</label>

5. Checkbox & Radio

<!-- Checkbox: တစ်ခုထက်ပိုရွေးနိုင် -->
<input type="checkbox"
       name="hobby" value="music"
       id="music">
<label for="music">Music</label>

<input type="checkbox"
       name="hobby" value="sports"
       id="sports" checked>
<label for="sports">Sports</label>

<!-- Radio: တစ်ခုသာ ရွေးနိုင် -->
<input type="radio"
       name="gender" value="male"
       id="male">
<label for="male">Male</label>

<input type="radio"
       name="gender" value="female"
       id="female">
<label for="female">Female</label>

<!-- name တူရမယ် → group -->

6. Select & Textarea

<!-- Dropdown -->
<select name="city">
  <option value="">Choose...</option>
  <option value="ygn">Yangon</option>
  <option value="mdl" selected>
    Mandalay
  </option>
</select>

<!-- Multiple select -->
<select name="skills" multiple>
  <option>HTML</option>
  <option>CSS</option>
  <option>JS</option>
</select>

<!-- Textarea -->
<textarea name="msg"
  rows="4" cols="30"
  placeholder="Your message...">
</textarea>

7. Complete Form Example

<form onsubmit="handleSubmit(event)">
  <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>

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