[HTML] Bài 7 – Các Phần Tử Nhập Liệu & Biểu Mẫu

Trong bài viết này, chúng ta sẽ cùng nói về các phần tử <input> hỗ trợ tạo ra các biểu mẫu nhập liệu để thu thập thông tin từ người sử dụng. Ví dụ thường thấy của các phần tử <input> và các biểu mẫu nhập liệu trên các trang web là khung đăng nhập tài khoản người dùng, ô tìm kiếm, v.v…. Hãy mở đầu với một vài trường nhập liệu văn bản.

Các phần tử input cơ bản nhất

Kiểu input cơ bản nhất được thấy trên hầu hết các trang web là text.
Một ô nhập liệu nhỏ cho phép chúng ta nhập vào 1 dòng chữ.

Trường text thông thường:<br><inputtype="text"placeholder="Bạn có thể gõ chữ ở đây..."><br>
Trường text mật khẩu:<br><inputtype="password"placeholder="Mật khẩu sẽ được ẩn đi">

Liên kết tham khảo: thuộc tính type.

Container <form>

Để đóng gói dữ liệu thu thập được từ người sử dụng và gửi về một máy chủ thực hiện dịch vụ,
các thẻ input cần được đặt trong một container <form> có một nút nhấn submit.

<form>
   Tên của bạn:<br><inputtype="text"name="name"><br>
   Tin nhắn:<br><inputtype="text"name="message"><br><br><buttontype="submit">Gửi</button><buttontype="reset">Đặt lại</button></form>

Khi các input được sử dụng trong một biểu mẫu để thu thập và gửi thông tin tới máy chủ,
mỗi input sẽ cần được gắn tên bằng thuộc tính name. Đây là một tiện ích được thiết kế để coder có thể làm việc với các thông tin thu thập được khi viết code cho phần mềm xử lý ở phía máy chủ.

Bảo mật khi nhận & gửi dữ liệu

Theo thiết lập mặc định thì khi một biểu mẫu được xác nhận gửi đi, các thông tin thu thập được sẽ được hiển thị ngay trên thanh địa chỉ của trình duyệt web mà bạn đang sử dụng.

Điều này không có vấn đề gì đối với những thông tin chung chung như từ khóa tìm kiếm google, hay từ khóa tìm kiếm sản phẩm trên một trang web bán hàng online. Tuy nhiên, trong trường hợp những thông tin thu thập được rất quan trọng như thông tin đăng nhập, thì chúng ta cần sử dụng thuộc tính method để giữ cho các thông tin được an toàn.

Thuộc tính method có thể được sử dụng với 1 trong 2 giá trị: get và post. Trong đó method="get" được sử dụng ngầm định nếu không được chỉ định trong code HTML. Còn method="post" chính là phương thức có thể giúp chúng ta ngăn không cho những thông tin quan trọng bị hiển thị trên thanh địa chỉ của trình duyệt web.

<formmethod="post"><!-- inputs & buttons --></form>

[HTML] Bài 8 – Các Kiểu Input Khác