Biểu mẫu html có thể có hai biểu mẫu trong một không?

The element

Phần tử

Name: 

Name: 

Chú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ử

Name: 

Name: 

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 elements

Phần tử

Name: 

Name: 

Name: 

Name: 

Name: 

Name: 

Nhiều công nghệ hỗ trợ sẽ sử dụng phần tử

Name: 

Name: 

Đây là một ví dụ nhỏ

Name: 

Ghi 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ử

Name: 

Name: 

Do ảnh hưởng của nó đối với công nghệ hỗ trợ, yếu tố

Name: 

The element

Như chúng ta đã thấy trong bài viết trước, Phần tử

Name: 

Name: 

Với

Name: 

Name: 

Name: 

Name: 

Name: 

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

Name: 

Name: 

Tuy 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

Name: 

Nế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 được

Mộ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

Name: 

Ghi 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ãn

Nó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ử

Name: 

Hãy xem xét ví dụ này

Name: 

Đ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

Name: 

Name: 

Các biến thể trên tăng hiệu quả khi bạn đi qua chúng

• Trong ví dụ đầu tiên, nhãn hoàn toàn không được đọc với đầu vào — bạn chỉ nhận được "chỉnh sửa văn bản trống", cộng với các nhãn thực tế được đọc riêng. Nhiều phần tử

  Name: 
  

  66 gây nhầm lẫn cho trình đọc màn hình
• Trong ví dụ thứ hai, mọi thứ rõ ràng hơn một chút - nhãn được đọc cùng với đầu vào là "yêu cầu văn bản chỉnh sửa tên sao tên sao" và các nhãn vẫn được đọc riêng. Mọi thứ vẫn còn hơi khó hiểu, nhưng lần này đã tốt hơn một chút vì

  Name: 
  

  68 có nhãn liên kết với nó
• Ví dụ thứ ba là tốt nhất — nhãn thực tế được đọc to cùng nhau và nhãn được đọc to với đầu vào là "văn bản chỉnh sửa tên bắt buộc"

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ẫu

Ngoà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ử

Name: 

Name: 

Name: 

Name: 

Name: 

Ngoài phần tử

Name: 

Name: 

Name: 

Name: 

Trê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ử

Name: 

Name: 

học tích cực. xây dựng cấu trúc biểu mẫu

Hã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

1. Để bắt đầu, hãy tạo một bản sao cục bộ của tệp mẫu trống và CSS cho biểu mẫu thanh toán của chúng tôi trong một thư mục mới trên máy tính của bạn
2. Áp dụng CSS cho HTML bằng cách thêm dòng sau vào trong HTML

   Name: 
   

   40

   Name: 
   

   4

3. Tiếp theo, tạo biểu mẫu của bạn bằng cách thêm phần tử

   Name: 
   

   1 bên ngoài

   Name: 
   

   7

4. Bên trong các thẻ

   Name: 
   

   1, hãy thêm tiêu đề và đoạn văn để thông báo cho người dùng cách đánh dấu các trường bắt buộc

   Name: 
   

   9

5. Tiếp theo, chúng tôi sẽ thêm một phần mã lớn hơn vào biểu mẫu, bên dưới mục nhập trước đó của chúng tôi. Tại đây, bạn sẽ thấy rằng chúng tôi đang gói các trường thông tin liên hệ bên trong một phần tử

   Name: 
   

   87 riêng biệt. Hơn nữa, chúng tôi có một bộ gồm ba nút radio, mỗi nút chúng tôi đang đặt bên trong phần tử danh sách [

   Name: 
   

   29] của chính nó. Chúng tôi cũng có hai văn bản tiêu chuẩn

   Name: 
   

   68 và các phần tử

   Name: 
   

   66 được liên kết của chúng, mỗi phần tử chứa bên trong một

   Name: 
   

   82 và một đầu vào mật khẩu để nhập mật khẩu. Thêm mã này vào biểu mẫu của bạn

   Name: 
   

   5

6. Name: 
   

   87 thứ hai trong biểu mẫu của chúng tôi là thông tin thanh toán. Chúng tôi có ba điều khiển riêng biệt cùng với nhãn của chúng, mỗi điều khiển được chứa bên trong một

   Name: 
   

   82. Đầu tiên là menu thả xuống [______470] để chọn loại thẻ tín dụng. Thứ hai là phần tử

   Name: 
   

   68 thuộc loại

   Name: 
   

   72, để nhập số thẻ tín dụng; . Cái cuối cùng là phần tử

   Name: 
   

   68 kiểu

   Name: 
   

   75, để nhập ngày hết hạn của thẻ; . Các loại đầu vào mới hơn này được giới thiệu lại trong Các loại đầu vào HTML5. Nhập phần sau bên dưới phần trước

   Name: 
   

   4

7. Phần cuối cùng chúng tôi sẽ thêm đơn giản hơn rất nhiều, chỉ chứa một

   Name: 
   

   76 thuộc loại

   Name: 
   

   77, để gửi dữ liệu biểu mẫu. Thêm phần này vào cuối biểu mẫu của bạn ngay bây giờ

   Name: 
   

   0

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ạn

Bạ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ắt

Bâ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?

Bạn có thể có biểu mẫu HTML trong biểu mẫu không?