Bài 15: Hướng dẫn cách tạo FORM trong HTML

Khi làm web với HTML hoặc sau này bạn có học các ngôn ngữ lập trình khác để làm web  thì việc tạo các form đăng nhập, form nhập dữ liệu sẽ là rất phổ biến. Ở đây chúng ta đang trong series học HTML cơ bản nên mình sẽ chỉ nói đến việc tạo form trong HTML thôi nhé. Ở bài viết này, mình sẽ giới thiệu với bạn cặp thẻ tạo form trong HTML và các thuộc tính đi kèm với cặp thẻ đó giúp bạn hiểu rõ được các sử dụng.

Hướng dẫn cách tạo FORM trong HTML

Để tạo form trong HTML chúng ta sẽ sử dụng cặp thẻ <form> </form> và cặp thẻ <input /> để khai báo các trường nhập liệu. Với cặp thẻ <form> </form> chúng ta sẽ có 1 vài thuộc tính quan trọng cần khai báo và cặp thẻ <input /> chúng ta cũng sẽ có các thuộc tính kèm theo. Trước khi đi vào tìm hiểu chi tiết các thẻ và các thuộc tính thì bạn hãy xem qua đoạn code tạo form đăng nhập trong HTML sau để thấy rõ cấu trúc.

Thẻ form và các thuộc tính

Trong ví dụ trên bạn cũng thấy, trong thẻ form chúng ta sẽ có các thuộc tính như sau:

  • action: Khai báo đường dẫn đến 1 trang xử lý dữ liệu sau khi người gửi dữ liệu.
  • method: Khai báo phương thức gửi dữ liệu. Có 2 tùy chọn là get và post.
  • name: Đặt tên cho form.

Các thuộc tính trên sẽ cần các ngôn ngữ lập trình khác để xử lý còn với HTML thì bạn không cần quan tâm đến các thuộc tính đó nhưng khi tạo form thì bạn nhớ là vẫn phải khai báo các thuộc tính đó.

Tham khảo thêm

Thẻ input và các thuộc tính

Thẻ input dùng để cho người dùng có thể nhập hoặc chọn các thông tin. Thẻ input trong HTML hiện tại có 23 kiểu nhập dữ liệu khác nhau. Để lựa chọn kiểu nhập dữ liệu bạn sẽ phải khai báo trong thuộc tính type.

23 giá trị của thuộc tính type:

  • button: Hiển thị dạng nút nhấn.
  • checkbox: Hiển thị dạng hộp kiểm.
  • file: Hiển thị dạng chọn file.
  • hidden: Hiển thị dạng ẩn.
  • image: Hiển thị dạng hình.
  • password: Hiển thị dạng password.
  • radio: Hiển thị dạng chọn lựa.
  • reset: Hiển thị dạng phục hồi.
  • submit: Hiển thị dạng submit.
  • text: Hiển thị dạng text.
  • color: Hiển thị dạng màu.
  • date: Hiển thị dạng ngày.
  • datetime: Hiển thị dạng ngày và thời gian.
  • datetime-local: Hiển thị dạng ngày và thời gian của vùng.
  • email: Hiển thị dạng email.
  • month: Hiển thị dạng tháng.
  • number: Hiển thị dạng số.
  • range: Hiển thị dạng dãy.
  • search: Hiển thị dạng tìm kiếm.
  • tel: Hiển thị dạng số điện thoại.
  • time: Hiển thị dạng thời gian.
  • url: Hiển thị dạng đường dẫn.
  • week: Hiển thị dạng tuần.

Đó là các giá trị của thuộc tính type trong thẻ input. Ngoài ra còn có các thuộc tính khác mà mình không thể thống kế hết ra ở đây được. Bạn có thể xem thêm các thuộc tính của thẻ input ở đây.

Để tạo form trong HTML chỉ cần làm đơn giản vậy thôi. Bạn có thể tự mình làm 1 form để luyện cho nhớ lâu hơn nhé. Hi vọng với những kiến thức mình chia sẻ sẽ giúp ích cho bạn trong việc học HTML và làm web với HTML. Chúc bạn thành công!

Bài 15: Hướng dẫn cách tạo FORM trong HTML
5 2 votes

Để lại ý kiến của bạn

Hãy trở thành người đầu tiên bình luận!

avatar
wpDiscuz
Hello! Tôi là Nguyễn Hùng, blog này tôi xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức về máy tính và làm web Wordpress, SEO, SEM, MMO,... mà tôi biết cho tất cả mọi người. Cảm ơn bạn đã ghé qua và đọc blog, nếu thấy bài viết hay hãy chia sẻ nó thay cho lời cảm ơn nhé. → Xem tiếp"

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nhận thông tin bổ ích về WordPress, SEO, Thủ thuật máy tính, Word, Excel....và các phần quà hấp dẫn qua email.

Cảm ơn bạn đã đăng ký

Có lỗi gì đó rồi kìa