📋 Bài 4: HTML Forms

<!-- Form cơ bản -->
<form action="/submit" method="POST">
    <!-- Các input elements ở đây -->
    <label for="name">Tên:</label>
    <input type="text" id="name" name="name" required>
    
    <button type="submit">Gửi</button>
</form>

<!-- Form với nhiều thuộc tính -->
<form 
    action="https://example.com/process-form" 
    method="POST"
    target="_blank"
    enctype="multipart/form-data"
    novalidate
    autocomplete="on"
>
    <!-- Form content -->
</form>

<!-- Text inputs -->
<input type="text" name="fullname" placeholder="Họ và tên">
<input type="email" name="email" placeholder="email@example.com" required>
<input type="password" name="password" placeholder="Mật khẩu">
<input type="tel" name="phone" placeholder="0123-456-789">
<input type="url" name="website" placeholder="https://example.com">

<!-- Number & Date inputs -->
<input type="number" name="age" min="18" max="100" step="1">
<input type="range" name="rating" min="1" max="10" value="5">
<input type="date" name="birthday">
<input type="time" name="meeting-time">
<input type="datetime-local" name="appointment">

<!-- Selection inputs -->
<input type="checkbox" name="agree" id="agree" checked>
<input type="radio" name="gender" value="male" id="male">
<input type="radio" name="gender" value="female" id="female">

<!-- File & Hidden inputs -->
<input type="file" name="avatar" accept="image/*">
<input type="hidden" name="user_id" value="123">

<!-- Buttons -->
<input type="submit" value="Gửi form">
<input type="reset" value="Reset">
<input type="button" value="Custom Action">

<!-- Textarea cơ bản -->
<textarea name="message" placeholder="Nhập tin nhắn của bạn..."></textarea>

<!-- Textarea với kích thước và các thuộc tính -->
<textarea 
    name="description" 
    rows="5" 
    cols="50"
    maxlength="500"
    placeholder="Mô tả sản phẩm (tối đa 500 ký tự)"
    required
>Nội dung mặc định ở đây</textarea>

<!-- Textarea không resize -->
<textarea 
    name="comment" 
    style="resize: none; width: 100%; height: 120px;"
    placeholder="Bình luận của bạn..."
></textarea>

<!-- Select đơn giản -->
<select name="country">
    <option value="">Chọn quốc gia</option>
    <option value="vn">Việt Nam</option>
    <option value="us">United States</option>
    <option value="jp" selected>Japan</option>
</select>

<!-- Select với optgroup -->
<select name="city">
    <option value="">Chọn thành phố</option>
    <optgroup label="Miền Bắc">
        <option value="hanoi">Hà Nội</option>
        <option value="haiphong">Hải Phòng</option>
    </optgroup>
    <optgroup label="Miền Nam">
        <option value="hcm">TP. Hồ Chí Minh</option>
        <option value="cantho">Cần Thơ</option>
    </optgroup>
</select>

<!-- Multiple select -->
<select name="skills" multiple size="5">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js" selected>JavaScript</option>
    <option value="react">React</option>
    <option value="vue" selected>Vue.js</option>
</select>

<!-- Cách 1: Sử dụng for và id -->
<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" name="username">

<!-- Cách 2: Wrap input trong label -->
<label>
    Email:
    <input type="email" name="email">
</label>

<!-- Checkbox và Radio với label -->
<label for="agree">
    <input type="checkbox" id="agree" name="agree">
    Tôi đồng ý với điều khoản sử dụng
</label>

<!-- Radio group -->
<fieldset>
    <legend>Giới tính:</legend>
    <label>
        <input type="radio" name="gender" value="male">
        Nam
    </label>
    <label>
        <input type="radio" name="gender" value="female">
        Nữ
    </label>
</fieldset>

<form>
    <fieldset>
        <legend>Thông tin cá nhân</legend>
        <label for="fname">Họ:</label>
        <input type="text" id="fname" name="firstname">
        
        <label for="lname">Tên:</label>
        <input type="text" id="lname" name="lastname">
    </fieldset>

    <fieldset>
        <legend>Thông tin liên hệ</legend>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        
        <label for="phone">Điện thoại:</label>
        <input type="tel" id="phone" name="phone">
    </fieldset>

    <fieldset disabled>
        <legend>Thông tin không thể chỉnh sửa</legend>
        <label for="readonly-info">ID:</label>
        <input type="text" id="readonly-info" value="123456" readonly>
    </fieldset>
</form>

<form>
    <!-- Required fields -->
    <input type="text" name="name" required placeholder="Tên (bắt buộc)">
    <input type="email" name="email" required placeholder="Email (bắt buộc)">

    <!-- Length validation -->
    <input type="password" name="password" 
           minlength="8" maxlength="20" 
           placeholder="Mật khẩu (8-20 ký tự)">

    <!-- Number validation -->
    <input type="number" name="age" 
           min="18" max="65" 
           placeholder="Tuổi (18-65)">

    <!-- Pattern validation (Regex) -->
    <input type="text" name="phone" 
           pattern="[0-9]{10,11}" 
           placeholder="Số điện thoại (10-11 số)"
           title="Vui lòng nhập 10-11 chữ số">

    <!-- Custom validation messages -->
    <input type="email" name="work-email" 
           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
           title="Email phải có định dạng đúng"
           placeholder="Email công ty">

    <!-- File validation -->
    <input type="file" name="avatar" 
           accept="image/jpeg,image/png,image/gif"
           required>

    <button type="submit">Gửi form</button>
</form>