Sử dụng HTML Form Trong Trang Web

HTML Lập Trình
09/03/2025
54 minutes read

Nếu bạn là một người mới bắt đầu học lập trình web, thì việc làm quen với Form một phần không thể thiếu của hầu hết các trang web hiện nay. Nào bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu nhé!

Table of Contents

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

Hãy thử tưởng tượng một trang web mà bạn không thể tương tác, không thể nhập thông tin, không thể gửi phản hồi. Chắc chắn nó sẽ không hữu ích tí nào đúng không? HTML Forms chính là yếu tố giúp trang web trở nên có ích hơn.

Ví dụ, bạn đã bao giờ:

Đăng nhập vào tài khoản Gmail của mình?
Đặt hàng một món đồ trên Shopee?
Điền thông tin vào một form khảo sát trực tuyến?

Tất cả những hành động này đều được thực hiện thông qua HTML Forms. Bây giờ chúng ta hãy cùng nhau đi vào tìm hiểu HTML Form nhé!

HTML Forms là gì?

HTML Forms (biểu mẫu HTML) là một phần không thể thiếu của bất kỳ trang web nào muốn thu thập thông tin từ người dùng. Chúng là một tập hợp các phần tử cho phép người dùng nhập dữ liệu, chọn tùy chọn và gửi thông tin đó đến máy chủ để xử lý.

Trong khi các thành phần HTML khác (ví dụ: đoạn văn, hình ảnh, video) chủ yếu được sử dụng để hiển thị nội dung, form lại được sử dụng để thu thập thông tin từ người dùng. Form là yếu tố tương tác chính giữa người dùng và trang web.

Bạn hãy nghĩ về form như một tờ khai thông tin ở ngoài đời thực:

Khi bạn điền vào một tờ khai thông tin (ví dụ: khi đăng ký một khóa học, mở tài khoản ngân hàng), bạn sẽ cung cấp các thông tin cá nhân, chọn các tùy chọn phù hợp và ký tên xác nhận. HTML Forms hoạt động tương tự như vậy trên web.

Vai trò của form trong việc thu thập dữ liệu:

Form cho phép bạn thu thập nhiều loại dữ liệu khác nhau từ người dùng, bao gồm:

Thông tin cá nhân (tên, địa chỉ, email, số điện thoại).
Thông tin đăng nhập (tên đăng nhập, mật khẩu).
Thông tin thanh toán (số thẻ tín dụng, địa chỉ thanh toán).
Phản hồi, đánh giá, ý kiến đóng góp.
Và nhiều loại thông tin khác tùy thuộc vào mục đích mà bạn muốn sử dụng trong trang web của mình.

Cấu trúc cơ bản của một HTML Form

Một HTML form bao gồm hai thành phần chính:

Các phần tử điều khiển (form controls): Đây là những thành phần cho phép người dùng nhập dữ liệu, chẳng hạn như ô nhập văn bản, ô nhập mật khẩu, nút chọn, hộp kiểm, v.v.
Thẻ <form>: Đây là phần tử bao bọc toàn bộ form, đóng vai trò như một “container” chứa các thành phần khác.

Cú pháp:

<form action="URL" method="GET|POST">
  <!-- Các thành phần của form sẽ được đặt ở đây -->
</form>

Các thuộc tính quan trọng của thẻ <form>:

action: Xác định địa chỉ URL nơi dữ liệu của form sẽ được gửi đến để xử lý.
method: Xác định phương thức HTTP được sử dụng để gửi dữ liệu (GET hoặc POST).

Vì bạn mới học HTML nên chúng ta chỉ cần hiểu sơ về các tính năng này thôi nhé! Bạn không cần phải quá lo lắng vì không hiểu những thứ này đâu. Sau này mình sẽ làm một bài chi tiết hướng dẫn về phần này nha.

Thuộc tính action:

Thuộc tính action là bắt buộc và cho biết nơi dữ liệu form sẽ được gửi đến sau khi người dùng nhấn nút “Submit” (Gửi). Địa chỉ URL này thường là một script (ví dụ: PHP, Python, Node.js) trên server có nhiệm vụ xử lý dữ liệu và thực hiện các hành động cần thiết (ví dụ: lưu dữ liệu vào database, gửi email xác nhận).

Ví dụ:

<form action="/process-order" method="POST">
  <!-- Các thành phần của form đặt hàng -->
</form>

