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
07/01/2017
Nếu bạn có ý định học làm website lên các ngôn ngữ server-side như PHP, APS hay Python thì việc sử dụng from nhập liệu là phổ biến như from liên hệ, đăng nhập, đăng ký v.. Nên mình khuyến khích các bạn học cách tạo from nhập liệu bằng HTML ngay 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> trên:

  • 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, có thể là một file thực thi php.
  • 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 ý nghĩa các thuộc tính trên, bạn dành chút thời gian 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).

Ngoài ra còn rất nhiều các thuộc tính khác trong from nhung mình sợ các bạn rối thêm nên không đề cập đến trong phạm vi bài viết này. 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ể tìm hiểu những thuộc tính khác tại website w3schools. 
 

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

FACEBOOK
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây