Membuat Formulir Responsif Gaya Dengan CSS3 dan HTML5

Pengodean dengan CSS3 telah secara dramatis mengubah lanskap dalam pengembangan web frontend. Ada lebih banyak peluang untuk membangun antarmuka unik dengan gradien, drop shadow, dan sudut bulat. Semua efek ini perlahan diadopsi di setiap browser web utama.

Dalam tutorial ini saya ingin memamerkan banyak efek CSS3 keren ini. Saya telah membangun formulir web sederhana menggunakan beberapa jenis input HTML5 yang lebih baru. Tata letak juga responsif; itu akan beradaptasi ketika ukuran jendela berkurang. Situasi ini sangat cocok untuk membangun formulir web untuk mendukung pengguna smartphone.

Periksa kode sumber dan lihat apakah Anda dapat mengikuti di dalam struktur file. Juga merasa bebas untuk menyesuaikan elemen-elemen ini dan menyalinnya ke situs web Anda sendiri.

Demo
Unduh Kode Sumber

Membangun Struktur Bentuk

Untuk memulai, saya telah membuat file utama index.html bersama dengan dua stylesheet terpisah. style.css berisi semua penyeleksi default sementara responsif.css menangani berbagai ukuran jendela. Doctype saya adalah HTML5 dan saya telah membungkus seluruh formulir dalam sebuah wadah

Contoh ini hanya menunjukkan efek yang dapat Anda wujudkan saat pengkodean dalam CSS3. Dengan demikian, kami tidak memiliki skrip atau tujuan pengiriman pos untuk mengarahkan ulang pengguna. Kode saya di bawah ini berisi tag input pembuka untuk beberapa elemen formulir pertama kami.

Area blok pertama dibungkus dengan tag bagian sehingga kita dapat mengapungkan tata letak berdampingan. Kolom kiri berisi semua input ini: teks, email, URL, dan nomor telepon. Saat Anda membuka tab pada ponsel Anda, tampilan keyboard ponsel harus beradaptasi berdasarkan pada tipe input. Ada banyak alasan bagus untuk mendukung fitur-fitur ini untuk seluler karena semua orang bekerja saat ini.

Elemen textarea juga dapat memiliki teks placeholder yang didefinisikan pada pageload. Ini mirip dengan label yang hilang begitu pengguna memasukkan beberapa teks di bidang. Atribut yang tidak terbawa adalah autocomplete karena textareas biasanya tidak mengisi konten terkait.

Kontrol Bilah Sisi

Saya ingin membuat formulir ini sehingga akan merespons dengan tepat untuk mengubah ukuran tampilan jendela. Ketika jendela cukup penuh maka kedua kolom input melayang di samping satu sama lain. Tetapi jika lebarnya dikurangi sedikit maka sidebar kanan turun di bawah konten utama.

Inilah HTML saya untuk area bilah sisi:

   Penerima:
  
  Prioritas:
   Rendah    Medium    Tinggi

Kode ini sebenarnya tidak terlalu membingungkan. Hanya pilihan sederhana pilih menu dan beberapa tombol radio. Selain itu, setelah objek-objek ini saya menempatkan tombol reset dan submit di akhir bagian.

Ini semua terlihat baik dan bagus, jadi sekarang mari kita beralih ke beberapa properti CSS. Ada begitu banyak penyesuaian yang dapat Anda terapkan saat mengerjakan elemen formulir. Cobalah untuk tidak merusak diri Anda dengan terlalu banyak berpikir dan bersenang-senang!

Bayangan Kotak Animasi

Anda akan melihat ketika Anda tab masing-masing elemen input utama yang saya animasi bayangan luar berwarna-warni. Google Chrome memiliki properti garis besar yang melakukan hal serupa, tetapi tidak semewah itu. Bagian kecil dari antarmuka ini memikat pengunjung pertama kali.

 / ** elemen bentuk ** / # hongkiat-form box-sizing: border-box;  # hongkiat-form .txtinput display: block; font-family: "Helvetica Neue", Arial, sans-serif; gaya perbatasan: solid; lebar-perbatasan: 1px; warna perbatasan: #dedede; margin-bottom: 20px; ukuran font: 1,55em; padding: 11px 25px; padding-left: 55px; lebar: 90%; warna: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; transisi: perbatasan 015s linier 0s, kotak-bayangan 0.15s linier 0s, warna 0.15s linier 0s; -webkit-transisi: perbatasan 015s linier 0s, kotak-bayangan 0.15s linier 0s, warna 0.15s linier 0s; -moz-transition: perbatasan 015s linier 0s, kotak-shadow 0.15s linier 0s, warna 0.15s linier 0s; -o-transisi: perbatasan 015s linier 0s, kotak-bayangan 0.15s linier 0s, warna 0.15s linier 0s;  # hongkiat-form .txtinput: focus color: # 333; warna batas: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (41, 92, 161, 0.6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (41, 92, 161, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (41, 92, 161, 0,6); garis besar: 0 tidak ada;

