Khi thiết kế biểu mẫu web, đôi khi bạn muốn hiển thị một loạt các điều khiển biểu mẫu nội tuyến, trên một hàng ngang
Trong bài viết này, chúng tôi làm việc thông qua một ví dụ đơn giản, trình bày cách tạo biểu mẫu nội tuyến Bootstrap, bao gồm thông tin về khả năng phản hồi, trình giữ chỗ, trường mật khẩu và bố cục lưới. Cuối cùng, chúng tôi thảo luận về cách bạn có thể nâng cao các biểu mẫu Bootstrap của mình bằng cách chỉnh sửa WYSIWYG
Để biết thêm thông tin về các biểu mẫu Bootstrap, hãy xem tài liệu Bootstrap
Bắt đầu với mẫu Bootstrap cơ bản
Bắt đầu với Bootstrap để tải các plugin Bootstrap CSS và JavaScript
Hello, world!
Hello, world!
SAO CHÉP
Thêm một biểu mẫu đơn giản vào dự án Bootstrap của bạn
Thêm biểu mẫu vào phần nội dung HTML của bạn. Ví dụ của chúng tôi, chúng tôi sẽ tạo một biểu mẫu đơn giản với hai trường nhập liệu, hộp kiểm và nút gửi
Email
Password
Remember me
Submit
SAO CHÉP
Tốt nhất là luôn chỉ định đầu vào type
[e. g. , email
, password
,. ] bởi vì, khi bạn làm như vậy, bạn sẽ nhận được một số chức năng bổ sung miễn phí, chẳng hạn như xác thực đầu vào và che giấu mật khẩu. Đọc thêm về các loại đầu vào
Bạn có thể cần căn chỉnh các điều khiển bằng tiện ích giãn cách. Ở đây chúng tôi đã tăng lề trên tất cả các yếu tố với
Email
Password
Remember me
Submit
0Hiển thị biểu mẫu Bootstrap nội tuyến
Theo mặc định, các điều khiển biểu mẫu sẽ được hiển thị bên dưới cái kia. Tuy nhiên, bạn có thể làm cho nhãn biểu mẫu và đầu vào của mình xuất hiện trong dòng, theo chiều ngang, bằng cách áp dụng lớp
Email
Password
Remember me
Submit
1. [Lưu ý rằng nó sẽ chỉ xuất hiện trong dòng trong các cổng xem có chiều rộng ít nhất là 576px. ]
Email
Password
Remember me
Submit
SAO CHÉP
Sau khi áp dụng lớp này vào biểu mẫu [như trong đoạn mã trên], các điều khiển sẽ được hiển thị nội tuyến như sau
Phản hồi và các biểu mẫu nội tuyến Bootstrap
Biểu mẫu nội tuyến Bootstrap sẽ trở lại bố cục dọc khi kích thước hiển thị là 576px. Tuy nhiên, bạn sẽ nhận thấy trong ví dụ của chúng tôi, có một phạm vi từ 576px đến khoảng 830px nơi các điều khiển biểu mẫu bắt đầu bao quanh. Để tránh điều này, bạn có thể buộc nó hoàn nguyên về bố cục dọc khi kích thước hiển thị nhỏ hơn 830px bằng cách thêm CSS sau
@media [max-width: 830px] {
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
SAO CHÉP
Sử dụng văn bản giữ chỗ trong biểu mẫu nội tuyến Bootstrap
Khi các điều khiển biểu mẫu được hiển thị nội tuyến, chúng có thể sử dụng nhiều không gian theo chiều ngang, vì vậy bạn có thể thấy đây là một tình huống thích hợp để sử dụng trình giữ chỗ thay vì nhãn. Bạn có thể làm điều này với thuộc tính
Email
Password
Remember me
Submit
2, ví dụ:
Email
Password
Remember me
Submit
3________số 8_______
SAO CHÉP
Ở đây, chúng ta cũng đã sử dụng lớp
Email
Password
Remember me
Submit
4. Mặc dù bạn có thể muốn xóa nhãn khỏi thiết kế trực quan, nhưng bạn nên giữ chúng vì lý do trợ năng. Vì lý do này, Bootstrap cung cấp lớp
Email
Password
Remember me
Submit
4. Bất kỳ nội dung nào được áp dụng lớp này sẽ bị ẩn đi nhưng vẫn có thể truy cập được bằng các công nghệ hỗ trợ như trình đọc màn hìnhThêm văn bản giữ chỗ vào trường mật khẩu
Bạn có thể nhận thấy rằng mình không thể sử dụng thuộc tính
Email
Password
Remember me
Submit
2 với loại đầu vào password
. [Thực sự có một chút tranh cãi về việc liệu văn bản giữ chỗ có phù hợp với các trường mật khẩu hay không và như thế nào. ] Tuy nhiên, nếu bạn quyết định rằng nó phù hợp với trường hợp của mình, bạn có thể thêm văn bản giữ chỗ vào kiểu nhập mật khẩu bằng cách sử dụng một chút JavaScript
document.getElementById["inlineFormPassword"].placeholder = "Enter password here";
SAO CHÉP
Biểu mẫu nội tuyến Bootstrap với hệ thống lưới
Để thay thế cho việc sử dụng lớp
Email
Password
Remember me
Submit
1, bạn có thể thử nghịch với hệ thống lưới Bootstrap. Chẳng hạn, bố cục đáp ứng tương tự như ví dụ trước được sao chép bằng HTML sau
Name
Email
Remember me
Submit
SAO CHÉP
CodePen này của @wilgustavo là một ví dụ điển hình về biểu mẫu phản hồi bootstrap được xây dựng với hệ thống lưới, hiển thị các tính năng và sự sắp xếp khác nhau, bao gồm cả các phần tử nội tuyến
Nâng cao biểu mẫu Bootstrap của bạn bằng chỉnh sửa WYSIWYG
Hãy xem bài viết của chúng tôi về cách nâng cao các biểu mẫu Bootstrap bằng chỉnh sửa WYSIWYG. Cho dù bạn đang xây dựng biểu mẫu đơn giản hay CMS, bạn đều có thể bắt đầu chỉnh sửa văn bản đa dạng thức trong dự án của mình chỉ với một vài dòng mã