💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 31 tháng 5 năm 2026

Cơ bản về Form | Form | input

📌

Kết luận

Form được tạo từ bộ ba <form> + <input> + <button>

📝 Mã thực tế tại đây
<form>
  <input type="text" name="name" placeholder="Tên">
  <button type="submit">Gửi</button>
</form>

Vai trò của từng phần tử

Phần tửVai trò
<form>Khung bao ngoài nhóm các ô nhập liệu
<input>Ô nhập văn bản
<button type="submit">Nút bấm để gửi dữ liệu
Bằng cách thay đổi thuộc tính type của <input>, bạn có thể tạo ra nhiều loại ô nhập liệu khác nhau: text (văn bản), email (email), password (mật khẩu), number (số), v.v.

Tầm quan trọng của thuộc tính name

Thuộc tính name sẽ trở thành "Khóa" (key) khi gửi dữ liệu. Máy chủ sẽ dựa vào giá trị của name để biết dữ liệu đó là gì.

Tổng kết

- Tạo form bằng cấu trúc <form> > <input> > <button> - Thuộc tính name là khóa khi gửi dữ liệu - Dùng type để thay đổi loại ô nhập liệu

Hãy thử trong phần bài tập

Hãy tạo một form có ô nhập tên và nút gửi nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Hãy tạo một form có ô nhập tên và nút gửi. Thuộc tính name của input phải là 'name'.

Gợi ý khi gặp khó khăn

Dùng form, input type="text" và button type="submit".

15pt

Cơ bản về Form

Hãy tạo một form có ô nhập tên và nút gửi. Thuộc tính name của input phải là 'name'.

Nhấp vào lỗi để đánh dấu dòng. ✕=lỗi ⚠=cảnh báo ›=log.

Lộ trình học · Toàn bộ bài giảng

Đi sâu bài tập này

"Cơ bản về Form" là bài HTML mức 初級. Hãy tạo một form có ô nhập tên và nút gửi. Thuộc tính name của input phải là 'name'. Chạy ngay trên trình duyệt với kiểm tra tự động.

Thẻ form dùng để thu thập dữ liệu từ người dùng. Mẫu tương tự xuất hiện trong review code và UI thực tế.

Kết hợp với lộ trình html-basic. Bài #26 củng cố kỹ năng html-advanced.

Quy trình từng bước

  1. Đọc bài giải thích và nắm mục tiêu "Cơ bản về Form"
  2. Kiểm tra cột HTML và bắt đầu từ mã mẫu
  3. Mở gợi ý nếu bí, so sánh với lời giải
  4. Bấm Chạy để xem preview/console
  5. Hệ thống kiểm tra có chứa: <form>, name=.
  6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải

Mã giải dùng thẻ: form, input, button. Kiểm tra thẻ đóng và lồng nhau. Giải thích: Thẻ form dùng để thu thập dữ liệu từ người dùng. Gợi ý: Dùng form, input type="text" và button type="submit".

Ứng dụng thực tế & nghề nghiệp

Form HTML là cửa vào đăng ký, liên hệ, thanh toán. Liên kết label/input bắt buộc trong kiểm tra WCAG.

Lỗi thường gặp

  • Bỏ qua gợi ý: Dùng form, input type="text" và button type="submit".
  • for của label và id input không khớp
  • input trong form thiếu name
  • checkbox không có label

Xử lý sự cố

Preview không đổi sau khi chạy
Kiểm tra bạn sửa đúng cột HTML và đã bấm Chạy.
Đúng nhưng không pass
Hệ thống kiểm tra có chứa: <form>, name=. Kiểm tra typo và thẻ đóng.
Lỗi trên console
Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại
Dùng màn ngang hoặc mở cùng URL trên PC.

Mẹo phỏng vấn & portfolio

  • Giải thích kỹ thuật trong "Cơ bản về Form" bằng lời của bạn trong 30 giây
  • Luyện mô tả từng dòng mã giải trên bảng trắng
  • Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại

Thuật ngữ

form
Biểu mẫu gửi dữ liệu người dùng.
label
Mô tả input; ghép for/id.
checkbox
Chọn bật/tắt.

Từ khóa trên trang này

Trang này là bài tập miễn phí về Cơ bản về Form cho từ khóa: Cơ bản về Form, html-advanced, 初級, form, input, button, basic form.

Công cụ liên quan

Lộ trình học

Lộ trình học →

Bài tập liên quan

Câu hỏi thường gặp (FAQ)

Cơ bản về Form có miễn phí không?

Bài tập này hoàn toàn miễn phí và chạy ngay trên trình duyệt. Không cần đăng ký hay thẻ tín dụng.

Độ khó và thời gian?

"Cơ bản về Form" ở mức "初級". Đọc hướng dẫn trước; người mới thường hoàn thành trong 30 phút. Mỗi bài khoảng 5–15 phút. Dùng gợi ý, sau đó xem lời giải nếu bí.

Sau khi đúng làm gì?

Sau khi đúng, dùng liên kết bài tiếp theo. Hoàn thành danh mục rồi sang lộ trình học.

Làm trên điện thoại được không?

Chạy trên trình duyệt di động, nhưng gõ mã trên máy tính tiện hơn.

Bài tập khác ở đâu?

Danh sách bài tập: /vi/learn/ có bộ lọc danh mục.

Điểm cần nhớ trong "Cơ bản về Form"?

Thẻ form dùng để thu thập dữ liệu từ người dùng. Gợi ý: Dùng form, input type="text" và button type="submit".

Vị trí danh mục html-advanced?

Form HTML là cửa vào đăng ký, liên hệ, thanh toán. Liên kết label/input bắt buộc trong kiểm tra WCAG.

Các bước cụ thể cho "Cơ bản về Form"?

1. Đọc bài giải thích và nắm mục tiêu "Cơ bản về Form"
2. Kiểm tra cột HTML và bắt đầu từ mã mẫu
3. Mở gợi ý nếu bí, so sánh với lời giải
4. Bấm Chạy để xem preview/console
5. Hệ thống kiểm tra có chứa:
, name=.
6. Sau khi đúng, làm bài trước/sau trong cùng danh mục

Cách đọc mã giải?

Mã giải dùng thẻ: form, input, button. Kiểm tra thẻ đóng và lồng nhau.

Giải thích: Thẻ form dùng để thu thập dữ liệu từ người dùng.

Gợi ý: Dùng form, input type="text" và button type="submit".

Khi gặp sự cố?

Preview không đổi sau khi chạy → Kiểm tra bạn sửa đúng cột HTML và đã bấm Chạy.
Đúng nhưng không pass → Hệ thống kiểm tra có chứa: , name=. Kiểm tra typo và thẻ đóng.
Lỗi trên console → Mở DevTools Console, kiểm tra ngoặc và dấu ngoặc kép.
Khó gõ trên điện thoại → Dùng màn ngang hoặc mở cùng URL trên PC.

Liên quan nghề nghiệp?

Giải thích kỹ thuật trong "Cơ bản về Form" bằng lời của bạn trong 30 giây Luyện mô tả từng dòng mã giải trên bảng trắng Chuẩn bị một phương án thay thế và lý do chọn cách hiện tại