Trong ví dụ này, dữ liệu form sẽ được gửi đến địa chỉ /process-order trên server để xử lý đơn đặt hàng.

Thuộc tính method:

Thuộc tính method xác định phương thức HTTP được sử dụng để gửi dữ liệu form. Có hai phương thức phổ biến nhất là GET và POST.

GET:

Dữ liệu form được thêm vào URL dưới dạng các tham số (ví dụ: name=John&email=john@example.com).
Thích hợp cho việc lấy dữ liệu (ví dụ: tìm kiếm).
Có giới hạn về dung lượng dữ liệu có thể gửi.
Không an toàn cho việc gửi các thông tin nhạy cảm (ví dụ: mật khẩu).

POST:

Dữ liệu form được gửi trong phần thân của HTTP request.
Thích hợp cho việc gửi dữ liệu (ví dụ: đăng ký tài khoản, đặt hàng).
Không có giới hạn về dung lượng dữ liệu có thể gửi.
An toàn hơn cho việc gửi các thông tin nhạy cảm.

Ví dụ:

<form action="/search" method="GET">
  <!-- Các thành phần của form tìm kiếm -->
</form>

<form action="/register" method="POST">
  <!-- Các thành phần của form đăng ký -->
</form>

Các loại Input trong HTML Forms

HTML cung cấp rất nhiều loại input khác nhau để bạn có thể thu thập các loại dữ liệu khác nhau từ người dùng. Mỗi loại input có một mục đích và cách sử dụng riêng. Bây giờ chúng ta sẽ đi vào tìm hiểu từng loại input khác nhau nhé!

1. Ô Nhập Văn Bản (<input type=”text”>)

Đây là loại phần tử điều khiển đơn giản nhất, cho phép người dùng nhập một dòng văn bản.

See the Pen
input text by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="text": Chỉ định loại phần tử là ô nhập văn bản.
id="name": Chỉ định ID của phần tử. ID này phải là duy nhất trên toàn bộ trang web.
name="name": Chỉ định tên của phần tử. Tên này sẽ được sử dụng để xác định dữ liệu được gửi đến máy chủ.

2. Ô Nhập Mật Khẩu (<input type=”password”>)

Tương tự như ô nhập văn bản, nhưng văn bản được nhập vào ô này sẽ được ẩn đi (thường là bằng các dấu hoa thị hoặc dấu chấm).

See the Pen
input type="password" by haycuoilennao19 (@haycuoilennao19)
on CodePen.

3. Ô Nhập Email (<input type=”email”>)

Tương tự như ô nhập văn bản, nhưng trình duyệt sẽ tự động kiểm tra xem văn bản được nhập vào có phải là một địa chỉ email hợp lệ hay không.

See the Pen
input type="email by haycuoilennao19 (@haycuoilennao19)
on CodePen.

4. Ô Nhập Số (<input type=”number”>)

Cho phép người dùng nhập một số. Bạn có thể sử dụng các thuộc tính min và max để giới hạn phạm vi số được phép nhập.

See the Pen
input type="number" by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="number": Chỉ định loại phần tử là ô nhập số.
min="18": Chỉ định giá trị nhỏ nhất được phép nhập.
max="100": Chỉ định giá trị lớn nhất được phép nhập.

5. Ô Nhập Phạm Vi (<input type=”range”>)

Hiển thị một thanh trượt cho phép người dùng chọn một giá trị trong một phạm vi nhất định.

See the Pen
<input type="range"> by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="range": Chỉ định loại phần tử là ô nhập phạm vi.
min="0": Chỉ định giá trị nhỏ nhất của phạm vi.
max="100": Chỉ định giá trị lớn nhất của phạm vi.

6. Ô Chọn Màu (<input type=”color”>)

Hiển thị một bảng màu cho phép người dùng chọn một màu.

See the Pen
input type="color" by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="color": Chỉ định loại phần tử là ô chọn màu.

7. Ô Chọn Ngày (<input type=”date”>)

Hiển thị một lịch cho phép người dùng chọn một ngày.

See the Pen
input type="date" by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="date": Chỉ định loại phần tử là ô chọn ngày.

8. Hộp Kiểm (<input type=”checkbox”>)

Hiển thị một hộp kiểm cho phép người dùng chọn hoặc bỏ chọn một tùy chọn.

See the Pen
input type="checkbox" by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="checkbox": Chỉ định loại phần tử là hộp kiểm.
value="agree": Chỉ định giá trị được gửi đến máy chủ nếu hộp kiểm được chọn.

