Theo bầu chọn của tạp chí Hot Cars, Jaguar F-Type, Honda Civic Type R, Lotus Emira, Toyota Supra, Porsche 718 Cayman S… là những mẫu xe thể thao sử dụng động cơ 4 xi lanh Lịch tháng 1 năm 2023Dương lịch / Âm lịch Tên ngày - 12/10/2022- Chủ Nhật Tết Dương lịch - (Xem) Tết Dương lịch 2023Dương LịchTháng 11 Chủ NhậtNăm 2023Âm LịchTháng 1210 Chủ Hướng dẫn tài liệu bootstrapLà lập trình viên web Full stack hay là lập trình viên Front end thì các bạn đều cần học bootstrap. Nhưng ai cũng biết, sử dụng đầy đủ tính năng của Giá vàng ngày 16 tháng 4 năm 2023BVCL - Mở phiên giao dịch sáng 16/4, giá vàng trong nước và thế giới tăng mạnh trở lại. Theo các chuyên gia, vàng bất ngờ tăng giá là do đồng USD Hướng dẫn textarea css - textarea cssTrang chủTham khảoTag htmlĐịnh nghĩa và sử dụngTag dùng để nhập nhiều dòng văn bản. Thẻ có thể chứa nhiều ký tự và làm cho văn bản có một chiều Tham khảo bài học dưới đây của Taimienphi. vn để tìm hiểu cách tạo biểu mẫu trong Bootstrap hoặc tạo biểu mẫu. Ngoài ra, bạn đọc có thể tham khảo thêm một số bài học Bootstrap khác trên Taimienphi. vn để tìm hiểu cách tạo List Group trong Bootstrap Trong các bài học Bootstrap trước Taimienphi. vn đã hướng dẫn bạn cách tạo danh sách bằng Bootstrap. Trong bài học tiếp theo bên dưới Taimienphi. vn sẽ hướng dẫn bạn cách tạo biểu mẫu (biểu mẫu) trong Bootstrap  Tạo biểu mẫu (biểu mẫu) trong Bootstrap 1. Tạo biểu mẫu (biểu mẫu) trong Bootstrap Các biểu mẫu (biểu mẫu) HTML là một phần quan trọng trên các trang web và ứng dụng. Tuy nhiên, việc tạo bố cục và kiểu dáng của các biểu mẫu theo cách thủ công bằng CSS thường mất nhiều thời gian và nhạt màu Bootstrap đơn giản hóa quá trình tạo kiểu và căn chỉnh các nút điều khiển biểu ngữ như nhãn, khung đầu vào, hộp kiểm,. thông qua tập hợp các lớp đã được xác định trước Bootstrap cung cấp 3 loại biểu mẫu cục bộ khác nhau, bao gồm - Bố cục cục bộ theo chiều dọc (đặt cục bộ ở dạng mặc định) - Bố cục cục bộ theo chiều ngang - Bố cục biểu mẫu nội tuyến 2. Tạo biểu mẫu cục bộ theo chiều dọc Đây là định dạng biểu mẫu cục bộ mặc định trong Bootstrap, trong đó các kiểu được áp dụng cho các lớp biểu mẫu kiểm soát mà không cần bổ sung thêm bất kỳ lớp cơ sở nào cho biểu mẫu tử Các lớp biểu mẫu kiểm soát trong định dạng cục bộ này được xếp chồng lên nhau với các nhãn được căn trái ở góc trên cùng Ví dụ. ví dụ dưới đây minh họa cách tạo biểu mẫu cục bộ theo chiều dọc Kết quả trả về có dạng như dưới đây Lưu ý. Tất cả các thẻ bao gồm input, textarea và select đều yêu cầu lớp. form-control to create general type. Layer width. kiểm soát biểu mẫu là 100%. Để thay đổi chiều rộng của lớp, chúng ta có thể sử dụng các lớp lưới đã được xác định trước đó 3. Tạo biểu mẫu cục bộ theo chiều ngang Ngoài ra, chúng ta cũng có thể tạo biểu mẫu cục bộ theo chiều ngang, trong đó các nhãn và nút điều khiển được đặt cạnh nhau bằng cách sử dụng các lớp lưới trong Bootstrap Để tạo biểu mẫu cục bộ theo chiều ngang, chúng ta thêm lớp. hàng trên các lớp biểu mẫu nhóm và sử dụng lớp lưới. col-*-* để chỉ định chiều rộng cho các nhãn và nút điều khiển Đừng quên sử dụng lớp. col-form-label trên nhãn phần tử để căn chỉnh các nút điều khiển trong biểu mẫu. Tham khảo ví dụ dưới đây Kết quả trả về có dạng như dưới đây 4. Tạo biểu mẫu cục bộ nội tuyến Trong một số trường hợp nếu muốn hiển thị một chuỗi nhãn, nút điều khiển trên một hàng ngang để thu gọn bố cục. Để làm được điều này, chúng ta chỉ cần thêm lớp. form-inline into phần tử biểu mẫu. Tuy nhiên, biểu mẫu cục bộ nội tuyến chỉ hiển thị trong chế độ xem có chiều rộng tối thiểu 576px Ví dụ. trong ví dụ dưới đây, chúng tôi sẽ tạo ra một biểu mẫu tổ chức nội tuyến Kết quả trả về có dạng như dưới đây Lưu ý. Taimienphi. vn khuyến cáo bạn nên thêm Nhãn cho đầu vào biểu mẫu (kiểu mẫu) nếu không đọc màn hình màn hình sẽ gặp sự cố với biểu mẫu mà bạn tạo. Tuy nhiên, trong trường hợp nếu bố cục cục bộ biểu mẫu nội tuyến, chúng ta có thể ẩn các nhãn bằng cách sử dụng lớp. chỉ sr 5. Create form control tĩnh Trong một số trường hợp nếu chỉ muốn hiển thị giá trị văn bản thuần túy (văn bản thuần túy) bên cạnh nhãn biểu mẫu thay vì điều khiển biểu mẫu. Để làm được điều này, chúng ta chỉ cần thay thế lớp. form-control by Layer. form-control-plaintext và áp dụng thuộc tính chỉ đọc Class. form-control-plaintext type bỏ các kiểu mặc định khỏi khung biểu mẫu nhưng vẫn giữ nguyên phần lề và phần đệm Ví dụ. trong ví dụ dưới đây minh họa cách tạo điều khiển biểu mẫu tĩnh Kết quả trả về có dạng như dưới đây 6. Hộp kiểm và nút radio Hộp kiểm hộp (hộp đánh dấu) và các nút radio có thể được xếp theo chiều dọc hoặc chiều ngang 6. 1 Sắp xếp hộp kiểm hộp và nút radio theo chiều dọc Để sắp xếp các hộp kiểm hoặc nút radio theo chiều dọc, tức là từng dòng một, chúng ta chỉ cần bao bọc tất cả các điều khiển trong một nhóm biểu mẫu và áp dụng lớp d-block trong nhãn thẻ Ngoài ra, chúng ta có thể sử dụng các lớp tiện ích căn chỉnh để thiết lập khoảng cách phù hợp. Các hạn từ như trong ví dụ dưới đây Ví dụ. trong ví dụ này hộp kiểm hộp và nút radio được xếp theo hàng dọc Kết quả trả về có dạng như dưới đây 6. 2 Xếp hộp kiểm hộp và nút radio theo chiều ngang Để sắp xếp hộp kiểm hộp và nút radio theo chiều ngang, tức là đặt các hộp này cạnh nhau, chúng ta chỉ cần đặt tất cả các điều khiển biểu mẫu vào một nhóm biểu mẫu và sử dụng các lớp tiện ích cơ bản để đảm bảo khoảng cách phù hợp Ngoài ra trong trường hợp này chúng ta không cần sử dụng lớp. d-block trong nhãn phần tử Ví dụ. trong ví dụ dưới đây, chúng ta sẽ xếp hạng các hộp kiểm hộp và nút radio theo chiều ngang Kết quả trả về có dạng như dưới đây 7. Tạo biểu mẫu bị vô hiệu hóa Để vô hiệu hóa các điều khiển biểu mẫu như input, textarea, select, chúng ta chỉ cần thêm các thuộc tính bị vô hiệu hóa cho điều khiển biểu mẫu này và Bootstrap sẽ thực hiện lại phần còn lại. Tham khảo ví dụ dưới đây Kết quả trả về có dạng như dưới đây Trong trường hợp nếu muốn vô hiệu hóa tất cả các điều khiển trong cùng một biểu mẫu, chúng ta chỉ cần đặt các điều khiển này trong bộ trường phần tử và áp dụng thuộc tính bị vô hiệu hóa như trong ví dụ dưới đây Kết quả trả về có dạng như dưới đây 8. Create start to read only Ngoài ra, chúng ta có thể thêm thuộc tính chỉ đọc trong các thẻ đầu vào hoặc vùng văn bản để ngăn chặn việc sửa đổi giá trị của các thẻ này Cho ví dụ, trong ví dụ dưới đây, chúng tôi sẽ bổ sung thuộc tính chỉ đọc trong thẻ đầu vào hoặc vùng văn bản để tạo đầu vào chỉ đọc Kết quả trả về có dạng như dưới đây 9. Chỉ định kích thước cột của các điều khiển biểu mẫu Input, Textareas và Select Để thiết lập kích thước của điều khiển biểu mẫu với kích thước cột lưới của Bootstrap, chúng ta chỉ cần bọc các điều khiển biểu mẫu, tức là đầu vào, vùng văn bản và chọn trong các cột lưới hoặc phần tử bất kỳ và áp dụng các lớp lưới trên đó Ví dụ. ví dụ dưới đây minh họa cách chỉ định kích thước cột của các fomr control Input, Textareas và Select Kết quả trả về có dạng như dưới đây mẹo. outside them ta could instead layer. form-row trong khi tạo biểu mẫu toàn cục. Class. form-row is variable of the layer grid. row in Bootstrap, override khoảng trắng nằm giữa cột nội dung (gutter) để bố cục cục bộ rõ ràng và gọn gàng hơn 10. Kích thước chiều cao của điều khiển biểu mẫu Input và Select Để thay đổi chiều cao của bản gốc nhập vào và các hộp kiểm tra sao cho phù hợp với kích thước của các nút, chúng ta sử dụng các lớp chỉ định kích thước chiều cao của điều khiển biểu mẫu như. kiểm soát hình thức-lg,. form-control-sm trên các hộp nhập và chọn để chỉ định kích thước lớn hơn hoặc nhỏ hơn Ngoài ra, đừng quên áp dụng các lớp. col-form-nhãn-sm hoặc. col-form-label-lg trên nhãn phần tử hoặc chú thích để thay đổi kích thước nhãn chính xác cho điều khiển biểu mẫu Ví dụ. ví dụ dưới đây minh họa cách thay đổi kích thước chiều cao của điều khiển biểu mẫu Input và Select Kết quả trả về có dạng như dưới đây 11. Vị trí văn bản xung quanh Kiểm soát biểu mẫu Thêm văn bản (văn bản) xung quanh các biểu mẫu kiểm soát cũng là một cách để hướng dẫn người dùng nhập dữ liệu đầu vào trong biểu mẫu sao cho chính xác. Để thêm văn bản cho kiểm soát biểu mẫu, chúng ta sử dụng lớp. văn bản biểu mẫu Ví dụ Kết quả trả về có dạng như dưới đây Tương tự, chúng ta cũng có thể sử dụng phần tử nhỏ để bổ sung cho văn bản mà không cần sử dụng lớp. văn bản biểu mẫu Ví dụ. trong ví dụ dưới đây chúng ta sử dụng phần tử nhỏ để bổ sung cho văn bản Kết quả trả về có dạng như dưới đây 12. Create a verify pattern by Bootstrap Bootstrap 4 cung cấp các giải pháp để xác thực các biểu mẫu web phía trước máy khách một cách nhanh chóng và dễ dàng bằng cách sử dụng API xác thực biểu mẫu của trình duyệt để thực hiện Các lớp xác thực biểu mẫu trong CSS bao gồm. invalid and. lớp giả hợp lệ. Các lớp này được áp dụng cho các phần tử đầu vào, chọn và vùng văn bản Ví dụ. cho ví dụ dưới đây Kết quả trả về có dạng như dưới đây Lưu ý. với các thông báo xác thực biểu mẫu trong Bootstrap, chúng ta phải vô hiệu hóa các chú giải công cụ phản hồi mặc định của trình duyệt bằng cách bổ sung thuộc tính novalidate cho phần tử biểu mẫu Dưới đây là tùy chỉnh mã JavaScript hiển thị thông báo lỗi và vô hiệu hóa gửi biểu mẫu trong các trường hợp không hợp lệ mẹo. để đặt lại giao diện biểu mẫu theo chương trình, chúng ta chỉ cần xóa lớp. đã được xác thực từ biểu mẫu phần tử. Bootstrap áp dụng lớp này tự động trên biểu mẫu sau khi người dùng nhấp chọn nút Gửi (gửi) Để yêu cầu xác thực phía máy chủ, chỉ cần sử dụng các lớp. is-invalid and. hợp lệ để hiển thị các mục trong khung là hợp lệ và không hợp lệ. Ngoài ra. invalid-feedback and. valid-feedback cũng hỗ trợ các lớp này Ví dụ Kết quả trả về có dạng như dưới đây Ngoài ra chúng ta có thể thay thế các lớp. {có giá trị. invalid}-feedback by các lớp. {có giá trị. invalid}-tooltip to display the feedback text by tooltip type Cần chắc chắn rằng vị trí phong cách đã được áp dụng. họ hàng hoặc lớp. vị trí tương đối trên phần tử cha để hiển thị chú giải công cụ phản hồi đúng cách. Tham khảo ví dụ dưới đây Kết quả trả về có dạng như dưới đây 13. Form Control đã được hỗ trợ trong Bootstrap Bootstrap hỗ trợ tất cả các điều khiển biểu mẫu HTML tiêu chuẩn cũng như các định dạng đầu vào HTML5 bao gồm ngày giờ, số, email, url, tìm kiếm, phạm vi, màu sắc, url,. Ví dụ. trong ví dụ dưới đây minh họa cách sử dụng tiêu chuẩn kiểm soát biểu mẫu với Bootstrap Kết quả trả về có dạng như dưới đây Bài học trên Taimienphi đây. vn vừa hướng dẫn bạn cách tạo biểu mẫu (biểu mẫu) trong Bootstrap. Ngoài ra nếu có bất kỳ thắc mắc hay câu hỏi nào cần giải đáp, bạn đọc có thể để lại ý kiến của mình trong phần bình luận dưới bài viết nhé! |
