Làm cách nào để đặt nhãn và đầu vào trên cùng một dòng trong Bootstrap 5?

Thuộc tính nội tuyến Bootstrap dùng để hiển thị các phần tử kèm theo theo chiều ngang trong một hàng. Thuộc tính này có thể được áp dụng cho bất kỳ nhóm nào như hộp kiểm, radio, v.v.

Bài viết này mô tả cách áp dụng thuộc tính nội tuyến cho biểu mẫu để hiển thị nhãn và đầu vào trong một dòng. Nó tạo ra các ví dụ bằng cách sử dụng các phương pháp sau

1. sử dụng lớp biểu mẫu nội tuyến Bootstrap với phiên bản 4
2. sử dụng hệ thống lưới Bootstrap

Có các kịch bản trong việc xây dựng một trang web để thiết kế bố cục biểu mẫu nội tuyến. Ví dụ: biểu mẫu tìm kiếm trong tiêu đề trang chủ yếu sẽ là nội tuyến. Chúng ta sẽ xem một số ví dụ với HTML bố cục biểu mẫu nội tuyến Bootstrap có thể được sử dụng trong một trang web

Biểu mẫu Bootstrap nội tuyến là gì?

Thuộc tính nội tuyến của biểu mẫu Bootstrap là hiển thị các phần tử biểu mẫu theo chiều ngang. Nó hiển thị các nhãn, đầu vào và các thành phần biểu mẫu khác cạnh nhau trong một hàng

Sẽ rất hữu ích khi hiển thị biểu mẫu một dòng ở bất cứ nơi nào giao diện người dùng cần có bố cục nhỏ gọn. Ví dụ: biểu mẫu đăng ký email, biểu mẫu tìm kiếm tiêu đề, v.v.

Mã ví dụ nhanh bên dưới sẽ tạo giao diện nội tuyến của biểu mẫu Bootstrap. Nó sử dụng các lớp lưới Bootstrap trong bố cục HTML

Điều này sẽ hiển thị hai trường, tên và email trong cùng một hàng. Các nhãn được ẩn trực quan bằng cách sử dụng lớp Bootstrap thích hợp. Nó sử dụng các lớp Bootstrap row-cols-* để tạo bố cục biểu mẫu đáp ứng

Ví dụ nhanh

	

		Name 
	

	

		Email
		
	


	

		website
		
	

	

		Submit Form
	

Đầu ra.
Màn hình sau đây hiển thị đầu ra ví dụ nhanh nội tuyến của biểu mẫu Bootstrap. Nó hiển thị ba trường biểu mẫu trong một dòng cạnh nhau.

sử dụng lớp biểu mẫu nội tuyến Bootstrap với phiên bản 4

Lớp biểu mẫu nội tuyến bootstrap hiển thị các phần tử biểu mẫu kèm theo trong một dòng. Lớp này được Bootstrap 4 cung cấp để hiển thị biểu mẫu nội tuyến trên trang web

Đoạn mã dưới đây hiển thị HTML của bố cục biểu mẫu nội tuyến. Nó sử dụng Bootstrap form-inline và các tiện ích khoảng cách để tạo biểu mẫu ưa nhìn

Nó xây dựng một bố cục biểu mẫu liên hệ đơn giản với đầu vào tên, email, chủ đề và tin nhắn. Nó sử dụng lớp chỉ sr của Bootstrap 4 để ẩn các nhãn một cách trực quan

Khoảng cách rất quan trọng trong việc thiết kế biểu mẫu nội tuyến Bootstrap. Bootstrap cung cấp nhiều tiện ích khác nhau để thêm khoảng cách vừa đủ giữa các phần tử biểu mẫu

1. Các tiện ích ký quỹ như m-*, mr-*
2. Các tiện ích đệm như p-*
3. Các lớp sửa đổi máng xối

Bố cục biểu mẫu HTML bên dưới sử dụng các tiện ích lề cho nhóm biểu mẫu để thêm khoảng cách

ví dụ/bootstrap-4-form-inline. html

	

		Name 
	
	

		Email 
	
	

		Subject 
	

	

		Message 
	
	

		Send
	

   

Ghi chú. Bootstrap form-inline chỉ hiển thị các phần tử xếp chồng lên nhau trong chế độ xem trên thiết bị di động

Sử dụng hệ thống lưới Bootstrap

Cả biểu mẫu xếp chồng và nội tuyến đều có tầm quan trọng riêng dựa trên các yêu cầu. Nhưng hình thức với các yếu tố xếp chồng lên nhau là phổ biến trong nhiều trang web

Bootstrap cung cấp các lớp để thiết kế các biểu mẫu phức tạp khác với bố cục thông thường. Hệ thống lưới Bootstrap cung cấp bố cục CSS flexbox để có một loạt các cột liên tiếp

Dưới đây HTML sử dụng các lớp hệ thống lưới để tạo biểu mẫu liên hệ. Nó sử dụng row-cols-* và col-* để thiết kế biểu mẫu nội tuyến Bootstrap có khả năng phản hồi

inline-form-lưới. html

	

		Name 
	
	

		Email 
	
	

		Subject 
	
	

		Message 
	
	

		Send
	

Cả hai mã HTML trên sẽ tạo cùng một bố cục biểu mẫu. Ảnh chụp màn hình sau đây hiển thị các trường biểu mẫu liên hệ đơn giản trong một dòng