9. Nút Chọn (<input type=”radio”>)

Hiển thị một nhóm các nút chọn cho phép người dùng chọn một tùy chọn duy nhất.

See the Pen
input type="radio" by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="radio": Chỉ định loại phần tử là nút chọn.
name="gender": Tất cả các nút chọn trong cùng một nhóm phải có cùng tên.
value="male", value="female", value="other": Chỉ định giá trị được gửi đến máy chủ khi nút chọn tương ứng được chọn.

10. Ô Tải Tệp Lên (<input type=”file”>)

Cho phép người dùng tải tệp lên từ máy tính của họ.

See the Pen
input type="file" by haycuoilennao19 (@haycuoilennao19)
on CodePen.

type="file": Chỉ định loại phần tử là ô tải tệp lên.

11. Nút Gửi (<input type=”submit”>)

Tạo một nút cho phép người dùng gửi dữ liệu form đến máy chủ.

<input type="submit" value="Gửi">

type="submit": Chỉ định loại phần tử là nút gửi.
value="Gửi": Chỉ định văn bản hiển thị trên nút.

12. Nút Đặt Lại (<input type=”reset”>)

Tạo một nút cho phép người dùng đặt lại tất cả các giá trị trong form về giá trị mặc định.

<input type="reset" value="Đặt lại">

type="reset": Chỉ định loại phần tử là nút đặt lại.
value="Đặt lại": Chỉ định văn bản hiển thị trên nút.

Bạn có thể thêm một nút đặt lại để người dùng có thể dễ dàng xóa tất cả các giá trị đã nhập và bắt đầu lại từ đầu.

13. Vùng Văn Bản (<textarea>)

Cho phép người dùng nhập nhiều dòng văn bản.

See the Pen
textarea by haycuoilennao19 (@haycuoilennao19)
on CodePen.

<textarea>: Thẻ bắt đầu và kết thúc vùng văn bản.
rows="4": Chỉ định số hàng hiển thị ban đầu.
cols="50": Chỉ định số cột hiển thị ban đầu.

Bạn có thể sử dụng vùng văn bản để người dùng nhập lời nhắn hoặc bình luận.

14. Danh Sách Chọn (<select>)

Hiển thị một danh sách các tùy chọn cho phép người dùng chọn một hoặc nhiều tùy chọn.

See the Pen
select by haycuoilennao19 (@haycuoilennao19)
on CodePen.

<select>: Thẻ bắt đầu và kết thúc danh sách chọn.
<option>: Thẻ đại diện cho một tùy chọn trong danh sách.
value="hanoi", value="hochiminh", value="danang": Chỉ định giá trị được gửi đến máy chủ khi tùy chọn tương ứng được chọn.

Thuộc tính placeholder:

Thuộc tính placeholder cho phép bạn hiển thị một đoạn văn bản gợi ý trong input khi nó trống. Văn bản này sẽ biến mất khi người dùng bắt đầu nhập nội dung vào trong ô input.

See the Pen
Thuộc tính placeholder by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Thuộc tính name:

Thuộc tính name là cực kỳ quan trọng vì nó xác định tên của dữ liệu khi gửi đến server. Khi form được gửi, dữ liệu sẽ được gửi dưới dạng một cặp “tên=giá trị”, trong đó “tên” là giá trị của thuộc tính name và “giá trị” là giá trị mà người dùng đã nhập vào input.

<input type="text" name="username" id="username">

Khi form được gửi, dữ liệu sẽ được gửi dưới dạng username=giá_trị_người_dùng_nhập.

Labels (Nhãn) trong HTML Forms

Label cung cấp một mô tả ngắn gọn về mục đích của một input, giúp người dùng hiểu rõ hơn về thông tin mà họ cần nhập vào.

Cách liên kết label với input:

Để liên kết một label với một input, bạn cần sử dụng thuộc tính for của label và thuộc tính id của input. Giá trị của thuộc tính for phải trùng với giá trị của thuộc tính id.

See the Pen
Labels Form HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Trong ví dụ này, label “Tên đăng nhập:” được liên kết với input có id="username". Khi người dùng nhấp vào label, input sẽ được focus (đặt con trỏ vào input).

Buttons (Nút) trong HTML Forms

Buttons (nút) là một phần quan trọng của HTML Forms, cho phép người dùng thực hiện các hành động khác nhau, như gửi form, xóa form, hoặc thực hiện một chức năng nào đó trên trang web.

