Khu vực khối đầu tiên được bọc trong thẻ phần để chúng ta có thể thả nổi bố cục cạnh nhau. Cột bên trái chứa tất cả các đầu vào này: văn bản, e-mail, URL và số điện thoại. Khi bạn duyệt qua điện thoại, màn hình bàn phím di động sẽ điều chỉnh dựa trên loại đầu vào. Có rất nhiều lý do tốt để hỗ trợ các tính năng này cho thiết bị di động vì mọi người đang làm việc trên đường đi trong những ngày này.
Phần tử textarea cũng có thể có một văn bản giữ chỗ được xác định trên tải trang. Điều này tương tự như một nhãn sẽ biến mất sau khi người dùng nhập một số văn bản vào trường. Thuộc tính không được mang qua là tự động hoàn thành bởi vì textareas thường không điền vào nội dung liên quan.
Điều khiển thanh bên Tôi muốn xây dựng biểu mẫu này để nó sẽ phản hồi thích hợp với việc thay đổi kích thước màn hình cửa sổ. Khi cửa sổ đủ đầy thì cả hai cột đầu vào sẽ nổi cạnh nhau. Nhưng nếu chiều rộng bị giảm xuống một chút thì thanh bên phải giảm xuống bên dưới nội dung chính.
Đây là HTML của tôi cho khu vực thanh bên:
Người nhận: Nhân viên công trường Tổng biên tập Phòng công nghệ Quan hệ công chúng Hỗ trợ chung Mã này thực sự không có gì quá khó hiểu. Chỉ cần một tùy chọn đơn giản chọn menu và một số nút radio. Ngoài ra, sau khi các đối tượng này, tôi đặt nút đặt lại và gửi vào cuối phần.
Tất cả điều này có vẻ tốt và tốt, vì vậy bây giờ chúng ta hãy chuyển sang một số thuộc tính CSS. Có rất nhiều tùy chỉnh bạn có thể áp dụng khi làm việc trên các phần tử biểu mẫu. Cố gắng đừng sa lầy vào suy nghĩ quá nhiều và vui chơi!
Bóng hoạt hình hộp Bạn sẽ chú ý khi bạn duyệt qua từng yếu tố đầu vào chính mà tôi đã tạo ra một bóng ngoài đầy màu sắc. Google Chrome có một thuộc tính phác thảo thực hiện một cái gì đó tương tự, nhưng không hoàn toàn xa hoa. Phần nhỏ này của giao diện rất lôi cuốn những người truy cập lần đầu.
/ ** các phần tử biểu mẫu ** / # hongkiat-form box-sizing: Border-box; # hongkiat-form .txtinput display: block; họ phông chữ: "Helvetica Neue", Arial, sans-serif; kiểu viền: chắc chắn; đường viền rộng: 1px; viền màu: #dedede; lề dưới: 20px; cỡ chữ: 1,55em; phần đệm: 11px 25px; đệm-trái: 55px; chiều rộng: 90%; màu: # 777; hộp bóng: 0 1px 3px rgba (0, 0, 0, 0.1) inet; -moz-box-bóng: 0 1px 3px rgba (0, 0, 0, 0.1) inet; -webkit-box-bóng: 0 1px 3px rgba (0, 0, 0, 0.1) inet; chuyển tiếp: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; -webkit-quá trình chuyển đổi: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; -moz-quá trình: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; -o-trans: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; # hongkiat-form .txtinput: tập trung color: # 333; màu viền: rgba (41, 92, 161, 0,4); hộp bóng: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-bóng: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (41, 92, 161, 0.6); -webkit-box-Shadow: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (41, 92, 161, 0.6); phác thảo: 0 không; Để nhắm mục tiêu từng phần tử văn bản tôi đã sử dụng lớp .txtinput. Mỗi thuộc tính chuyển tiếp hoạt động trên đường viền, bóng hộp và màu sắc. Tôi đang sử dụng kích thước hộp: hộp viền; trên biểu mẫu để đệm không làm rối thiết kế phản hồi của chúng tôi.
Tôi đã phải sao chép những kiểu tương tự này và chỉnh sửa chúng một chút cho vùng văn bản. Tôi đã thay đổi một số phần đệm và lề và thêm biểu tượng nền độc đáo.
# hongkiat-form textarea display: block; họ phông chữ: "Helvetica Neue", Arial, sans-serif; kiểu viền: chắc chắn; đường viền rộng: 1px; viền màu: #dedede; lề dưới: 15px; cỡ chữ: 1,5em; phần đệm: 11px 25px; đệm-trái: 55px; chiều rộng: 90%; chiều cao: 180px; màu: # 777; hộp bóng: 0 1px 3px rgba (0, 0, 0, 0.1) inet; -moz-box-bóng: 0 1px 3px rgba (0, 0, 0, 0.1) inet; -webkit-box-bóng: 0 1px 3px rgba (0, 0, 0, 0.1) inet; chuyển tiếp: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; -webkit-quá trình chuyển đổi: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; -moz-quá trình: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; -o-trans: viền 0,15s tuyến tính 0s, bóng hộp 0,15s tuyến tính 0s, màu 0,15s tuyến tính 0s; # hongkiat-form textarea: tập trung color: # 333; màu viền: rgba (41, 92, 161, 0,4); hộp bóng: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (40, 90, 160, 0.6); -moz-box-bóng: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (40, 90, 160, 0.6); -webkit-box-bóng: 0 1px 3px rgba (0, 0, 0, 0.1), 0 0 8px rgba (40, 90, 160, 0.6); phác thảo: 0 không; # hongkiat-form textarea.txtblock nền: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px không lặp lại; Đầu vào thanh bên Các nút radio và chọn các mục menu được tạo kiểu đơn giản hơn nhiều. Bạn có thể áp dụng hiệu ứng phát sáng bên ngoài và bóng đổ tương tự trên các yếu tố này, nhưng nó không phải lúc nào cũng trông đẹp. Ngoài ra, các nhà thiết kế sẽ tạo giao diện người dùng tùy chỉnh và đính kèm chúng dưới dạng hình nền. Nhưng điều này có thể yêu cầu một cách giải quyết của jQuery để giữ cho các tùy chọn hiển thị đúng.
span.radiobadge display: block; lề dưới: 8px; nhãn span.radiobadge font-size: 1.2em; đệm-dưới: 4px; select.selmenu font-size: 17px; màu: # 676767; phần đệm: 9px! quan trọng; viền: 1px solid #aaa; chiều rộng: 200px; Tôi đã không làm gì nhiều để đẩy chúng ra khỏi các yếu tố đầu vào chính. Rất nhiều phần đệm thêm rất quan trọng để người dùng của bạn cảm thấy thoải mái khi tương tác với biểu mẫu. Khi văn bản là siêu nhỏ, nó có thể là một cuộc đấu tranh chỉ để điền vào từng phần. Giữ phông chữ của bạn lớn, nhưng không lớn đến mức nó áp đảo trang.
Nút tùy chỉnh Các nút đặt lại và gửi được thiết kế trong một lớp của riêng họ. Tôi đã xây dựng một tập hợp các gradient ánh sáng để phù hợp với các điểm nổi bật màu xanh trong các trường mẫu của chúng tôi.
Dưới đây là mã CSS của tôi cho nút gửi ở trạng thái di chuột và tiêu chuẩn.
#buttons #submitbtn display: block; phao: trái; chiều cao: 3em; đệm: 0 1em; viền: 1px đặc; phác thảo: 0; font-weight: in đậm; cỡ chữ: 1,3em; màu: #fff; bóng văn bản: 0px 1px 0px # 222; khoảng trắng: nowrap; từ-quấn: bình thường; dọc-align: giữa; con trỏ: con trỏ; -moz-Border-radius: 2px; -webkit-Border-radius: 2px; bán kính đường viền: 2px; màu viền: # 5e890a # 5e890a # 000; -moz-box-bóng: chèn 0 1px 0 rgba (256,256,256, .35); -ms-box-bóng: chèn 0 1px 0 rgba (256,256,256, .35); -webkit-box-bóng: chèn 0 1px 0 rgba (256,256,256, .35); hộp bóng: chèn 0 1px 0 rgba (256,256,256, .35); màu nền: rgb (226,238,175); hình nền: -moz-linear-gradient (trên cùng, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (3%, rgb (226,238,175)), dừng màu (3%, rgb (188,216,77)), dừng màu (100 %, rgb (144,176,38))); hình nền: -webkit-linear-gradient (trên cùng, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); hình nền: -o-linear-gradient (trên cùng, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); hình nền: -ms-linear-gradient (trên cùng, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); hình nền: tuyến tính-gradient (trên cùng, rgb (226,238,175) 3%, rgb (188,216,77) 3%, rgb (144,176,38) 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0); #buttons #submitbtn: hover, #buttons #submitbtn: active Border-color: # 7c9826 # 7c9826 # 000; màu: #fff; -moz-box-Shadow: in 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -ms-box-Shadow: in 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); -webkit-box-Shadow: in 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); hộp bóng: inet 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); nền: rgb (228,237,189); nền: -moz-linear-gradient (trên cùng, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (2%, rgb (228,237,189)), dừng màu (3%, rgb (207,219,120)), dừng màu (100%, rgb ( 149.175,54))); nền: -webkit-linear-gradient (trên cùng, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); nền: -o-linear-gradient (trên cùng, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); nền: -ms-linear-gradient (trên cùng, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); nền: gradient tuyến tính (trên cùng, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0); Hầu như không thể giữ sạch bộ chọn loại này! Đơn giản là có quá nhiều thuộc tính bạn cần liệt kê ra và hỗ trợ cho nhiều trình duyệt cũ hơn. Internet Explorer thậm chí có thể kết xuất các gradient này với bộ lọc thích hợp. Lưu ý ngoài độ dốc nền tôi cũng đã bao gồm màu đường viền mới, các góc được làm tròn và bóng hình hộp khi di chuột.
Nút đặt lại trông tương tự nhưng tôi đã đi một tuyến đường hoàn toàn khác với bảng màu. Màu xám nhạt có xu hướng rơi vào nền so với các màu xanh lá cây tươi sáng. Nút đặt lại của chúng tôi có thể sẽ không được sử dụng nhiều, vì vậy nó không cần tất cả sự chú ý.
#buttons #resetbtn display: block; phao: trái; màu: # 515151; bóng văn bản: -1px 1px 0px #fff; lề phải: 20px; chiều cao: 3em; đệm: 0 1em; phác thảo: 0; font-weight: in đậm; cỡ chữ: 1,3em; khoảng trắng: nowrap; từ-quấn: bình thường; dọc-align: giữa; con trỏ: con trỏ; -moz-Border-radius: 2px; -webkit-Border-radius: 2px; bán kính đường viền: 2px; màu nền: #fff; hình nền: -moz-linear-gradient (trên cùng, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,22222222) 100%); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (2%, rgb (255,255,255)), dừng màu (2%, rgb (240,240,240)), dừng màu (100%, rgb (222.222.222))); hình nền: -webkit-linear-gradient (trên cùng, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,22222222) 100%); hình nền: -o-linear-gradient (trên cùng, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,22222222) 100%); hình nền: -ms-linear-gradient (trên cùng, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222.222.222) 100%); hình nền: tuyến tính-gradient (trên cùng, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,22222222) 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# depede", GradientType = 0); viền: 1px solid # 969696; hộp bóng: 0 1px 2px rgba (144, 144, 144, 0,4); -moz-box-bóng: 0 1px 2px rgba (144, 144, 144, 0,4); -webkit-box-bóng: 0 1px 2px rgba (144, 144, 144, 0.4); bóng văn bản: 0 1px 1px rgba (255, 255, 255, 0.75); #buttons #resetbtn: hover text-bóng: 0 1px 1px rgba (255, 255, 255, 0.75); màu: # 818181; màu nền: #fff; hình nền: -moz-linear-gradient (trên cùng, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, dừng màu (2%, rgb (255,255,255)), dừng màu (2%, rgb (244,244,244)), dừng màu (100%, rgb (229,229,229))); hình nền: -webkit-linear-gradient (trên cùng, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); 255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); hình nền: -ms-linear-gradient (trên cùng, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); hình nền: tuyến tính-gradient (trên cùng, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); bộ lọc: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); viền màu: #aeaeae; hộp bóng: inet 0 1px 0 rgba (256,256,256,0,4), 0 1px 3px rgba (0,0,0,0,5); Bạn thậm chí có thể loại bỏ kiểu đặt lại và sử dụng bảng màu trắng / xám này làm nút gửi chính. Tôi đã sử dụng nhiều kiểu gradient và hiệu ứng đổ bóng giống nhau, cùng với bóng văn bản cho nhãn bên trong. Nó chắc chắn cung cấp một cảm giác khác nhau cho trải nghiệm người dùng.
Thay đổi bố cục đáp ứng Chuyển sang tệp CSS khác của tôi, chúng ta có thể xem các truy vấn phương tiện phản hồi đơn giản mà tôi đã thiết lập. Bất kỳ cửa sổ trình duyệt nào trên 800px sẽ trải nghiệm giao diện thanh bên đầy đủ. Khi bạn nhận được dưới ngưỡng này, cột bên trái mở rộng tới 100% chiều rộng và bạn thấy các thành phần thanh bên thả xuống bên dưới.
Màn hình @media và (max-width: 800px) body padding: 10px 15px; #container chiều rộng: 100%; # hongkiat-form #align width: 100%; phao: không có; hiển thị: khối; # hongkiat-form #aside width: 100%; hiển thị: khối; phao: không có; # hongkiat-form .txtinput, # hongkiat-form textarea width: 85%; #p Warrioritycase float: left; hiển thị: khối; #recipientcase float: left; hiển thị: khối; lề phải: 55px; Khi chúng ta tiến gần hơn về kích thước, tôi cố gắng điều chỉnh từng dạng đầu vào. Thuộc tính chiều rộng có thể kết thúc lâu hơn chính trang web và sau đó chúng tôi có các biểu mẫu đầu vào dán ngoài rìa. Điều này xảy ra khoảng 550px, đó là nơi tôi phá vỡ truy vấn tiếp theo, cùng với cả độ phân giải màn hình iPhone cho độ phân giải dọc và ngang.
/ * màn hình thả xuống nhỏ hơn ******* / @media chỉ màn hình và (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%; / * Màn hình chỉ dành cho iPhone Cảnh ******** / @media và (max-width: 480px) body padding: 10px 0px; select.selmenu width: 190px; / * Màn hình chỉ dành cho iPhone ****** / @media và (max-width: 320px) body padding: 10px 0px; # hongkiat-form .txtinput, # hongkiat-form textarea width: 70%; # hongkiat-form #align overflow: hidden; select.selmenu width: 160px; #recipientcase lề-phải: 30px; Chế độ nằm ngang vẫn giữ mọi thứ với nhau rất tốt. Tôi chỉ làm menu thả xuống chọn mỏng hơn một chút để nhường chỗ cho các nút radio. Trong chế độ xem dọc, tôi đã thay đổi kích thước tất cả các thành phần thành các chiều rộng nhỏ hơn nhiều. Bây giờ mã của chúng tôi sẽ không hòa vốn trong các cửa sổ trình duyệt đã thay đổi kích thước. Nhưng thật tuyệt khi có hỗ trợ cho điện thoại thông minh iOS / Android.
Bản giới thiệu Tải về mã nguồn Phần kết luận Tôi hy vọng hướng dẫn này đã được cung cấp nhiều thông tin để giải thích về việc có thể thực hiện được bao nhiêu trên các biểu mẫu web của bạn. Các thuộc tính CSS3 mới đủ mạnh để xây dựng các hình ảnh động hoạt động đầy đủ chỉ với một vài dòng mã. Đây thực sự là một thời gian thú vị để làm việc trong việc phát triển web và theo những xu hướng này.
Nếu bạn có ý tưởng hoặc đề xuất về mã hướng dẫn, vui lòng chia sẻ chúng với chúng tôi qua hộp bình luận bên dưới.