Khi thiết kế biểu mẫu nội tuyến Bootstrap, hãy nghĩ đến việc hiển thị nhãn cùng với đầu vào. Đôi khi nó có thể phá vỡ thiết kế nếu các trường biểu mẫu có số lượng nhiều hơn

Vì biểu mẫu liên hệ bên dưới bao gồm 4 trường nên các nhãn được ẩn trực quan để có bố cục rõ ràng

Ghi chú

• Biểu mẫu HTML phải có nhãn cho khả năng đọc màn hình
• Bạn có thể có một nhóm biểu mẫu nội tuyến Bootstrap để có các nhãn và đầu vào hiển thị. Nó sẽ cho một diện mạo tốt với các nhãn

Tất cả các ví dụ trong bài viết này bao gồm các nhãn ẩn trực quan và đầu vào. Các đầu vào chứa thuộc tính giữ chỗ để chỉ định mô tả trường

Ưu điểm của biểu mẫu Bootstrap nội tuyến

Các biểu mẫu có phần tử nội tuyến là một trong những cách thiết kế biểu mẫu web hiệu quả. Tại sao chúng ta cần hiển thị các biểu mẫu nội tuyến Bootstrap? . Hãy xem một số trong số họ được liệt kê dưới đây

• Nhỏ gọn để tiết kiệm bất động sản màn hình
• Đơn giản để khuyến khích mọi người tương tác
• Tính trôi chảy trên màn hình nhỏ hơn bằng cách xếp chồng đầu vào
• Một thành phần lưới đáng tin cậy dễ dàng phù hợp với bố cục
• Chứa hỗ trợ nhiều trình duyệt

Biểu mẫu Bootstrap nội tuyến trong trang web

Các phần bên dưới hiển thị 3 biểu mẫu nội tuyến mẫu là các thành phần phổ biến nhất của trang web

1. Mẫu tìm kiếm tiêu đề một dòng
2. Mẫu đăng nhập nội tuyến đơn giản
3. Mẫu đăng ký email

Tất cả mô phỏng thuộc tính Bootstrap form-inline với grid system của thư viện này

Mẫu tìm kiếm tiêu đề một dòng

Tìm kiếm tiêu đề là phần phổ biến nhất của các loại ứng dụng web khác nhau. Ví dụ: trang web giỏ hàng, hệ thống đặt vé và nhiều ứng dụng khác

Rất có thể, tìm kiếm sẽ là một thành phần giao diện người dùng một dòng. Đôi khi, chúng ta có thể thấy các tiện ích tìm kiếm nâng cao giống như Google trong các ứng dụng web

Bố cục này hiển thị các đầu vào tìm kiếm kết hợp để tìm kiếm từ khóa trong danh mục đã chọn. Nó chứa một danh sách thả xuống HTML để lựa chọn danh mục

Nó sử dụng rows-col-* với các lớp Gutter để hiển thị nội tuyến biểu mẫu Bootstrap đáp ứng. Nó đặt khoảng cách cột theo các lớp col-*

tìm kiếm tiêu đề. html

...


	

		Category 
			
			
			
			
			
	

	

		Email
		
	

	

		Subscribe
	

   

Mẫu đăng nhập nội tuyến đơn giản

Trong một số bố cục trang web hiếm hoi, chúng có biểu mẫu đăng nhập một dòng trong tiêu đề phụ. Tại sao không lấy thiết kế cổ điển của Facebook làm ví dụ?

Bên dưới biểu mẫu đăng nhập Bootstrap HTML sẽ xuất bố cục đăng nhập một dòng cho trang web. Nó hiển thị các trường Tên người dùng và Mật khẩu. Bạn có thể chèn tùy chọn Nhớ tôi cùng với bố cục để nâng cao hơn nữa

hình thức đăng nhập một dòng. html

Simple inline login form

	

		

			Username
			
		
		

			Password
			
		
		

			Login
		
	


   

Mẫu đăng ký email

Form đăng ký nhận email là thành phần quan trọng của một website. Nó chuyển đổi khách truy cập thành người đăng ký trang web của bạn. Nó làm tăng khả năng tiếp cận và giúp tiếp thị giá trị thương hiệu của bạn

Nó phải đẹp và đơn giản để khuyến khích người dùng đăng ký. Vì vậy, Bootstrap form inline sẽ là một lựa chọn tốt để tạo bố cục biểu mẫu này

Nếu trang web của bạn không sử dụng Bootstrap, bạn có thể mô phỏng bố cục linh hoạt của hệ thống lưới theo các kiểu tùy chỉnh

ngang-đăng ký-form. html

...
Simple inline login form

	

		

			Email
			
		
		

			Subscribe
		
	


   

Phần kết luận

Như vậy, chúng ta đã thấy cách tạo một biểu mẫu nội tuyến Bootstrap. Chúng tôi đã xem một ví dụ nhanh về thiết kế biểu mẫu nội tuyến với Bootstrap 5

Danh sách các lợi thế và các mẫu ví dụ nhấn mạnh nhu cầu thực sự của tài sản này. Ví dụ với. form-inline sẽ giúp những người đang sử dụng Bootstrap 4

Làm cách nào để đặt nhãn lên đầu Bootstrap đầu vào?

Làm cách nào để tạo biểu mẫu nội tuyến trong Bootstrap 5?

Nhãn nổi là gì?

Làm cách nào để làm cho trường đầu vào phản hồi nhanh trong Bootstrap?