Biểu mẫu html có thể có hai biểu mẫu trong một không?
Với những điều cơ bản đã xong, bây giờ chúng ta sẽ xem xét chi tiết hơn các thành phần được sử dụng để cung cấp cấu trúc và ý nghĩa cho các phần khác nhau của biểu mẫu Show
Tính linh hoạt của các biểu mẫu làm cho chúng trở thành một trong những cấu trúc phức tạp nhất trong HTML; . Sử dụng đúng cấu trúc khi xây dựng biểu mẫu HTML sẽ giúp đảm bảo rằng biểu mẫu vừa có thể sử dụng vừa có thể truy cập được The elementPhần tử 1 định nghĩa chính thức một biểu mẫu và các thuộc tính xác định hành vi của biểu mẫu. Mỗi lần bạn muốn tạo một biểu mẫu HTML, bạn phải bắt đầu nó bằng cách sử dụng phần tử này, lồng tất cả nội dung bên trong. Nhiều công nghệ hỗ trợ và plugin trình duyệt có thể khám phá các phần tử 1 và triển khai các móc nối đặc biệt để giúp chúng dễ sử dụng hơnChúng tôi đã gặp điều này trong bài viết trước Cảnh báo. Nghiêm cấm lồng một biểu mẫu vào trong một biểu mẫu khác. Việc lồng ghép có thể khiến các biểu mẫu hoạt động không thể đoán trước, vì vậy đây là một ý tưởng tồi Luôn có thể sử dụng điều khiển biểu mẫu bên ngoài phần tử 1. Nếu bạn làm như vậy, theo mặc định, điều khiển đó không liên quan gì đến bất kỳ biểu mẫu nào trừ khi bạn liên kết nó với một biểu mẫu bằng thuộc tính 4 của nó. Điều này được giới thiệu để cho phép bạn liên kết rõ ràng một điều khiển với một biểu mẫu ngay cả khi nó không được lồng vào bên trong nóHãy tiến về phía trước và bao gồm các yếu tố cấu trúc mà bạn sẽ thấy được lồng vào nhau trong một biểu mẫu The and elementsPhần tử 5 là một cách thuận tiện để tạo các nhóm tiện ích có cùng mục đích, cho các mục đích về kiểu dáng và ngữ nghĩa. Bạn có thể gắn nhãn một 5 bằng cách bao gồm một phần tử 7 ngay bên dưới thẻ mở đầu 5. Nội dung văn bản của 7 chính thức mô tả mục đích của 5 nó được đưa vào bên trongNhiều công nghệ hỗ trợ sẽ sử dụng phần tử 7 như thể nó là một phần của nhãn của từng điều khiển bên trong phần tử 5 tương ứng. Ví dụ: một số trình đọc màn hình như Jaws và NVDA sẽ đọc nội dung của chú giải trước khi đọc nhãn của từng điều khiểnĐây là một ví dụ nhỏ 2Ghi chú. Bạn có thể tìm thấy ví dụ này trong fieldset-legend. html (cũng xem trực tiếp) Khi đọc biểu mẫu trên, trình đọc màn hình sẽ nói "Nước ép trái cây cỡ nhỏ" cho tiện ích đầu tiên, "Nước ép trái cây cỡ vừa" cho tiện ích thứ hai và "Nước ép trái cây cỡ lớn" cho tiện ích thứ ba Trường hợp sử dụng trong ví dụ này là một trong những trường hợp quan trọng nhất. Mỗi khi bạn có một bộ nút radio, bạn nên lồng chúng vào bên trong phần tử 5. Có những trường hợp sử dụng khác và nói chung, phần tử 5 cũng có thể được sử dụng để phân chia biểu mẫu. Lý tưởng nhất là các biểu mẫu dài nên được trải rộng trên nhiều trang, nhưng nếu một biểu mẫu dài và phải nằm trên một trang, thì việc đặt các phần liên quan khác nhau bên trong các bộ trường khác nhau sẽ cải thiện khả năng sử dụngDo ảnh hưởng của nó đối với công nghệ hỗ trợ, yếu tố 5 là một trong những yếu tố chính để xây dựng các biểu mẫu có thể truy cập; . Nếu có thể, mỗi khi bạn tạo biểu mẫu, hãy cố gắng lắng nghe cách trình đọc màn hình diễn giải biểu mẫu đó. Nếu nó nghe có vẻ kỳ lạ, hãy cố gắng cải thiện cấu trúc biểu mẫuThe elementNhư chúng ta đã thấy trong bài viết trước, Phần tử 66 là cách chính thức để xác định nhãn cho tiện ích biểu mẫu HTML. Đây là yếu tố quan trọng nhất nếu bạn muốn tạo các biểu mẫu có thể truy cập — khi được triển khai đúng cách, trình đọc màn hình sẽ đọc nhãn của thành phần biểu mẫu cùng với bất kỳ hướng dẫn liên quan nào, cũng như nó hữu ích cho người dùng bị cận thị. Lấy ví dụ này, mà chúng ta đã thấy trong bài viết trước
Với 66 được liên kết chính xác với 68 thông qua thuộc tính 69 của nó (chứa thuộc tính 21 của phần tử 68), trình đọc màn hình sẽ đọc nội dung như "Tên, chỉnh sửa văn bản"Có một cách khác để liên kết điều khiển biểu mẫu với nhãn — lồng điều khiển biểu mẫu vào trong 66, ngầm liên kết nó 6Tuy nhiên, ngay cả trong những trường hợp như vậy, cách tốt nhất là đặt thuộc tính 69 để đảm bảo tất cả các công nghệ hỗ trợ hiểu được mối quan hệ giữa nhãn và tiện íchNếu không có nhãn hoặc nếu điều khiển biểu mẫu không được liên kết hoàn toàn hoặc rõ ràng với nhãn, trình đọc màn hình sẽ đọc nội dung nào đó như "Chỉnh sửa trống văn bản", điều này hoàn toàn không hữu ích Nhãn cũng có thể nhấp đượcMột ưu điểm khác của nhãn được thiết lập đúng cách là bạn có thể nhấp hoặc nhấn vào nhãn để kích hoạt tiện ích con tương ứng. Điều này hữu ích cho các điều khiển như nhập văn bản, nơi bạn có thể bấm vào nhãn cũng như đầu vào để đặt tiêu điểm, nhưng nó đặc biệt hữu ích cho các nút radio và hộp kiểm — vùng nhấn của điều khiển như vậy có thể rất nhỏ, do đó, nó là Ví dụ: nhấp vào văn bản nhãn "Tôi thích anh đào" trong ví dụ bên dưới sẽ chuyển đổi trạng thái đã chọn của hộp kiểm Taste_cherry 2Ghi chú. Bạn có thể tìm thấy ví dụ này trong nhãn hộp kiểm. html (cũng xem trực tiếp) Nhiều nhãnNói một cách chính xác, bạn có thể đặt nhiều nhãn trên một tiện ích con, nhưng đây không phải là ý kiến hay vì một số công nghệ hỗ trợ có thể gặp khó khăn khi xử lý chúng. Trong trường hợp có nhiều nhãn, bạn nên lồng một tiện ích và các nhãn của tiện ích đó vào bên trong một phần tử 66Hãy xem xét ví dụ này 8Đoạn văn ở trên cùng nêu một quy tắc cho các yếu tố bắt buộc. Quy tắc phải được đưa vào trước khi được sử dụng để người dùng sáng mắt và người dùng công nghệ hỗ trợ như trình đọc màn hình có thể tìm hiểu ý nghĩa của quy tắc trước khi họ gặp phải yếu tố bắt buộc. Mặc dù điều này giúp thông báo cho người dùng ý nghĩa của dấu hoa thị nhưng không thể dựa vào dấu hoa thị. Trình đọc màn hình sẽ đọc dấu hoa thị là "dấu sao" khi bắt gặp. Khi được di chuột bởi người dùng có thể nhìn thấy chuột, "bắt buộc" sẽ xuất hiện, điều này đạt được bằng cách sử dụng thuộc tính 25. Tiêu đề được đọc to tùy thuộc vào cài đặt của trình đọc màn hình, do đó, sẽ đáng tin cậy hơn khi bao gồm thuộc tính 26, thuộc tính này luôn được đọc bởi trình đọc màn hìnhCác biến thể trên tăng hiệu quả khi bạn đi qua chúng
Ghi chú. Bạn có thể nhận được kết quả hơi khác một chút, tùy thuộc vào trình đọc màn hình của bạn. Điều này đã được thử nghiệm trong VoiceOver (và NVDA hoạt động tương tự). Chúng tôi cũng muốn nghe về kinh nghiệm của bạn Ghi chú. Bạn có thể tìm thấy ví dụ này trên GitHub dưới dạng nhãn bắt buộc. html (cũng xem trực tiếp). Không kiểm tra ví dụ với 2 hoặc 3 trong số các phiên bản không có ghi chú — trình đọc màn hình chắc chắn sẽ bị nhầm lẫn nếu bạn có nhiều nhãn VÀ nhiều đầu vào có cùng ID Các cấu trúc HTML phổ biến được sử dụng với các biểu mẫuNgoài các cấu trúc dành riêng cho biểu mẫu web, bạn nên nhớ rằng đánh dấu biểu mẫu chỉ là HTML. Điều này có nghĩa là bạn có thể sử dụng tất cả sức mạnh của HTML để cấu trúc một biểu mẫu web Như bạn có thể thấy trong các ví dụ, thực tế phổ biến là bọc nhãn và tiện ích con của nó bằng phần tử 29 trong danh sách 80 hoặc 81. Các phần tử 82 và 83 cũng thường được sử dụng. Danh sách được khuyến nghị để cấu trúc nhiều hộp kiểm hoặc nút radioNgoài phần tử 5, thông thường người ta cũng sử dụng các tiêu đề HTML (e. g. 85, 86) và phân đoạn (e. g. 87) để cấu trúc các dạng phức tạpTrên hết, việc tìm ra một phong cách mã hóa thoải mái dẫn đến các biểu mẫu có thể truy cập, sử dụng được tùy thuộc vào bạn. Mỗi phần chức năng riêng biệt phải được chứa trong một phần tử 87 riêng biệt, với các phần tử 5 để chứa các nút radiohọc tích cực. xây dựng cấu trúc biểu mẫuHãy áp dụng những ý tưởng này vào thực tế và xây dựng một biểu mẫu liên quan hơn một chút — biểu mẫu thanh toán. Form này sẽ chứa một số kiểu điều khiển có thể bạn chưa hiểu. Đừng lo lắng về điều này bây giờ; . Hiện tại, hãy đọc kỹ các mô tả khi bạn thực hiện theo các hướng dẫn bên dưới và bắt đầu hình thành sự đánh giá về các phần tử trình bao bọc mà chúng tôi đang sử dụng để cấu trúc biểu mẫu và tại sao
Bạn có thể thấy biểu mẫu đã hoàn thành đang hoạt động bên dưới (cũng có thể tìm thấy biểu mẫu này trên GitHub — xem biểu mẫu thanh toán của chúng tôi. nguồn html và đang chạy trực tiếp) Kiểm tra kỹ năng của bạnBạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . cấu trúc biểu mẫu Bản tóm tắtBây giờ bạn đã có tất cả kiến thức cần thiết để cấu trúc đúng biểu mẫu web của mình. Chúng tôi sẽ đề cập đến nhiều tính năng được giới thiệu ở đây trong một số bài viết tiếp theo, với bài viết tiếp theo sẽ xem xét chi tiết hơn về cách sử dụng tất cả các loại tiện ích biểu mẫu khác nhau mà bạn sẽ muốn sử dụng để thu thập thông tin từ người dùng của mình Có thể có hai biểu mẫu trong một trang HTML không?Nếu hai hoặc nhiều biểu mẫu trên cùng một trang sử dụng cùng một ID thì trình kết nối sẽ nối vào biểu mẫu đầu tiên trên DOM . Điều này là do Javascript giả định ID phần tử duy nhất theo tiêu chuẩn HTML.
Bạn có thể có biểu mẫu HTML trong biểu mẫu không?Không, đặc tả HTML nói rằng không phần tử MẪU nào được chứa phần tử MẪU khác . |