[Bài 10] Tạo form nhập dữ liệu trong website

Bạn đang ở bài 10 trong 11 bài của serie Học HTML cơ bản.

Bài này mình sẽ hướng dẫn các bạn tạo form để nhập dữ liệu trong website. Bài này khá quan trọng vì sau này khi bạn học lập trình PHP thì sẽ sử dụng nó rất nhiều, đa số là phải sử dụng đến form để làm, ví dụ như form đăng nhập, form nhập dữ liệu vào website, form cho khách hàng nhập thông tin… Vì vậy, để sau này dễ dàng hơn trong việc học lập trình website, bạn nên tìm hiểu trước về form.

Cách tạo form

Chúng ta sử dụng thẻ <form></form> để tạo được 1 form, trong đó có các input là các trường nhập dữ liệu. Dưới đây là mẫu form đăng nhập đơn giản:

See the Pen PZBeNy by BlogIT.vn (@blogitvn) on CodePen.

Các thuộc tính trong form

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

Đây là các thuộc tính quan trọng khi bạn muốn gửi dữ liệu đến 1 file php nào đó để xử lý dữ liệu, vì đây đang là serie học html cơ bản nên bạn không cần quan tâm đến nó, nhưng sau này học đến PHP bạn hãy chú ý nhé. Trong form chúng ta muốn có các ô để nhập dữ liệu thì phải dùng đến thẻ input (như ví dụ trên). Chúng ta cùng tìm hiểu các thuộc tính của thẻ input.

Các thuộc tính thẻ input

Trong input thì thuộc tính type khá quan trọng, nó sẽ định dạng kiểu của input đó. Các thuộc tính khá nhiều, vì vậy thay vì mình giải thích chi tiết từng thuộc tính thì bạn nên thử nó(chỉ cần thay giá trị thuộc tính vào), như vậy cũng giúp bạn dễ nhớ hơn. Dưới đây là 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

Trong danh sách này thì bạn sẽ sử dụng nhiều nhất là:
text: trường nhập liệu dạng chữ và số.
password: trường nhập mật khẩu, nó sẽ tự động biến thành *.
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 nó rộng và cao hơn, bạn có thể viết xuống dòng.

Các thuộc tính bạn có thể xem thêm tại đây.

Kết luận:

Bài này khá quan trọng như mình không giảng chi tiết nhiều, mình làm như vậy là để cho bạn tự tìm hiểu. Chỉ có cách tự tìm hiểu thì bạn mới nhớ lâu được thôi, đó cũng là 1 điều rất đặc biệt đối với những lập trình viên. Chúc bạn thành công.

[Bài 10] Tạo form nhập dữ liệu trong website
5 (100%) 3 votes

Bình luận

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

Thông báo
avatar
wpDiscuz