Hướng dẫn từng bước để bắt đầu với các biểu mẫu HTML

Mẫu HTML

Tổng quan

Các hình thức HTML được yêu cầu khi bạn muốn thu thập một số dữ liệu từ người truy cập trang web của bạn. Ví dụ: khi bạn đăng ký / đăng nhập cho các ứng dụng như Uber, Netflix hoặc Facebook, bạn nhập thông tin như Tên, Email và Mật khẩu thông qua các biểu mẫu HTML.

Bây giờ chúng ta sẽ tìm hiểu tất cả các yếu tố cần thiết để tạo một biểu mẫu.

LƯU Ý: Tôi đã thêm Kiểu tạo bằng CSS và do đó các phần tử của tôi sẽ khác, nhưng chúng sẽ hoạt động theo cùng một cách.
Nếu bạn muốn làm cho các thành phần của bạn trông giống như của tôi thì bạn có thể tìm thấy tệp CSS của tôi trong các liên kết được cung cấp bên dưới:
CSS tùy chỉnh: https://gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751
Chuẩn hóa CSS:
https://gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Yếu tố hình thức

Đây là yếu tố đầu tiên mà chúng ta sẽ tìm hiểu. Phần tử này bao bọc tất cả các phần tử khác bên trong biểu mẫu của chúng tôi. Đây là yếu tố hình thức.

Biểu mẫu của chúng tôi đã giành được dữ liệu ở bất cứ đâu vì nó không được kết nối với máy chủ. Để kết nối biểu mẫu của chúng tôi với máy chủ và xử lý dữ liệu của chúng tôi, chúng tôi có thể sử dụng bất kỳ ngôn ngữ phía máy chủ nào như Node, Python, Ruby hoặc PHP. Phần xử lý dữ liệu bao gồm hai thuộc tính quan trọng được gắn vào phần tử biểu mẫu. Hãy cùng xem các thuộc tính đó.

Thuộc tính:

  1. hành động: Thuộc tính hành động là địa chỉ web (URL) của chương trình xử lý thông tin được gửi bởi biểu mẫu của chúng tôi.
  2. Phương thức: Đây là phương thức HTTP mà trình duyệt sử dụng để gửi biểu mẫu, các giá trị có thể là POST và GET.
  • POST - Dữ liệu từ phần thân của biểu mẫu được gửi đến máy chủ.
  • NHẬN - Dữ liệu được gửi bên trong URL và các tham số được phân tách bằng dấu chấm hỏi.
Lưu ý: Bạn không thể có các biểu mẫu được lồng trong một biểu mẫu khác. Điều đó có nghĩa là bạn không thể có phần tử
bên trong phần tử khác.

Phần tử đầu vào

Phần tử đầu vào là phần tử biểu mẫu được sử dụng phổ biến nhất. Nó được sử dụng để tạo một trường văn bản nơi người dùng có thể nhập một số thông tin ví dụ email, mật khẩu, v.v.

Hãy để Lừa tạo một trường văn bản nơi người dùng có thể nhập tên của họ.

Lưu ý: Phần tử đầu vào là thẻ tự đóng, do đó, không cần phải nhập thẻ đóng để khớp với thẻ mở.

Tôi đã thêm ba thuộc tính trong thẻ đầu vào ở trên. Hãy cùng xem chi tiết từng người một.

kiểu

Thuộc tính type cho biết loại đầu vào nào chúng ta muốn. Nếu chúng ta đưa một giá trị văn bản cho thuộc tính type, thì điều chúng ta muốn nói ở đây là giá trị mà chúng ta đang nhập vào trường đầu vào là loại văn bản. Có nhiều giá trị có thể cho thuộc tính cụ thể này. Một số giá trị có thể là email, tel cho điện thoại và mật khẩu, v.v.

Ví dụ: Khi bạn đăng nhập vào bất kỳ tài khoản nào của bạn (Amazon / Netflix), bạn cần nhập hai thứ: email và mật khẩu. Vì vậy, trong trường hợp cụ thể này, phần tử đầu vào được sử dụng. Thuộc tính type được đưa ra với giá trị của email và mật khẩu tương ứng.

ID

Thuộc tính ID không bắt buộc, nhưng bạn nên thêm một ý tưởng hay. Trong một số trường hợp, điều này hữu ích cho việc nhắm mục tiêu các yếu tố bằng CSS / JavaScript. Thuộc tính ID được thêm vào để chúng ta có thể liên kết nhãn với các điều khiển biểu mẫu cụ thể.

Tên

Thuộc tính tên là cần thiết. Khi một biểu mẫu được gửi đến mã phía máy chủ, máy chủ có thể hiểu dữ liệu biểu mẫu và xử lý các giá trị một cách thích hợp.

giữ chỗ

Đó là một gợi ý ngắn được hiển thị trong trường đầu vào trước khi người dùng nhập một giá trị. Khi người dùng bắt đầu nhập vào trường nhập, trình giữ chỗ sẽ biến mất.

Hãy cùng xem một vài yếu tố đầu vào cơ bản khác trông như thế nào.

Lưu ý: Sử dụng các giá trị khác nhau cho thuộc tính loại sẽ tạo ra kết quả khác nhau. Ví dụ: bạn có thể tạo đầu vào là loại email, văn bản hoặc mật khẩu, v.v ... Tất cả chúng đều thể hiện hành vi hơi khác nhau, mà bạn sẽ thấy bên dưới.

Nhiều yếu tố đầu vào (Văn bản, Email, Mật khẩu)

Nhiều yếu tố đầu vào (Văn bản, Email, Mật khẩu)

Các yếu tố đầu vào không có giữ chỗ (Trái) & với thuộc tính giữ chỗ (Phải)

Yếu tố văn bản

Đôi khi một dòng văn bản là không đủ và một yếu tố đầu vào đơn giản đã giành được công việc. Ví dụ: một số trang web có biểu mẫu liên hệ để mọi người nhập truy vấn hoặc tin nhắn của họ. Trong những trường hợp này, nó tốt nhất là sử dụng phần tử textarea.