Tại sao Enter lại làm load lại trang?

Đó là hành vi mặc định của Form. Hãy dùng e.preventDefault() trong JS để chặn nó.

label có quan trọng không?

Cực kỳ! Nó giúp người dùng click vào chữ cũng chọn được ô nhập, và tốt cho người dùng khiếm thị dùng phần mềm đọc màn hình.

required đủ chưa?

Tối thiểu—thêm validate JS và thông báo lỗi.

name/autocomplete đúng giúp autofill và conversion.

📋

Biểu mẫu (Form)

1 tuần Sơ cấp

Nhận dữ liệu từ người dùng và kiểm tra tính hợp lệ.

Tổng quan

Cái này là gì?

Form giúp thu thập ý kiến, thông tin người dùng.

Tại sao lại quan trọng?

Là cầu nối giữa người dùng và ứng dụng.

Bạn sẽ học được gì

input, label
submit
validation

Chi tiết

Phần tử biểu mẫu

input, textarea, select. Dùng thuộc tính name để định danh dữ liệu.

Ví dụ:

<input type="text" name="email">

Tips:

Luôn dùng label đi kèm input

Validation (Kiểm tra dữ liệu)

Kiểm tra bỏ trống hoặc đúng định dạng trước khi gửi.

Ví dụ:

required
pattern

Tips:

Nên kiểm tra cả ở HTML (required) và JavaScript

Các bước thực hành

1
Tạo Form cơ bản 3 phút

Tạo form đơn giản có ô nhập tên và nút gửi.
- Dùng thẻ <form>
- Thêm input và button submit
```
<form id="form">\n  <label>Tên: <input type="text" id="user"></label>\n  <button type="submit">Gửi</button>\n</form>
```
2
Chặn load lại trang bằng JS 5 phút

Lấy dữ liệu nhập vào mà không làm trang bị tải lại.
- Lắng nghe sự kiện submit
- Dùng e.preventDefault()
```
form.addEventListener('submit', (e) => {\n  e.preventDefault();\n  console.log(input.value);\n});
```
3
Kiểm tra bỏ trống 5 phút

Nếu không nhập gì thì báo lỗi.
- Dùng if(value.trim() === '')
```
if(val === '') { alert('Nhập đi!'); return; }
```

Vị trí nghề nghiệp & thực tế

Form là lõi B2B SaaS—đăng ký, liên hệ, thanh toán.

Ví dụ trong ngành

Form đăng ký
Textarea liên hệ
Khảo sát radio/checkbox

Kế hoạch học đề xuất

Input types → label → checkbox/radio → validate JS cơ bản.

Kiến thức nền

Form là lõi B2B SaaS—đăng ký, liên hệ, thanh toán.…

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

Tại sao Enter lại làm load lại trang?: Đó là hành vi mặc định của Form. Hãy dùng e.preventDefault() trong JS để chặn nó.
label có quan trọng không?: Cực kỳ! Nó giúp người dùng click vào chữ cũng chọn được ô nhập, và tốt cho người dùng khiếm thị dùng phần mềm đọc màn hình.
required đủ chưa?: Tối thiểu—thêm validate JS và thông báo lỗi.
autocomplete?: name/autocomplete đúng giúp autofill và conversion.

① Đã đọc giải thích. Tiếp theo ② Làm bài tập.

Đã hiểu về Form.

Học về API để kết nối với dữ liệu thực tế.

② Làm bài tập (5 câu)

ツール一覧