Nội dung
- Phần tử
- Phần tử
- Thẻ nhập Text
- Ví dụ
- Thẻ nhập Radio Button
- Ví dụ
- Nút Submit
- Ví dụ
- Thuộc tính Action
- Thuộc tính Method
- Sử dụng GET khi nào?
- Sử dụng POST khi nào?
- Thuộc tính Name
- Ví dụ
- Nhóm dữ liệu trong
Form với
- Ví dụ
- Phần code trang “action_page.php”
- Các thuộc tính của Form trong HTML
- Bài tập
Phần tử
Form trong HTML thường được sử dụng để thu thập dữ liệu đầu vào của người sử dụng. Phần tử định nghĩa một Form trong HTML:
.
Các phần tử trong form
.
Các phần tử trong form có thể chứa các các kiểu phần tử khác nhau như các ô nhập dữ liệu [textboxes], các ô cho người dùng lựa chọn [checkboxes hoặc radio buttons], các nút cho người dùng kích gửi dữ liệu [submit buttons] và nhiều phần tử khác nữa.
Phần tử
Phần tử là một phần tử quan trọng nhất của Form. Phần tử có nhiều kiểu khác nhau, phụ thuộc vào thuộc tính type. Đây là các kiểu phần tử sẽ được giới thiệu trong bài này:
| text | Định nghĩa kiểu nhập dữ liệu là ô văn bản thông thường |
| radio | Định nghĩa kiểu nhập dữ liệu là ô chọn dạng radio button [chọn một trong nhiều lựa chọn] |
| submit | Định nghĩa một nút submit [cho việc gửi dữ liệu trên form] |
| Bạn sẽ học nhiều hơn về các kiểu thẻ input trong các bài giới sau. |
Thẻ nhập Text
định nghĩa một trường nhập dữ liệu 1 dòng cho text:
Ví dụ
Họ đệm:
Tên:
Kết quả sẽ hiển thị trên trình duyệt giống như sau:
Họ đệm:
Tên:
Chú ý: Bản thân form là không hiển thị. Cũng chú ý rằng độ rộng mặc định của trường text là 20 ký tự.
Thẻ nhập Radio Button
định nghĩa một radio button. Các nút Radio cho phép người sử dụng chọn MỘT trong một danh sách giới hạn các lựa chọn.
Ví dụ
Nam
Nữ
Khác
Đoạn code HTML trên sẽ được hiển thị như sau trên trình duyệt:
Nam
Nữ
Khác
Nút Submit
định nghĩa một nút cho việc gửi dữ liệu trên Form [submitting] tới một trang khác để xử lý dữ liệu của form này [form-handler]. Form-handler thường là một trang chạy ở phía server cho phép xử lý dữ liệu nhập. Form-handler được chỉ định trong thuộc tính action của form:
Ví dụ
Họ đệm:
Tên:
Nếu bạn kích nút “Submit” dữ liệu trên form sẽ được gửi tới trang “action_page.php”. Phía máy chủ sẽ thực hiện xử lý dữ liệu gửi và đưa ra đầu ra. Về xử lý phía server bạn có thể sử dụng ngôn ngữ lập trình PHP Đoạn code HTML ở trên sẽ được hiển thị trên trình duyệt như sau:
Thuộc tính Action
Thuộc tính action xác định hành động được thực hiện khi form được gửi đi khi người sử dụng kích nút submit. Cách phổ biến nhất khi gửi dữ liệu của form tới server là sử dụng một nút submit. Thông thường form được gửi tới một trang web chạy trên máy chủ web. Trong ví dụ trên, một script chạy ở phía server được xác định để xử lý form đã gửi:
Nếu thuộc tính action bỏ qua, action sẽ được thiết lập tới trang hiện tại.
Thuộc tính Method
Thuộc tính method xác định kiểu phương thức HTTP [GET hoặc POST] được sử dụng gửi dữ liệu trên form:
hoặc:
Một câu hỏi đặt ra là chúng ta nên sử dụng phương thức POST hay GET? Phương thức nào tốt hơn? Chúng ta sẽ phân tích ở phần tiếp.
Sử dụng GET khi nào?
Bạn có thể sử dụng GET [mặc định phương thức này]. Sử dụng GET nếu việc gửi form là thụ động [giống như bạn thực hiện truy vấn trên các máy tìm kiếm] và dữ liệu không cần mã hoá, không chứa các thông tin nhạy cảm như mật khẩu, v.v. Khi bạn sử dụng GET, dữ liệu form sẽ bị nhìn thấy trên thanh địa chỉ của trang như ví dụ dưới:
action_page.php?txtHoDem=Trần+Hùng&txtTen=Dũng
| GET là phù hợp nhất với số lượng dữ liệu ít. Giới hạn về kích thước dữ liệu GET được thiết lập trong trình duyệt của bạn. |
Sử dụng POST khi nào?
Bạn nên sử dụng POST: Trong trường hợp nếu form cập nhật dữ liệu hoặc dữ liệu trên form gửi đi bao gồm các thông tin nhạy cảm như mật khẩu, mã thẻ ngân hàng,v.v. POST cung cấp cơ chế bảo mật hơn bởi vì dữ liệu được gửi đi không được hiển thị trên thanh địa chỉ của trang.
Thuộc tính Name
Để lấy được dữ liệu đúng khi gửi đi, mỗi trường phải có một thuộc tính name. Ví dụ này sẽ chỉ gửi trường “Họ đệm”, theo bạn tại sao lại không gửi trường “Tên”?:
Ví dụ
Họ đệm:
Tên:
Nhóm dữ liệu trong Form với
Phần từ nhóm dữ liệu liên quan trong một form. Phần tử xác định một phụ đề cho phần tử .
Ví dụ
Thông tin cá nhân:
Họ đệm:
Tên:
Với đoạn code trên kết quả sẽ hiển thị ở trình duyệt:
Phần code trang “action_page.php”
Tìm hiểu thêm về cách lấy dữ liệu từ form dữ liệu người dùng nhập gửi tới trang nhận ở phía server.
Trang nhận dữ liệu từ Form
Dữ liệu bạn nhận đã nhận được từ Form là:
Các thuộc tính của Form trong HTML
Phần tử trong HTML có một tập các thuộc tính, nếu được thiết lập sẽ giống như thế này:
.
Các phần tử HTML trong form
.
Bài tập
- Tạo một form HTML sử dụng thẻ kiểu nút lệnh, tên nhãn trên nút hiển thị chữ “Kích vào đây!”
- Tạo hai radio button trên form, một nút gới tính là “Nam”, một nút giới tính là “Nữ”, và cả hai có tên là “GioiTinh”
- Tạo form vơi một nút submit trên form và khi kích vào nút này sẽ nhảy tới trang “dangnhap.php”
- Tạo một form trong HTML và Chỉ định form gửi dữ liệu theo phương thức POST
Đây là danh sách các thuộc tính của :
| accept-charset | Chỉ định bảng mã được sử dụng trong form gửi [mặc định: theo bảng mã của trang]. |
| action | Chỉ định một địa chỉ [url] sẽ gửi dữ liệu trên form tới [mặc định: trang gửi]. |
| autocomplete | Chỉ định cho trình duyệt tự lấy dữ liệu tự động từ dữ liệu người sử dụng đã nhập trước đâu [mặc định: on], ví dụ bạn gõ chữ vào ô nhập, nó sẽ hiện ra các gợi ý các từ bạn đã gõ vào đó. |
| enctype | Chỉ định mã hoá dữ liệu gửi đi [Mặc định: url-encoded]. |
| method | Chỉ định phương thức HTTP được sử dụng khi gửi form [mặc định: GET]. |
| name | Chỉ định một tên được sử dụng để nhận diện các thành phần trên form [với DOM sử dụng: document.forms.name]. |
| novalidate | Chỉ định trình duyệt sẽ không hợp lệ cho form. |
| target | Chỉ định đích của một địa chỉ trong thuộc tính action [mặc định: _self]. |
| Bạn sẽ học nhiều hơn các thuộc tính trong bài học kế tiếp. |