Untuk menargetkan setiap elemen teks, saya telah menggunakan kelas .txtinput. Setiap properti transisi bekerja pada batas, bayangan kotak, dan warna. saya menggunakan ukuran kotak: kotak batas; pada wadah formulir sehingga padding tidak mengacaukan desain responsif kami.

Saya harus menyalin gaya yang sama ini dan mengeditnya sedikit untuk textarea. Saya mengubah beberapa padding dan margin, dan menambahkan ikon latar belakang yang unik.

 # hongkiat-form textarea display: block; font-family: "Helvetica Neue", Arial, sans-serif; gaya perbatasan: solid; lebar-perbatasan: 1px; warna perbatasan: #dedede; margin-bottom: 15px; ukuran font: 1,5em; padding: 11px 25px; padding-left: 55px; lebar: 90%; tinggi: 180px; warna: # 777; box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset; transisi: perbatasan 015s linier 0s, kotak-bayangan 0.15s linier 0s, warna 0.15s linier 0s; -webkit-transisi: perbatasan 015s linier 0s, kotak-bayangan 0.15s linier 0s, warna 0.15s linier 0s; -moz-transition: perbatasan 015s linier 0s, kotak-shadow 0.15s linier 0s, warna 0.15s linier 0s; -o-transisi: perbatasan 015s linier 0s, kotak-bayangan 0.15s linier 0s, warna 0.15s linier 0s;  # hongkiat-form textarea: focus color: # 333; warna batas: rgba (41, 92, 161, 0.4); box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (40, 90, 160, 0,6); -moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (40, 90, 160, 0,6); -webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0,1) inset, 0 0 8px rgba (40, 90, 160, 0,6); garis besar: 0 tidak ada;  # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat;

Input Sidebar

Tombol radio dan item menu tertentu ditata lebih sederhana. Anda dapat menerapkan efek cahaya luar dan bayangan serupa pada elemen-elemen ini, tetapi itu tidak selalu terlihat bagus. Atau desainer akan membuat antarmuka pengguna khusus dan melampirkan ini sebagai gambar latar belakang. Tapi ini mungkin memerlukan solusi jQuery untuk menjaga opsi ditampilkan dengan benar.

 span.radiobadge display: block; margin-bottom: 8px;  span.radiobadge label font-size: 1.2em; padding-bottom: 4px;  select.selmenu ukuran font: 17px; warna: # 676767; padding: 9px! penting; perbatasan: 1px solid #aaa; lebar: 200px;

Saya belum melakukan banyak hal untuk mendorong ini dari elemen input utama. Banyak lapisan tambahan penting agar pengguna Anda merasa nyaman berinteraksi dengan formulir. Ketika teks sangat kecil itu bisa menjadi perjuangan hanya untuk mengisi setiap bagian. Pertahankan ukuran huruf Anda besar, tetapi tidak terlalu besar sehingga membanjiri halaman.

Tombol yang Disesuaikan

Tombol reset dan kirim dirancang dalam kelas mereka sendiri. Saya telah membangun satu set gradien cahaya agar cocok dengan highlight biru di bidang formulir kami.

Di bawah ini adalah kode CSS saya untuk tombol kirim pada status standar dan hover.

 #buttons #submitbtn display: block; mengapung: kiri; tinggi: 3em; padding: 0 1em; perbatasan: 1px solid; garis besar: 0; font-weight: bold; ukuran font: 1.3em; warna: #fff; text-shadow: 0px 1px 0px # 222; white-space: nowrap; bungkus kata: normal; vertical-align: tengah; kursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; warna batas: # 5e890a # 5e890a # 000; -moz-box-shadow: inset 0 1px 0 rgba (256.256.256, .35); -ms-box-shadow: inset 0 1px 0 rgba (256.256.256, .35); -webkit-box-shadow: inset 0 1px 0 rgba (256.256.256, .35); box-shadow: inset 0 1px 0 rgba (256.256.256, .35); warna latar: rgb (226.238.175); background-image: -moz-linear-gradient (atas, rgb (226.238.175) 3%, rgb (188.216.77) 3%, rgb (144.176.38) 100%); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (3%, rgb (226.238.175)), color-stop (3%, rgb (188.216.77)), color-stop (100) %, rgb (144.176,38)))); background-image: -webkit-linear-gradient (atas, rgb (226.238.175) 3%, rgb (188.216.77) 3%, rgb (144.176.38) 100%); background-image: -o-linear-gradient (atas, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); background-image: -ms-linear-gradient (atas, rgb (226.238.175) 3%, rgb (188.216,77) 3%, rgb (144.176,38) 100%); background-image: linear-gradient (atas, rgb (226.238.175) 3%, rgb (188.216.77) 3%, rgb (144.176,38) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: hover, #buttons #submitbtn: aktif border-color: # 7c9826 # 7c9826 # 000; warna: #fff; -moz-box-shadow: inset 0 1px 0 rgba (256.256.256,0,4), 0 1px 3px rgba (0,0,0,0.5); -ms-box-shadow: inset 0 1px 0 rgba (256.256.256,0,4), 0 1px 3px rgba (0,0,0,0.5); -webkit-box-shadow: inset 0 1px 0 rgba (256.256.256,0,4), 0 1px 3px rgba (0,0,0,0.5); box-shadow: inset 0 1px 0 rgba (256.256.256,0,4), 0 1px 3px rgba (0,0,0,0.5); latar belakang: rgb (228.237.189); latar belakang: -moz-linear-gradient (atas, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175.54) 100%); latar belakang: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (2%, rgb (228.237.189)), color-stop (3%, rgb (207.219.120)), color-stop (100%, rgb ( 149.175.54))); latar belakang: -webkit-linear-gradient (atas, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175.54) 100%); latar belakang: -o-linear-gradient (atas, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175.54) 100%); latar belakang: -ms-linear-gradient (atas, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175.54) 100%); latar belakang: gradien linier (atas, rgb (228.237.189) 2%, rgb (207.219.120) 3%, rgb (149.175.54) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

Hampir tidak mungkin untuk menjaga pemilih jenis ini bersih! Ada terlalu banyak properti yang perlu Anda daftarkan dan dukung untuk banyak browser lawas. Internet Explorer bahkan dapat merender gradien ini dengan filter yang tepat. Perhatikan selain dari gradien latar belakang saya juga menyertakan warna perbatasan baru, sudut bulat, dan bayangan kotak di hover.

Tombol reset terlihat mirip tetapi saya sudah menempuh rute yang sama sekali berbeda dengan skema warna. Abu-abu terang cenderung jatuh ke latar belakang dibandingkan dengan warna-warna hijau cerah. Tombol reset kami kemungkinan tidak akan banyak digunakan, jadi tidak perlu semua perhatian.

 #buttons #resetbtn display: block; mengapung: kiri; warna: # 515151; text-shadow: -1px 1px 0px #fff; margin-right: 20px; tinggi: 3em; padding: 0 1em; garis besar: 0; font-weight: bold; ukuran font: 1.3em; white-space: nowrap; bungkus kata: normal; vertical-align: tengah; kursor: pointer; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; warna latar: #fff; background-image: -moz-linear-gradient (atas, rgb (255.255.255) 2%, rgb (240.240.240) 2%, rgb (222.222.222) 100%); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (2%, rgb (255.255.255)), color-stop (2%, rgb (240.240.240)), color-stop (100%, rgb (222.222.222)))); background-image: -webkit-linear-gradient (atas, rgb (255.255.255) 2%, rgb (240.240.240) 2%, rgb (222.222.222) 100%); background-image: -o-linear-gradient (atas, rgb (255.255.255) 2%, rgb (240.240.240) 2%, rgb (222.222.222) 100%); background-image: -ms-linear-gradient (atas, rgb (255.255.255) 2%, rgb (240.240.240) 2%, rgb (222.222.222) 100%); background-image: linear-gradient (atas, rgb (255.255.255) 2%, rgb (240.240.240) 2%, rgb (222.222.222) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); perbatasan: 1px solid # 969696; bayangan kotak: 0 1px 2px rgba (144, 144, 144, 0.4); -moz-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); -webkit-box-shadow: 0 1px 2px rgba (144, 144, 144, 0.4); text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75);  #buttons #resetbtn: hover text-shadow: 0 1px 1px rgba (255, 255, 255, 0.75); warna: # 818181; warna latar: #fff; background-image: -moz-linear-gradient (atas, rgb (255.255.255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); background-image: -webkit-gradient (linear, kiri atas, kiri bawah, color-stop (2%, rgb (255.255.255)), color-stop (2%, rgb (244.244.244)), color-stop (100%, rgb (229.229.229)))); background-image: -webkit-linear-gradient (atas, rgb (255.255.255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); gambar latar: -o-linear-gradien (atas, rgb ( 255.255.255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); background-image: -ms-linear-gradient (atas, rgb (255.255.255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); background-image: linear-gradient (atas, rgb (255.255.255) 2%, rgb (244.244.244) 2%, rgb (229.229.229) 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); warna perbatasan: #aeaeae; box-shadow: inset 0 1px 0 rgba (256.256.256,0,4), 0 1px 3px rgba (0,0,0,0.5);

Anda bahkan dapat menghapus jenis reset dan menggunakan skema warna putih / abu-abu ini sebagai tombol kirim utama Anda. Saya telah menggunakan banyak gaya gradien yang sama dan efek drop shadow, bersama dengan bayangan teks untuk label bagian dalam. Ini pasti memberikan perasaan berbeda dengan pengalaman pengguna.

Perubahan Tata Letak Responsif

Pindah ke file CSS saya yang lain, kita bisa melihat pertanyaan media responsif sederhana yang saya siapkan. Jendela browser apa pun di atas 800px akan mengalami antarmuka sidebar penuh. Ketika Anda mendapatkan di bawah ambang batas ini, kolom kiri melebar ke 100% lebar dan Anda melihat elemen-elemen sidebar turun di bawah.

 Layar @ media dan (max-width: 800px) body padding: 10px 15px;  #container width: 100%;  # hongkiat-form #aligned width: 100%; mengapung: tidak ada; display: blok;  # hongkiat-form #aside width: 100%; display: blok; mengapung: tidak ada;  # hongkiat-form .txtinput, # hongkiat-form textarea width: 85%;  #prioritycase float: left; display: blok;  # recipientcase float: left; display: blok; margin-right: 55px;

Ketika kita semakin mendekati ukurannya, saya mencoba menyesuaikan masing-masing formulir input. Properti width dapat berakhir lebih lama dari halaman web itu sendiri dan kemudian kami memiliki formulir input yang menonjol di tepinya. Ini terjadi sekitar 550px yang merupakan tempat saya memecah kueri berikutnya, bersama dengan resolusi tampilan layar iPhone untuk portrait dan landscape.

 / * dropoff layar yang lebih kecil ******* / @media hanya layar dan (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%;  / * iPhone Landscape ******** / @media hanya layar dan (max-width: 480px) body padding: 10px 0px;  select.selmenu width: 190px;  / * Potret iPhone ******* / @media hanya layar dan (max-width: 320px) body padding: 10px 0px;  # hongkiat-form .txtinput, # hongkiat-form textarea width: 70%;  # hongkiat-form #aligned overflow: hidden;  select.selmenu width: 160px;  #recipientcase margin-right: 30px;

Mode lansekap horizontal masih menyatukan semuanya dengan sangat baik. Saya hanya membuat menu pilih tarik turun sedikit lebih tipis untuk memberi ruang bagi tombol radio. Dalam tampilan potret, saya telah mengubah ukuran semua elemen menjadi lebar yang jauh lebih kecil. Sekarang kode kami tidak akan mencapai titik impas di jendela browser yang diubah ukurannya. Tapi senang memiliki dukungan untuk iOS / Android juga.

Demo
Unduh Kode Sumber

Kesimpulan

Saya harap tutorial ini informatif dalam menjelaskan seberapa banyak yang dapat dilakukan di formulir web Anda. Properti CSS3 baru cukup kuat untuk membangun animasi yang berfungsi penuh hanya dengan beberapa baris kode. Ini benar-benar waktu yang menyenangkan untuk bekerja dalam pengembangan web dan mengikuti tren ini.

Jika Anda memiliki ide atau saran tentang kode tutorial, jangan ragu untuk membagikannya kepada kami melalui kotak komentar di bawah ini.