Cú pháp:

<button type="loại button" value="giá trị button">
  Nội dung của button
</button>

Các thuộc tính quan trọng của thẻ <button>:

type: Xác định loại button (button, submit, reset).
value: Xác định giá trị của button (sử dụng để truy cập dữ liệu trên server).

Các loại button:

button: Nút bấm thông thường (không có hành vi mặc định). Sử dụng để thực hiện các hành động tùy chỉnh bằng JavaScript.

Ví dụ:<button type="button" onclick="alert('Hello!')"> Nhấn vào đây </button>

submit: Nút gửi form. Sử dụng để gửi dữ liệu form đến server.

Ví dụ:<button type="submit">Gửi</button>

So sánh thẻ <button> và <input type=”submit”>:

Cả hai thẻ này đều có thể được sử dụng để tạo nút gửi form, nhưng thẻ <button> có một số ưu điểm hơn:

Cho phép bạn sử dụng HTML bên trong button (ví dụ: hình ảnh, biểu tượng) và dễ dàng tạo kiểu bằng CSS hơn.

See the Pen
Button Submit by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Trong ví dụ này, chúng ta sử dụng buttons để tạo nút gửi tin nhắn và nút xóa form. Khi người dùng nhấn nút “Gửi tin nhắn”, dữ liệu form sẽ được gửi đến server. Khi người dùng nhấn nút “Xóa form”, tất cả các giá trị trong form sẽ bị xóa.

Form Validation trong HTML Forms

Form validation (kiểm tra dữ liệu) là quá trình xác minh rằng dữ liệu mà người dùng nhập vào form là hợp lệ và đáp ứng các yêu cầu nhất định mà chúng ta muốn đặt ra cho người dùng. Việc kiểm tra dữ liệu là rất quan trọng để đảm bảo tính chính xác và hợp lệ của thông tin được gửi đến server và ngăn chặn tình trạng hacker sử dụng những form này để tấn công trang web của chúng ta.

Các thuộc tính kiểm tra dữ liệu tích hợp sẵn trong HTML5:

HTML5 cung cấp một số thuộc tính kiểm tra dữ liệu tích hợp sẵn, giúp bạn dễ dàng thực hiện các kiểm tra dữ liệu cơ bản mà không cần sử dụng JavaScript.

required: Xác định input là bắt buộc phải điền.
<input type=”text” name=”name” required>

minlength: Xác định độ dài tối thiểu của input (chỉ áp dụng cho các loại input văn bản).
<input type=”password” name=”password” minlength=”8″>

maxlength: Xác định độ dài tối đa của input (chỉ áp dụng cho các loại input văn bản).
<input type=”text” name=”username” maxlength=”20″>

min: Xác định giá trị nhỏ nhất cho input (chỉ áp dụng cho các loại input số).
<input type=”number” name=”age” min=”18″>

max: Xác định giá trị lớn nhất cho input (chỉ áp dụng cho các loại input số).
<input type=”number” name=”age” max=”100″>

pattern: Xác định một regular expression để kiểm tra định dạng của input.
<input type=”text” name=”phone” pattern=”[0-9]{10}”>

See the Pen
Form Validation HTML by haycuoilennao19 (@haycuoilennao19)
on CodePen.

Trong ví dụ này, chúng ta sử dụng các thuộc tính kiểm tra dữ liệu tích hợp sẵn để tạo ra một form đăng ký có khả năng kiểm tra tính hợp lệ của họ tên (bắt buộc), email (bắt buộc, định dạng email), mật khẩu (bắt buộc, độ dài tối thiểu 8 ký tự) và số điện thoại (bắt buộc, 10 chữ số).

Lời kết

Hy vọng rằng những kiến thức này sẽ giúp bạn tự tin hơn trong việc xây dựng các ứng dụng web tương tác và thú vị.

Lời khuyên:

Hãy thực hành thật nhiều để nắm vững các khái niệm và kỹ năng đã học.
Tìm hiểu thêm về CSS và JavaScript để tạo ra các form đẹp mắt và có khả năng tương tác cao hơn.
Tham khảo các tài liệu và khóa học trực tuyến để nâng cao kiến thức và kỹ năng của bạn.

Tài liệu tham khảo:

Chúc bạn thành công trên con đường trở thành một lập trình viên web chuyên nghiệp!