Thẻ biểu mẫu: mô tả, giá trị, ứng dụng

Mục lục:

Thẻ biểu mẫu: mô tả, giá trị, ứng dụng
Thẻ biểu mẫu: mô tả, giá trị, ứng dụng
Anonim

Biểu mẫu HTML là một công cụ rất mạnh mẽ để tương tác với người dùng, nhưng vì lý do kỹ thuật, không phải lúc nào cũng rõ ràng cách sử dụng chúng hết khả năng của chúng. Chỉ gửi dữ liệu là không đủ trong trường hợp này - bạn cũng cần đảm bảo rằng dữ liệu mà người dùng điền vào biểu mẫu sẽ được gửi ở định dạng chính xác cần thiết để xử lý thành công và điều này sẽ không phá vỡ các ứng dụng hiện có. Điều quan trọng nữa là giúp người dùng điền vào các biểu mẫu một cách chính xác và không bị thất vọng khi cố gắng sử dụng các ứng dụng.

hình thức thẻ html
hình thức thẻ html

Thẻ được sử dụng để tạo một biểu mẫu HTML. Nó không thực sự tạo ra một lề, nhưng được sử dụng như một vùng chứa mẹ cho các phần tử chẳng hạn như. Cho dù bạn muốn tạo một biểu mẫu đăng ký đơn giản với kiểm tra và thanh toán thông thường hay các ứng dụng web tương tác, bạn sẽ cần sử dụng các thẻ phần tử HTML để hoạt động, trong đó quan trọng nhất là.

Bao chuẩnBiểu mẫu HTML

Các biểu mẫu HTML được phát minh và chuẩn hóa phần lớn trước khi xuất hiện JavaScript không đồng bộ và các ứng dụng web phức tạp. Ngày nay, đầu vào biểu mẫu, nút và các cơ chế tương tác khác được sử dụng, nhưng cốt lõi của điều này là một hệ thống dựa trên mô hình phản hồi và yêu cầu

thuộc tính hành động
thuộc tính hành động

Khi người dùng tải một trang, một yêu cầu http sẽ được gửi (thường được gọi là yêu cầu GET). Nó được trình duyệt của bạn gửi đến máy chủ và thường thì máy chủ phản hồi bằng trang web mà người dùng đang tìm kiếm. Tương tác này là một trong những khái niệm cơ bản nhất của Internet. Và điều đó giải thích chính xác cách thức hoạt động của các biểu mẫu HTML.

Quá trình trao đổi thông tin với máy chủ

Mỗi, bao gồm các phần tử như, nằm bên trong và có một thuộc tính name (tên), cũng như giá trị của nó. Giá trị được xác định theo nhiều cách khác nhau. Đối với văn bản, đây sẽ là giá trị được người dùng trang web nhập vào trường. Đối với một nút radio, giá trị của tùy chọn đã chọn. Người dùng có thể đặt giá trị, nhưng thường không thể đặt thuộc tính tên. Điều này tạo ra một tập hợp các cặp tên / giá trị trong đó các giá trị được xác định bởi người dùng nhập.

những giá trị nào nên được chỉ định cho các thuộc tính của thẻ biểu mẫu
những giá trị nào nên được chỉ định cho các thuộc tính của thẻ biểu mẫu

Sự khác biệt chính giữa biểu mẫu và tài liệu HTML thông thường là trong hầu hết các trường hợp, dữ liệu được thu thập bởi biểu mẫu được gửi đến máy chủ web. Trong trường hợp này, bạn cần thiết lập một máy chủ web để nhận và xử lý dữ liệu. thuộc tính hành động thẻchỉ định vị trí (URL) nơi dữ liệu đã thu thập sẽ được gửi.

Phản hồi của máy chủ trông như thế nào

Khi biểu mẫu được gửi, các cặp tên-giá trị và tất cả các trường trong phần tử được đưa vào HTTP. Một yêu cầu được thực hiện đối với URL được chỉ định dưới dạng thuộc tính action. Loại yêu cầu (GET hoặc POST) sẽ nằm trong thuộc tính phương thức. Điều này có nghĩa là tất cả dữ liệu do người dùng cung cấp sẽ được gửi đến máy chủ ngay sau khi biểu mẫu được gửi và máy chủ có thể làm bất cứ điều gì nó muốn với dữ liệu đó. Khi máy chủ nhận được một biểu mẫu gửi, nó sẽ xử lý nó giống như bất kỳ yêu cầu HTTP nào khác. Máy chủ thực hiện bất cứ điều gì cần làm với dữ liệu được bao gồm và đưa ra phản hồi trở lại trình duyệt.

