Form HTML là gì? Hướng dẫn tạo Form A-Z cho người mới bắt đầu
Bạn đã bao giờ điền thông tin vào một form đăng ký, form liên hệ, hay thực hiện một thao tác tìm kiếm trên website chưa? Chắc chắn là rồi! Đằng sau những giao diện quen thuộc đó chính là Form HTML. Nếu bạn đang tò mò và muốn tìm hiểu form HTML là gì, tại sao nó lại quan trọng và cách tự tay xây dựng những biểu mẫu đầu tiên, thì bạn đã tìm đúng nơi rồi đấy. Hãy cùng Việt Thắng đi từ những khái niệm cơ bản nhất đến các ví dụ trực quan dễ hiểu nhé!
Form HTML là gì và dùng để làm gì?
Trước khi đi sâu vào kỹ thuật, chúng ta cần nắm vững khái niệm cốt lõi. Hãy xem Form HTML như một cây cầu nối vô hình, giúp người dùng “trò chuyện” và gửi thông tin của họ đến với website.
Định nghĩa Form HTML (Biểu mẫu HTML)
Hiểu một cách đơn giản, Form HTML hay biểu mẫu trong HTML, là một tập hợp các phần tử được sử dụng để thu thập dữ liệu từ người dùng. Hãy hình dung nó như một tờ đơn đăng ký kỹ thuật số. Thay vì dùng bút và giấy, người dùng sẽ nhập thông tin vào các ô, chọn các tùy chọn, và nhấn nút gửi. Toàn bộ cấu trúc này được tạo ra bởi thẻ <form> và các thẻ con bên trong nó.
Vai trò chính: Thu thập dữ liệu từ người dùng
Vai trò cốt lõi và duy nhất của form là thu thập thông tin. Dữ liệu này sau đó sẽ được gửi đến máy chủ (server) để xử lý cho nhiều mục đích khác nhau. Các ứng dụng của form vô cùng phổ biến, bạn có thể bắt gặp chúng ở mọi nơi:
- Form đăng ký/đăng nhập: Thu thập tên người dùng, email, mật khẩu.
- Form liên hệ: Giúp khách hàng gửi câu hỏi, yêu cầu hỗ trợ.
- Form thanh toán: Nhập thông tin thẻ tín dụng, địa chỉ giao hàng.
- Form khảo sát: Lấy ý kiến, phản hồi từ người dùng về một sản phẩm, dịch vụ.
- Thanh tìm kiếm: Nhận từ khóa tìm kiếm từ người dùng.
Không có form, website chỉ là một trang thông tin một chiều. Form biến nó thành một công cụ tương tác hai chiều mạnh mẽ.
Cấu trúc và các thuộc tính của thẻ <form> trong HTML
Mọi biểu mẫu đều bắt đầu với “khung xương” là thẻ <form> trong HTML. Thẻ này hoạt động như một thùng chứa, bao bọc tất cả các trường nhập liệu (input fields) và các nút bấm lại với nhau. Nó cũng có các “chỉ dẫn” quan trọng để trình duyệt biết phải làm gì với dữ liệu khi người dùng nhấn gửi.
Cú pháp cơ bản của thẻ <form>
Cú pháp của thẻ form rất đơn giản. Nó có thẻ mở <form> và thẻ đóng </form>. Tất cả các thành phần khác như ô nhập liệu, danh sách chọn, nút bấm đều phải được đặt bên trong cặp thẻ này.
<form action="..." method="..."> <!-- Các thành phần của form như input, label, textarea sẽ nằm ở đây --></form>Như bạn thấy, có hai thuộc tính cực kỳ quan trọng là action và method.
Thuộc tính action: Nơi dữ liệu được gửi đến
Hãy tưởng tượng action giống như địa chỉ người nhận trên một phong bì thư. Thuộc tính này chỉ định URL (đường dẫn) của tệp tin hoặc trang web sẽ xử lý dữ liệu được gửi từ form. Khi người dùng nhấn nút “Gửi”, toàn bộ thông tin họ đã điền sẽ được đóng gói và chuyển đến địa chỉ này.
<!-- Dữ liệu sẽ được gửi đến tệp "xu-ly-dang-ky.php" để xử lý --><form action="/xu-ly-dang-ky.php" method="post"> ...</form>Thuộc tính method: Cách thức gửi dữ liệu
Nếu action là địa chỉ người nhận, thì method chính là phương thức vận chuyển. Nó quyết định cách thức dữ liệu được gửi đi. Có hai phương thức chính và phổ biến nhất là GET và POST. Việc lựa chọn phương thức nào là cực kỳ quan trọng, ảnh hưởng trực tiếp đến hiệu năng và bảo mật.
Sự khác nhau giữa phương thức GET và POST trong Form
Hiểu rõ sự khác biệt giữa phương thức GET và POST trong HTML là một trong những kiến thức nền tảng quan trọng nhất khi làm việc với form. Mỗi phương thức có đặc điểm và trường hợp sử dụng riêng, lựa chọn sai có thể dẫn đến những lỗi không đáng có.
Phương thức GET: Đặc điểm và khi nào nên dùng
Khi sử dụng GET, dữ liệu từ form sẽ được nối trực tiếp vào URL của thuộc tính action. Bạn có thể thấy chúng sau dấu chấm hỏi (?). Mỗi cặp tên-giá trị được ngăn cách bởi dấu và (&).
Ví dụ: https://wiweb.vn/search?q=form+html&category=basic
Đặc điểm:
- Dữ liệu hiển thị công khai trên thanh địa chỉ.
- Bị giới hạn về độ dài dữ liệu có thể gửi (khoảng 2048 ký tự).
- Các trang kết quả có thể được đánh dấu (bookmark) và chia sẻ dễ dàng.
Khi nào nên dùng? GET lý tưởng cho các chức năng không yêu cầu bảo mật cao như tìm kiếm, lọc sản phẩm. Vì dữ liệu nằm trên URL, người dùng có thể dễ dàng chia sẻ liên kết kết quả tìm kiếm đó cho người khác.
Phương thức POST: Đặc điểm và khi nào nên dùng
Ngược lại, phương thức POST gửi dữ liệu một cách “âm thầm” bên trong phần thân (body) của yêu cầu HTTP. Dữ liệu này hoàn toàn không hiển thị trên URL.
Đặc điểm:
- Dữ liệu được gửi đi một cách riêng tư, an toàn hơn.
- Không có giới hạn về độ dài dữ liệu.
- Không thể bookmark trang kết quả (vì thông tin không có trên URL).
Khi nào nên dùng? POST là lựa chọn bắt buộc cho bất kỳ form nào xử lý thông tin nhạy cảm. Ví dụ như form đăng nhập html css, form đăng ký, form thanh toán, hay bất cứ đâu có chứa mật khẩu, thông tin cá nhân.
Bảng so sánh nhanh GET và POST
| Tiêu chí | GET | POST |
| Hiển thị dữ liệu | Trên thanh địa chỉ URL | Trong phần thân của HTTP request (ẩn) |
| Bảo mật | Kém, không dùng cho dữ liệu nhạy cảm | Cao hơn, phù hợp cho dữ liệu nhạy cảm |
| Giới hạn dữ liệu | Bị giới hạn (khoảng 2048 ký tự) | Không giới hạn |
| Mục đích sử dụng | Tìm kiếm, lọc dữ liệu, lấy thông tin | Đăng ký, đăng nhập, gửi dữ liệu cần bảo mật |
Các thành phần (Elements) cốt lõi bên trong một Form HTML
Bên trong “khung xương” <form> là “nội thất” – các thẻ HTML cụ thể giúp tạo nên các ô nhập liệu, nhãn, nút bấm… Đây chính là những gì người dùng nhìn thấy và tương tác trực tiếp.
Thẻ <input> trong HTML là gì và các loại (type) phổ biến
Thẻ <input> có thể xem là “diễn viên” đa tài nhất trong một form. Nó có thể biến hóa thành nhiều loại ô nhập liệu khác nhau chỉ bằng cách thay đổi thuộc tính type. Đây là một số các thẻ input trong form phổ biến nhất:
type="text": Ô nhập văn bản một dòng thông thường (tên, email…).type="password": Giống ô text nhưng các ký tự sẽ bị che đi (dùng cho mật khẩu).type="submit": Tạo ra một nút bấm để gửi form đi.type="radio": Nút chọn một trong nhiều tùy chọn (ví dụ: chọn giới tính).type="checkbox": Hộp kiểm cho phép chọn một hoặc nhiều tùy chọn.type="file": Cho phép người dùng chọn và tải tệp tin từ máy tính.type="date": Cung cấp một giao diện chọn ngày tháng tiện lợi.
Thẻ <label>: Gắn nhãn cho các trường nhập liệu
Thẻ <label> dùng để tạo nhãn mô tả cho một trường <input>. Nó không chỉ giúp người dùng hiểu rõ cần nhập gì vào ô, mà còn cải thiện trải nghiệm người dùng. Khi bạn nhấp vào một label, con trỏ chuột sẽ tự động nhảy vào ô input tương ứng. Điều này được thực hiện bằng cách kết nối thuộc tính for của label với thuộc tính id của input.
<label for="username">Tên đăng nhập:</label><input type="text" id="username" name="username">Thẻ <textarea>: Cho phép nhập văn bản dài
Khi bạn cần một ô nhập liệu lớn hơn cho phép người dùng viết nhiều dòng, như phần bình luận hay nội dung email, thẻ <textarea> là lựa chọn hoàn hảo. Bạn có thể kiểm soát kích thước của nó thông qua thuộc tính rows (số dòng) và cols (số cột).
<label for="message">Nội dung tin nhắn:</label><textarea id="message" name="message" rows="5" cols="30"></textarea>Thẻ <select> và <option>: Tạo danh sách thả xuống
Để tạo một menu thả xuống cho phép người dùng chọn một giá trị từ danh sách có sẵn, bạn sẽ kết hợp thẻ <select> (để tạo hộp chọn) và các thẻ <option> (đại diện cho mỗi lựa chọn) bên trong nó.
<label for="city">Chọn thành phố:</label><select id="city" name="city"> <option value="hcm">Hồ Chí Minh</option> <option value="hn">Hà Nội</option> <option value="dn">Đà Nẵng</option></select>Thẻ <button>: Tạo nút bấm tương tác
Ngoài <input type="submit">, bạn cũng có thể dùng thẻ <button> để tạo nút bấm. Ưu điểm của <button> là bạn có thể chèn thêm nội dung khác bên trong nó, ví dụ như hình ảnh hoặc icon, giúp nút bấm trở nên sinh động hơn.
<button type="submit">Gửi Đi</button>
Hướng dẫn thực hành: Cách tạo một Form đăng ký trong HTML
Lý thuyết là vậy, giờ là lúc chúng ta kết hợp mọi thứ lại để tạo ra một biểu mẫu hoàn chỉnh. Dưới đây là một vài ví dụ về form trong HTML bạn có thể tham khảo và tự thực hành.
Ví dụ 1: Tạo Form đăng nhập đơn giản
Đây là cấu trúc cơ bản nhất của một form đăng nhập. Nó bao gồm hai trường nhập liệu cho tên người dùng, mật khẩu và một nút gửi.
<h2>Đăng nhập tài khoản</h2><form action="/handle-login.php" method="post"> <div> <label for="username">Tên đăng nhập:</label><br> <input type="text" id="username" name="username" required> </div> <br> <div> <label for="password">Mật khẩu:</label><br> <input type="password" id="password" name="password" required> </div> <br> <div> <button type="submit">Đăng nhập</button> </div></form>Ví dụ 2: Tạo Form liên hệ cơ bản
Đây là một ví dụ phổ biến khác về cách tạo form html. Form này thu thập tên, email và nội dung tin nhắn từ người dùng.
<h2>Liên hệ với chúng tôi</h2><form action="/handle-contact.php" method="post"> <div> <label for="fullname">Họ và tên:</label><br> <input type="text" id="fullname" name="fullname" required> </div> <br> <div> <label for="email">Email:</label><br> <input type="email" id="email" name="email" required> </div> <br> <div> <label for="message">Nội dung:</label><br> <textarea id="message" name="message" rows="5" required></textarea> </div> <br> <div> <button type="submit">Gửi liên hệ</button> </div></form>
Tổng kết những điểm chính cần nhớ về Form HTML
Vậy là chúng ta đã cùng nhau đi qua những kiến thức nền tảng nhất về Form HTML. Hiểu được form là công cụ không thể thiếu để thu thập dữ liệu người dùng, biến website từ tĩnh thành động. Hãy nhớ rằng, thẻ <form> là trái tim của mọi biểu mẫu, với hai thuộc tính quan trọng là action (gửi đi đâu) và method (gửi bằng cách nào). Việc lựa chọn giữa GET và POST phụ thuộc hoàn toàn vào tính chất và độ bảo mật của dữ liệu bạn cần thu thập.
Bạn thấy phần nào trong việc tạo form HTML là thử thách nhất? Hãy chia sẻ thắc mắc của bạn ở phần bình luận bên dưới nhé. Nếu bạn cần một website hoàn chỉnh với những biểu mẫu chuyên nghiệp được tối ưu hóa, đừng ngần ngại liên hệ với Việt Thắng. Chúng tôi luôn sẵn lòng hỗ trợ bạn!