[Học HTML] Tạo form nhập liệu

Bài này thuộc phần 10 của 11 phần trong serie Học HTML cơ bản

Khi làm website bằng HTML, đặc biệt là sau này bạn học lên các ngôn ngữ server-side như PHP hay Python thì việc sử dụng form nhập liệu rất phổ biến như tạo form đăng nhập, form đăng dữ liệu lên website,…nên nếu có thể thì nên hiểu cách tạo một form nhập liệu bằng HTML ngay từ bây giờ.

Ở HTML, để tạo form chúng ta sẽ sử dụng cặp thẻ <form> </form>, thẻ này sẽ chứa một vài thuộc tính quan trọng và nội dung bên trong cặp thẻ đó là các thẻ <input> để khai báo các trường nhập liệu. Trước hết hãy xem qua mẫu một cái form đăng nhập bằng HTML dưới đây.

Các thuộc tính trong thẻ <form>:

  • action: Đường dẫn đến một trang xử lý dữ liệu sau khi người dùng ấn nút gửi dữ liệu.
  • method: Phương thức gửi dữ liệu.
  • name: Tên của form.

Hiện tại nếu bạn đang học HTML thì không cần quan tâm đến ba thuộc tính trên vì nó thuộc thẩm quyền xử lý của các ngôn ngữ server-side, nhưng bạn chỉ cần nhớ khi tạo form thì nhớ khai báo các thuộc tính đó là được.

Các thuộc tính trong thẻ <input>:

Thẻ này sẽ đại diện cho các trường nhập dữ liệu, mỗi thẻ là một trường nhập dữ liệu khác nhau. Tuy nhiên, kiểu nhập liệu của mỗi thẻ sẽ khác nhau dựa vào thuộc tính type bên trong nó vì hiện tại HTML đang hỗ trợ đến 23 kiểu nhập liệu, tương ứng với 23 giá trị của thuộc tính type.

Danh sách các giá trị của thuộc tính type:

  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

Thay vì giải thích thì bạn nên tự tay thử từng loại để biết chức năng của nó là gì nhé, chỉ cần thay giá trị của thuộc tính type tương ứng với danh sách trên thôi. Tuy nhiên, bạn sẽ sử dụng nhiều nhất là kiểu text (trường nhập liệu dạng chữ và số), password (trường nhập mật khẩu, nó sẽ tự mã hóa mật khẩu nhập vào bằng ký tự *), submit (trường tạo nút gửi dữ liệu đi), textarea (khung nhập liệu giống kiểu text nhưng bạn có thể viết xuống dòng).

Xem thêm về các thuộc tính của thẻ <input>

Chỉ vậy thôi, bây giờ bạn chỉ cần nhớ về cách tạo form trong HTML là được, còn khi nào quên thì có thể lên mạng tham khảo tại trang W3Schools nhé.

Thạch Phạm

AZDIGI's CEO. Đam mê công nghệ, WordPress, Server và xăm mình nữa.

Xem thêm bài viết Subscribe

Để lại bình luận

20 Bình luận trên "[Học HTML] Tạo form nhập liệu"

avatar
Sắp xếp theo:   mới nhất | cũ nhất | đánh giá nhiều
Nguyen Tien Dong
Khách

e mới học căn bản
xem hết video lẫn bài đọc hướng dẫn của a về HTML rất ngắn gọn dễ hiểu
cảm ơn a THACH PHAM nhiều

Hà Duy
Khách

cho mình hỏi 1 chút..mình thì dùng temple dow trên mạng về và tự chỉnh sửa nhưng khi điền mẫu thông tin vào form thì nó không gửi đi được..thế là do đâu bạn?thanks!

dự án Eco Lake View
Khách

đọc bài nào của thạch cũng hay. hi. cảm ơn thạch

nguyen nhut
Khách

anh ở chỗ em hỏi có cách nào mà up load tai lieu vao thang cai Email luon khong thong qua file php
gi do duoc khong anh
mait

thuan
Khách

a oi cho e ? tren hosting co tao dc form nhap giu lieu vs gui ve mail khong a. neu co a co the chi e tao form tren hosting khong a.

trackback

[…] Thạch Phạm Blog […]

vật vã
Khách

em ko hiểu khi xem video. em muốn biết cấu trúc của form khi người khác đăng ký thông tin hay chọn những nội dung trên form thì mình nhận thông tin đó ở đâu và xem thế nào?vd như form đặt vé máy bay.
xem xin chân thành cảm ơn anh .

vật vã
Khách

anh có demo ko?

vật vã
Khách

cho em hỏi cách làm form như form dặt vé máy bay với ạ

Nhat
Khách

em muốn căn lề cho các ô nhập liệu thẳng hàng thì làm sao hả anh

ben
Khách

em làm trong sublime text rồi. giờ sao gắn vào web ạ

Toàn
Khách

Làm sao đẻ tạo form cho mọi nguoi dki ạ
Vd dụ như tham gia su và tạo form cho mọi người nhập thông tin

wpDiscuz
menu
menu