thuộc tính thẻ biểu mẫu
thuộc tính thẻ biểu mẫu

Nếu bạn nhớ rằng tải trang là câu trả lời, bạn sẽ nhận thấy rằng điều tương tự cũng xảy ra ở đây. Trong một biểu mẫu điển hình được tạo bằng thẻ, phản hồi là một trang mới được tải bởi trình duyệt. Thông thường, trang mới thay thế nội dung hiện tại, nhưng nội dung này có thể được ghi đè bằng thuộc tính target. Phần lớn các biểu mẫu trực tuyến hoạt động theo cách này, đó là lý do tại sao người dùng được chuyển đến trang Cảm ơn khi họ điền vào biểu mẫu đăng ký email.

Ứng dụng web và biểu mẫu không có thẻ

Các ứng dụng web tương tác hiện đại sử dụng mã JavaScript để thực hiện các yêu cầu http không đồng bộ. Đây là các lệnh gọi đến máy chủ không gây ra tải lại trang. Chúng không dựa vào thẻ - một phần tử HTML được tích hợp trong hành vi. Chúng không kết hợp tất cả dữ liệu thành một tổng thể duy nhất.người dùng và không gửi chúng ngay lập tức. Vì lý do này, nhiều nhà thiết kế bố cục HTML + JS trong các ứng dụng web không sử dụng thẻ trên tất cả các biểu mẫu. Thông thường hơn, họ chỉ đơn giản sử dụng nó như một loại vùng chứa cho nhiều loại trường và phần tử đầu vào khác nhau. Trong trường hợp này, các thuộc tính phương thức và hành động được sử dụng sẽ không hiển thị.

Thông tin thêm về các hình thức

Biểu mẫu HTML là một trong những điểm nổi bật trong tương tác của người dùng với một trang web hoặc ứng dụng. Chúng cho phép người dùng gửi dữ liệu đến trang web. Hầu hết thời gian, dữ liệu được gửi đến máy chủ web, nhưng trang web cũng có thể chặn nó để sử dụng riêng. Có nhiều yếu tố liên quan đến biểu mẫu - các loại nút khác nhau, bộ chọn cho các loại khác nhau, cơ chế phản hồi. Do đó, có thể khó quyết định những giá trị nào để gán cho các thuộc tính thẻ. Khi nói đến việc tạo biểu mẫu, bạn cần làm cho chúng hoạt động trên các kích thước màn hình khác nhau. Điều quan trọng là làm cho chúng có thể tiếp cận được với người khuyết tật. Đây là lý do tại sao biểu mẫu và thẻ thuộc tính có lẽ là khía cạnh phức tạp nhất của HTML.

thuộc tính thẻ biểu mẫu
thuộc tính thẻ biểu mẫu

Hình dạng bao gồm

Biểu mẫu HTML bao gồm một hoặc nhiều tiện ích con. Chúng có thể là trường văn bản một dòng hoặc nhiều dòng, hộp chọn, nút hoặc nút radio. Chúng thường được liên kết với một thuộc tính mô tả mục đích của chúng - việc triển khai đúng cách có thể hướng dẫn rõ ràng cho cả người dùng khiếm thị và người khiếm thị về cách truy cập biểu mẫu đầu vào. Thuộc tínhđược liên kết chính xác với các thuộc tính for và id của chúng, tương ứng. Sau đó, nhãn for đề cập đến thuộc tính id của tiện ích con tương ứng và trình đọc màn hình, sử dụng nó, sẽ đọc ra những gì được viết trong đó.

thẻ biểu mẫu
thẻ biểu mẫu

Bên cạnh các cấu trúc dành riêng cho thẻ, điều quan trọng cần nhớ là các biểu mẫu chỉ là mã HTML. Điều này có nghĩa là bạn có thể sử dụng toàn bộ sức mạnh của HTML để cấu trúc các biểu mẫu của mình. Một phương pháp phổ biến là sử dụng thẻ để bọc các phần tử được gắn thẻ

. Danh sách HTML cũng được sử dụng rộng rãi; nhiều hộp kiểm hoặc nút radio được sử dụng để cấu trúc. Sau khi tạo các trường đầu vào, bạn vẫn phải thêm một nút bằng cách sử dụng thẻ và kiểm tra kết quả. Tính linh hoạt của các biểu mẫu HTML làm cho chúng trở thành một trong những cấu trúc phức tạp nhất trong định dạng HTML. Nhưng với cấu trúc phù hợp khi tạo biểu mẫu HTML, bạn có thể đảm bảo rằng nó vừa có thể sử dụng được vừa có thể truy cập được.

Đề xuất: