Hướng dẫn form search bootstrap 3 - biểu mẫu tìm kiếm bootstrap 3
Ví dụ và hướng dẫn sử dụng cho các kiểu điều khiển biểu mẫu, tùy chọn bố cục và các thành phần tùy chỉnh để tạo ra nhiều hình thức khác nhau.
Tổng quan
Các điều khiển biểu mẫu Bootstrap sườn mở rộng trên các kiểu mẫu được khởi động lại của chúng tôi với các lớp. Sử dụng các lớp này để chọn tham gia vào màn hình tùy chỉnh của họ để kết xuất phù hợp hơn trên các trình duyệt và thiết bị.
Hãy chắc chắn sử dụng thuộc tính
Large select
Default select
Small select
6 thích hợp trên tất cả các đầu vào [ví dụ:
Large select
Default select
Small select
7 cho địa chỉ email hoặc
Large select
Default select
Small select
8 để biết thông tin số] để tận dụng các điều khiển đầu vào mới hơn như xác minh email, lựa chọn số và hơn thế nữa.
Ở đây, một ví dụ nhanh chóng để chứng minh các kiểu hình thức Bootstrap. Tiếp tục đọc tài liệu về các lớp học bắt buộc, bố cục biểu mẫu và nhiều hơn nữa.
Email address
We'll never share your email with anyone else.
Password
Check me out
Submit
Kiểm soát hình thức
Hình thức văn bản Điều khiển các điều khiển giống như
Large select
Default select
Small select
9S,
0 và ________ 51S, được tạo kiểu với lớp
2. Bao gồm là phong cách cho ngoại hình chung, trạng thái tập trung, kích thước, và nhiều hơn nữa.Hãy chắc chắn để khám phá các hình thức tùy chỉnh của chúng tôi để tiếp tục phong cách ____5050s.
Địa chỉ email
Ví dụ Chọn
Ví dụ Nhiều lựa chọn
Ví dụ Textarea
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
Đối với đầu vào tệp, hoán đổi
2 cho
5.
Example file input
Kích thước
Đặt chiều cao bằng các lớp như
6 và
7.
Large select
Default select
Small select
Chỉ đọc
Thêm thuộc tính boolean
8 trên đầu vào để ngăn chặn sửa đổi giá trị đầu vào. Đầu vào chỉ đọc có vẻ nhẹ hơn [giống như đầu vào bị vô hiệu hóa], nhưng giữ lại con trỏ tiêu chuẩn.
Văn bản đơn giản
Nếu bạn muốn có các phần tử
9 trong biểu mẫu của bạn được tạo kiểu dưới dạng văn bản thuần túy, hãy sử dụng lớp
Email
Password
0 để loại bỏ kiểu dáng trường biểu mẫu mặc định và bảo tồn lề và đệm chính xác.
Email
Password
Email
Password
Confirm identity
Hộp kiểm và radio
Các hộp kiểm và radio mặc định được cải thiện với sự trợ giúp của
Email
Password
1, một lớp duy nhất cho cả hai loại đầu vào cải thiện bố cục và hành vi của các phần tử HTML của chúng. Hộp kiểm là để chọn một hoặc một số tùy chọn trong danh sách, trong khi radio để chọn một tùy chọn từ nhiều người.a single class for both input types that improves
the layout and behavior of their HTML elements. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.Các hộp kiểm bị vô hiệu hóa và radio được hỗ trợ, nhưng để cung cấp con trỏ
Email
Password
2 trên di chuột của cha mẹ
Email
Password
3, bạn sẽ cần thêm thuộc tính
Email
Password
4 vào
Email
Password
5. Thuộc tính bị vô hiệu hóa sẽ áp dụng màu sáng hơn để giúp chỉ ra trạng thái đầu vào.Hộp kiểm và sử dụng radio được xây dựng để hỗ trợ xác thực biểu mẫu dựa trên HTML và cung cấp các nhãn ngắn gọn, có thể truy cập. Như vậy,
Large select
Default select
Small select
9 và
Email
Password
3 của chúng tôi là các yếu tố anh chị em trái ngược với
Large select
Default select
Small select
9 trong một
Email
Password
3. Đây là một chút dài dòng hơn một chút vì bạn phải chỉ định các thuộc tính
Email
Password
Confirm identity
0 và
Email
Password
Confirm identity
1 để liên quan đến
Large select
Default select
Small select
9 và
Email
Password
3.Mặc định [xếp chồng]
Theo mặc định, bất kỳ số lượng kiểm tra và radio nào là anh chị em ngay lập tức sẽ được xếp theo chiều dọc và cách nhau một cách thích hợp với
Email
Password
1. Hộp kiểm mặc định
Hộp kiểm bị vô hiệu hóa
Default checkbox
Disabled checkbox
Đài phát thanh mặc định
Đài phát thanh mặc định thứ hai
Đài phát thanh bị vô hiệu hóa
Default radio
Second default radio
Disabled radio
Nội tuyến
Hộp kiểm nhóm hoặc radio trên cùng một hàng ngang bằng cách thêm
Email
Password
Confirm identity
5 vào bất kỳ
Email
Password
1 nào.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
0
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
1Không có nhãn
Thêm
Email
Password
Confirm identity
7 vào đầu vào trong
Email
Password
1 mà don lồng có văn bản nhãn. Hãy nhớ vẫn cung cấp một số hình thức nhãn cho các công nghệ hỗ trợ [ví dụ, sử dụng
Email
Password
Confirm identity
9].
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
2Cách trình bày
Vì Bootstrap áp dụng
Default checkbox
Disabled checkbox
0 và
Default checkbox
Disabled checkbox
1 cho hầu hết tất cả các điều khiển biểu mẫu của chúng tôi, các biểu mẫu sẽ mặc định ngăn xếp theo chiều dọc. Các lớp bổ sung có thể được sử dụng để thay đổi bố cục này trên cơ sở mỗi dạng.Biểu mẫu nhóm
Lớp
Default checkbox
Disabled checkbox
2 là cách dễ nhất để thêm một số cấu trúc vào các hình thức. Nó cung cấp một lớp linh hoạt để khuyến khích nhóm các nhãn, điều khiển, văn bản trợ giúp tùy chọn thích hợp và hình thành tin nhắn xác thực. Theo mặc định, nó chỉ áp dụng
Default checkbox
Disabled checkbox
3, nhưng nó chọn các kiểu bổ sung trong
Default checkbox
Disabled checkbox
4 khi cần thiết. Sử dụng nó với
Default checkbox
Disabled checkbox
5S,
Default checkbox
Disabled checkbox
6 hoặc gần như bất kỳ yếu tố nào khác.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
3Hình thức lưới
Các hình thức phức tạp hơn có thể được xây dựng bằng các lớp lưới của chúng tôi. Sử dụng chúng cho bố cục biểu mẫu yêu cầu nhiều cột, độ rộng khác nhau và các tùy chọn căn chỉnh bổ sung.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
4Hàng hình thành
Bạn cũng có thể trao đổi
Default checkbox
Disabled checkbox
7 cho
Default checkbox
Disabled checkbox
8, một biến thể của hàng lưới tiêu chuẩn của chúng tôi để ghi đè máng xối cột mặc định cho bố cục chặt chẽ hơn và nhỏ gọn hơn.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
5Các bố cục phức tạp hơn cũng có thể được tạo ra với hệ thống lưới.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
6Hình thức ngang
Tạo các biểu mẫu ngang với lưới bằng cách thêm lớp
Default checkbox
Disabled checkbox
7 vào các nhóm hình thành và sử dụng các lớp
Default radio
Second default radio
Disabled radio
0 để chỉ định độ rộng của nhãn và điều khiển của bạn. Hãy chắc chắn thêm
Default radio
Second default radio
Disabled radio
1 vào
Email
Password
3 của bạn để họ tập trung theo chiều dọc với các điều khiển hình thức liên quan của chúng.Đôi khi, bạn có thể cần sử dụng các tiện ích lề hoặc đệm để tạo ra sự liên kết hoàn hảo mà bạn cần. Ví dụ: chúng tôi đã xóa
Default radio
Second default radio
Disabled radio
3 trên nhãn đầu vào radio xếp chồng lên nhau để sắp xếp tốt hơn đường cơ sở văn bản.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
7Kích thước nhãn nằm ngangHãy chắc chắn sử dụng
Default radio
Second default radio
Disabled radio
4 hoặc
Default radio
Second default radio
Disabled radio
5 cho
Email
Password
3 hoặc
Default radio
Second default radio
Disabled radio
7 của bạn để theo chính xác kích thước của
6 và
7.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
8Kích thước cột
Như được hiển thị trong các ví dụ trước, hệ thống lưới của chúng tôi cho phép bạn đặt bất kỳ số lượng
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
00 nào trong một
Default checkbox
Disabled checkbox
7 hoặc
Default checkbox
Disabled checkbox
8. Họ sẽ phân chia chiều rộng có sẵn như nhau giữa họ. Bạn cũng có thể chọn một tập hợp con của các cột của mình để chiếm ít nhiều không gian, trong khi các
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
00 còn lại chia đều phần còn lại, với các lớp cột cụ thể như
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
04.
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
9Auto-sizing
Ví dụ dưới đây sử dụng tiện ích Flexbox để tập trung theo chiều dọc và thay đổi
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
00 thành
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
06 để các cột của bạn chỉ chiếm nhiều không gian khi cần. Đặt một cách khác, các kích thước cột dựa trên nội dung.
Example file input
0Sau đó, bạn có thể phối lại một lần nữa với các lớp cột cụ thể kích thước.
Example file input
1Và tất nhiên điều khiển biểu mẫu tùy chỉnh được hỗ trợ.
Example file input
2Hình thức nội tuyến
Sử dụng lớp
Default checkbox
Disabled checkbox
4 để hiển thị một loạt các nhãn, điều khiển biểu mẫu và các nút trên một hàng ngang. Các điều khiển hình thức trong các hình thức nội tuyến thay đổi một chút so với trạng thái mặc định của chúng.- Các điều khiển là
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
08, thu gọn bất kỳ không gian trắng HTML nào và cho phép bạn cung cấp kiểm soát căn chỉnh với các tiện ích khoảng cách và flexbox. - Các nhóm điều khiển và các nhóm đầu vào nhận
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
09 để ghi đè mặc định bootstrap
Default checkbox
Disabled checkbox
1. - Các điều khiển chỉ xuất hiện nội tuyến trong các chế độ xem rộng ít nhất 576px để tính đến các khung nhìn hẹp trên thiết bị di động.only appear inline in viewports that are at least 576px wide to account for narrow viewports on mobile devices.
Bạn có thể cần phải giải quyết thủ công chiều rộng và sự liên kết của các điều khiển biểu mẫu riêng lẻ với các tiện ích khoảng cách [như hiển thị bên dưới]. Cuối cùng, hãy chắc chắn luôn bao gồm
Email
Password
3 với mỗi điều khiển biểu mẫu, ngay cả khi bạn cần ẩn nó khỏi khách truy cập không phải màn hình với
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
12.
Example file input
3Kiểm soát hình thức tùy chỉnh và chọn cũng được hỗ trợ.
Example file input
4Giải pháp thay thế cho các nhãn ẩn
Các công nghệ hỗ trợ như đầu đọc màn hình sẽ gặp rắc rối với các biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi đầu vào. Đối với các hình thức nội tuyến này, bạn có thể ẩn các nhãn bằng lớp
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
12. Có nhiều phương pháp thay thế để cung cấp nhãn cho các công nghệ hỗ trợ, chẳng hạn như thuộc tính
Email
Password
Confirm identity
9,
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
15 hoặc
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
16. Nếu không có thứ nào trong số này, các công nghệ hỗ trợ có thể sử dụng thuộc tính
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
17, nếu có, nhưng lưu ý rằng việc sử dụng
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
17 làm thay thế cho các phương pháp ghi nhãn khác không được khuyến khích.
Trợ giúp văn bản
Văn bản trợ giúp cấp khối có thể được tạo bằng
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
19 [trước đây được gọi là
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
20 trong V3]. Văn bản trợ giúp nội tuyến có thể được triển khai linh hoạt bằng cách sử dụng bất kỳ phần tử HTML nội tuyến và các lớp tiện ích như
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
21.Kết hợp văn bản trợ giúp với các điều khiển biểu mẫu
Văn bản trợ giúp phải được liên kết rõ ràng với điều khiển biểu mẫu mà nó liên quan đến việc sử dụng thuộc tính
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
22. Điều này sẽ đảm bảo rằng các công nghệ hỗ trợ, chẳng hạn như những người đọc màn hình, sẽ thông báo văn bản trợ giúp này khi người dùng tập trung hoặc nhập điều khiển.Trợ giúp văn bản dưới đây có thể được tạo kiểu với
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
19. Lớp này bao gồm
Default checkbox
Disabled checkbox
0 và thêm một số lề trên cùng để dễ dàng khoảng cách từ các đầu vào ở trên.Mật khẩu Mật khẩu của bạn phải dài 8-20 ký tự, chứa các chữ cái và số và không được chứa khoảng trắng, ký tự đặc biệt hoặc biểu tượng cảm xúc.
Example file input
5Văn bản nội tuyến có thể sử dụng bất kỳ phần tử HTML nội tuyến điển hình nào [có thể là
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
25,
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
26 hoặc một cái gì đó khác] không có gì khác hơn là một lớp tiện ích.
Example file input
6Biểu mẫu bị vô hiệu hóa
Thêm thuộc tính boolean
Email
Password
4 trên đầu vào để ngăn chặn các tương tác của người dùng và làm cho nó có vẻ nhẹ hơn.
Example file input
7Thêm thuộc tính
Email
Password
4 vào
Default checkbox
Disabled checkbox
5 để vô hiệu hóa tất cả các điều khiển bên trong.
Example file input
8Hãy cẩn thận với neo
Theo mặc định, các trình duyệt sẽ xử lý tất cả các điều khiển biểu mẫu gốc [
Large select
Default select
Small select
9,
0 và
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
32] bên trong
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
33 dưới dạng bị vô hiệu hóa, ngăn chặn cả tương tác bàn phím và chuột trên chúng. Tuy nhiên, nếu biểu mẫu của bạn cũng bao gồm các yếu tố
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
34, chúng sẽ chỉ được cung cấp một kiểu
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
35. Như đã lưu ý trong phần về trạng thái bị vô hiệu hóa cho các nút [và cụ thể trong phần phụ cho các phần tử neo], thuộc tính CSS này chưa được chuẩn hóa và không được hỗ trợ đầy đủ trong Opera 18 trở xuống, hoặc trong Internet Explorer 10 và won 'T ngăn người dùng bàn phím có thể tập trung hoặc kích hoạt các liên kết này. Vì vậy, để được an toàn, hãy sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết đó.Khả năng tương thích trình duyệt chéo
Mặc dù Bootstrap sẽ áp dụng các kiểu này trong tất cả các trình duyệt, Internet Explorer 11 trở xuống, don don hỗ trợ đầy đủ cho thuộc tính
Email
Password
4 trên
Default checkbox
Disabled checkbox
5. Sử dụng JavaScript tùy chỉnh để vô hiệu hóa các trường trong các trình duyệt này.Thẩm định
Cung cấp phản hồi có giá trị, có thể hành động cho người dùng của bạn với xác thực HTML5 Form có sẵn trong tất cả các trình duyệt được hỗ trợ của chúng tôi. Chọn từ phản hồi xác thực mặc định của trình duyệt hoặc triển khai các thông báo tùy chỉnh với các lớp tích hợp và JavaScript khởi động của chúng tôi.
Chúng tôi đánh giá cao các kiểu xác thực tùy chỉnh vì mặc định trình duyệt gốc không được công bố để sàng lọc độc giả.highly recommend custom validation styles as native browser defaults are not announced to screen readers.
Làm thế nào nó hoạt động
Ở đây, cách thức xác nhận hình thức hoạt động với bootstrap:
- Xác thực biểu mẫu HTML được áp dụng thông qua CSS, hai lớp giả,
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
38 và
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
39. Nó áp dụng cho các yếu tố
Large select
Default select
Small select
9,
0 và
1. - Bootstrap phạm vi các kiểu
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
38 và
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
39 cho lớp phụ huynh ____145, thường được áp dụng cho
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
46. Mặt khác, bất kỳ trường bắt buộc nào không có giá trị hiển thị là không hợp lệ trên tải trang. Bằng cách này, bạn có thể chọn khi nào sẽ kích hoạt chúng [thường là sau khi gửi biểu mẫu được thử]. - Là một dự phòng, các lớp
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
47 và
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
48 có thể được sử dụng thay vì các lớp giả để xác thực phía máy chủ. Họ không yêu cầu lớp phụ huynh
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
45. - Do các ràng buộc trong cách CSS hoạt động, chúng ta không thể [hiện tại] áp dụng các kiểu cho
Email
Password
3 xuất hiện trước khi kiểm soát biểu mẫu trong DOM mà không có sự trợ giúp của JavaScript tùy chỉnh. - Tất cả các trình duyệt hiện đại hỗ trợ API xác thực ràng buộc, một loạt các phương thức JavaScript để xác thực các điều khiển biểu mẫu.
- Thông báo phản hồi có thể sử dụng các mặc định của trình duyệt [khác nhau cho mỗi trình duyệt và không thể thay đổi thông qua CSS] hoặc các kiểu phản hồi tùy chỉnh của chúng tôi với HTML và CSS bổ sung.
- Bạn có thể cung cấp các thông báo hợp lệ tùy chỉnh với
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
51 trong JavaScript.
Với ý nghĩ đó, hãy xem xét các bản demo sau cho các kiểu xác thực biểu mẫu tùy chỉnh của chúng tôi, các lớp bên máy chủ tùy chọn và mặc định trình duyệt.
Kiểu tùy chỉnh
Đối với các thông báo xác thực biểu mẫu Bootstrap tùy chỉnh, bạn sẽ cần thêm thuộc tính boolean
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
52 vào
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
46 của bạn. Điều này vô hiệu hóa các công cụ phản hồi mặc định của trình duyệt, nhưng vẫn cung cấp quyền truy cập vào API xác thực biểu mẫu trong JavaScript. Cố gắng gửi biểu mẫu dưới đây; JavaScript của chúng tôi sẽ chặn nút gửi và chuyển tiếp phản hồi cho bạn.Khi cố gắng gửi, bạn sẽ thấy các kiểu
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
38 và
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
39 được áp dụng cho các điều khiển biểu mẫu của bạn.
Example file input
9Trình duyệt mặc định
Không quan tâm đến thông điệp phản hồi xác thực tùy chỉnh hoặc viết javascript để thay đổi hành vi biểu mẫu? Tất cả tốt, bạn có thể sử dụng mặc định trình duyệt. Hãy thử gửi biểu mẫu dưới đây. Tùy thuộc vào trình duyệt và hệ điều hành của bạn, bạn sẽ thấy một kiểu phản hồi hơi khác nhau.
Mặc dù các kiểu phản hồi này không thể được tạo kiểu với CSS, bạn vẫn có thể tùy chỉnh văn bản phản hồi thông qua JavaScript.
0Phía máy chủ
Chúng tôi khuyên bạn nên sử dụng xác thực phía máy khách, nhưng trong trường hợp bạn yêu cầu phía máy chủ, bạn có thể chỉ ra các trường biểu mẫu không hợp lệ và hợp lệ với
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
47 và
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
48. Lưu ý rằng
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
58 cũng được hỗ trợ với các lớp này.
1Các yếu tố được hỗ trợ
Các mẫu ví dụ của chúng tôi hiển thị các
Large select
Default select
Small select
9 văn bản gốc ở trên, nhưng các kiểu xác thực biểu mẫu cũng có sẵn cho các điều khiển biểu mẫu tùy chỉnh của chúng tôi.
2Chú giải công cụ
Nếu bố cục biểu mẫu của bạn cho phép, bạn có thể trao đổi các lớp
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
60 cho các lớp
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
61 để hiển thị phản hồi xác thực trong một chú giải công cụ theo kiểu. Hãy chắc chắn có cha mẹ với
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
62 trên đó để định vị chú giải công cụ. Trong ví dụ dưới đây, các lớp cột của chúng tôi đã có điều này, nhưng dự án của bạn có thể yêu cầu thiết lập thay thế.
3Hình thức tùy chỉnh
Để có nhiều tùy chỉnh hơn và tính nhất quán của trình duyệt chéo, hãy sử dụng các yếu tố biểu mẫu hoàn toàn tùy chỉnh của chúng tôi để thay thế các mặc định của trình duyệt. Chúng được xây dựng trên đỉnh của đánh dấu ngữ nghĩa và có thể truy cập, vì vậy họ thay thế chắc chắn cho bất kỳ điều khiển biểu mẫu mặc định nào.
Hộp kiểm và radio
Mỗi hộp kiểm và radio được bọc trong
Default checkbox
Disabled checkbox
6 với anh chị em
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
26 để tạo điều khiển tùy chỉnh của chúng tôi và
Email
Password
3 cho văn bản đi kèm. Về mặt cấu trúc, đây là cách tiếp cận giống như mặc định
Email
Password
1 của chúng tôi.Chúng tôi sử dụng bộ chọn anh chị em [
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
67] cho tất cả các trạng thái
Large select
Default select
Small select
9 của chúng tôi giống như ____ 169 Khi kết hợp với lớp
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
70, chúng ta cũng có thể tạo kiểu văn bản cho từng mục dựa trên trạng thái ________ 49.Chúng tôi ẩn
Large select
Default select
Small select
9 mặc định với
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
73 và sử dụng
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
70 để xây dựng chỉ báo biểu mẫu tùy chỉnh mới ở vị trí của nó với
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
75 và
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
76. Thật không may, chúng tôi có thể xây dựng một tùy chỉnh từ
Large select
Default select
Small select
9 vì CSS, ____ ____178 không hoạt động trên yếu tố đó.
Trong các trạng thái đã kiểm tra, chúng tôi sử dụng các biểu tượng SVG nhúng Base64 từ biểu tượng mở. Điều này cung cấp cho chúng tôi sự kiểm soát tốt nhất cho kiểu dáng và định vị trên các trình duyệt và thiết bị.base64 embedded SVG icons from
Open Iconic. This provides us the best control for styling and positioning across browsers and devices.
Hộp kiểm
Kiểm tra hộp kiểm tùy chỉnh này
4Hộp kiểm tùy chỉnh cũng có thể sử dụng lớp giả
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
79 khi được đặt thủ công qua JavaScript [không có thuộc tính HTML có sẵn để chỉ định nó]. Kiểm tra hộp kiểm tùy chỉnh này
Hộp kiểm tùy chỉnh cũng có thể sử dụng lớp giả
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
79 khi được đặt thủ công qua JavaScript [không có thuộc tính HTML có sẵn để chỉ định nó].
5Nếu bạn sử dụng jQuery, một cái gì đó như thế này sẽ đủ:
Radio
Chuyển đổi radio tùy chỉnh này
6 Hoặc chuyển đổi radio tùy chỉnh khác này
Radio
Chuyển đổi radio tùy chỉnh này
7 Hoặc chuyển đổi radio tùy chỉnh khác này
Nội tuyến
Kiểm tra hộp kiểm tùy chỉnh này
Radio
8 Chuyển đổi radio tùy chỉnh này
9 Hoặc chuyển đổi radio tùy chỉnh khác này
Large select
Default select
Small select
0Nội tuyến
Large select
Default select
Small select
1Vô hiệu hóa
Large select
Default select
Small select
2Hộp kiểm tùy chỉnh và radio cũng có thể bị vô hiệu hóa. Thêm thuộc tính boolean
Email
Password
4 vào
Large select
Default select
Small select
9 và chỉ báo tùy chỉnh và mô tả nhãn sẽ được tự động tạo kiểu.
Các menu tùy chỉnh ____5050 chỉ cần một lớp tùy chỉnh,
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
83 để kích hoạt các kiểu tùy chỉnh.
Large select
Default select
Small select
3Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các đầu vào văn bản có kích thước tương tự của chúng tôi.
Thuộc tính
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
84 cũng được hỗ trợ:
Như thuộc tính
Email address
Example select
1
2
3
4
5
Example multiple select
1
2
3
4
5
Example textarea
85:
Large select
Default select
Small select
4Trình duyệt tệp
Large select
Default select
Small select
5Đầu vào tệp là sở hữu Gnarly trong nhóm và yêu cầu JavaScript bổ sung nếu bạn muốn kết nối chúng với chức năng Chọn tệp và văn bản tên tệp được chọn.