📋 Bài 4A: HTML Forms Cơ Bản

<form action="/submit" method="POST" id="myForm">
  <!-- Input elements ở đây -->
  <button type="submit">Gửi</button>
</form>

// Lấy form element
const form = document.getElementById('demo1Form');

// Submit event - Xử lý khi form được gửi
form.addEventListener('submit', function(e) {
  e.preventDefault(); // Ngăn form gửi đi (reload page)
  
  // Thu thập dữ liệu từ form
  const formData = new FormData(this);
  const data = Object.fromEntries(formData);
  
  // Hiển thị dữ liệu
  console.log('Form data:', data);
});

// Reset event - Xử lý khi form được reset
form.addEventListener('reset', function(e) {
  if (!confirm('Bạn có chắc?')) {
    e.preventDefault(); // Hủy reset nếu cần
  }
});

<!-- Text input -->
<input type="text" name="username" placeholder="Tên đăng nhập">

<!-- Password input -->
<input type="password" name="password" placeholder="Mật khẩu">

<!-- Email input -->
<input type="email" name="email" placeholder="email@example.com">

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

<!-- Tel input -->
<input type="tel" name="phone" placeholder="0123456789">

// INPUT event - Xảy ra realtime khi user gõ
input.addEventListener('input', function(e) {
  const value = e.target.value; // Lấy giá trị hiện tại
  
  // Validation logic
  if (value.length < 3) {
    // Hiển thị lỗi
  } else {
    // Hợp lệ
  }
});

// BLUR event - Xảy ra khi input mất focus
input.addEventListener('blur', function(e) {
  const value = e.target.value;
  
  // Validate sau khi user nhập xong
  if (!validateEmail(value)) {
    // Hiển thị lỗi
  }
});

// CHANGE event - Xảy ra khi giá trị thay đổi
input.addEventListener('change', function(e) {
  const value = e.target.value;
  
  // Xử lý khi giá trị thay đổi
  console.log('Changed to:', value);
});

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

<!-- Cách 2: Bao bọc input trong label -->
<label>
  Email:
  <input type="email" name="email">
</label>

<h3>Sở thích:</h3>
<label>
  <input type="checkbox" name="hobbies" value="reading">
  Đọc sách
</label>
<label>
  <input type="checkbox" name="hobbies" value="music">
  Nghe nhạc
</label>

<h3>Giới tính:</h3>
<label>
  <input type="radio" name="gender" value="male">
  Nam
</label>
<label>
  <input type="radio" name="gender" value="female">
  Nữ
</label>

// Lắng nghe tất cả checkboxes
document.querySelectorAll('input[name="hobbies"]').forEach(checkbox => {
  checkbox.addEventListener('change', function(e) {
    console.log('Checkbox:', e.target.value);
    console.log('Checked:', e.target.checked); // true/false
    
    // Lấy tất cả checkboxes đã chọn
    const checked = document.querySelectorAll('input[name="hobbies"]:checked');
    const values = Array.from(checked).map(cb => cb.value);
    console.log('All selected:', values);
  });
});

// Lắng nghe radio buttons
document.querySelectorAll('input[name="gender"]').forEach(radio => {
  radio.addEventListener('change', function(e) {
    console.log('Selected gender:', e.target.value);
  });
});

<label for="country">Quốc gia:</label>
<select name="country" id="country">
  <option value="">-- Chọn quốc gia --</option>
  <option value="vn">Việt Nam</option>
  <option value="us">Hoa Kỳ</option>
  <option value="jp">Nhật Bản</option>
</select>

<label for="message">Tin nhắn:</label>
<textarea name="message" id="message" 
          rows="4" 
          placeholder="Nhập tin nhắn..."></textarea>

// Select change event
select.addEventListener('change', function(e) {
  const value = e.target.value; // Giá trị được chọn
  const text = e.target.options[e.target.selectedIndex].text; // Text hiển thị
  
  console.log('Selected:', value, text);
});

// Textarea input event (realtime character count)
textarea.addEventListener('input', function(e) {
  const value = e.target.value;
  const length = value.length;
  
  console.log('Character count:', length);
  
  // Hiển thị số ký tự
  document.getElementById('charCount').textContent = `${length} ký tự`;
});

<!-- Submit button - Gửi form -->
<button type="submit">Gửi form</button>
<input type="submit" value="Gửi form">

<!-- Reset button - Reset form -->
<button type="reset">Xóa form</button>
<input type="reset" value="Xóa form">

<!-- Button thông thường - Không làm gì mặc định -->
<button type="button" onclick="doSomething()">Click me</button>