Mewujudkan Borang Responsif Bergaya Dengan CSS3 dan HTML5

Pengekodan dengan CSS3 telah mengubah landskap secara dramatik dalam pembangunan web frontend. Terdapat lebih banyak peluang untuk membina antara muka unik dengan kecerunan, menjatuhkan bayang dan sudut bulat. Kesemua kesan ini perlahan-lahan diterima pakai di setiap pelayar web utama.

Dalam tutorial ini saya ingin mempamerkan banyak kesan CSS3 yang sejuk ini. Saya telah membina borang web mudah menggunakan beberapa jenis input HTML5 yang lebih baru. Susun atur juga responsif; ia akan menyesuaikan diri kerana saiz tetingkap dikurangkan. Keadaan ini sangat sesuai untuk membina borang web untuk menyokong pengguna telefon pintar.

Lihat kod sumber dan lihat jika anda boleh ikut mengikut struktur fail. Juga bebas untuk menyesuaikan unsur-unsur ini dan menyalinnya ke dalam laman web anda sendiri.

Demo
Muat turun Kod Sumber

Membina Struktur Borang

Untuk memulakan, saya telah mencipta fail utama index.html bersama dengan dua stylesheets berasingan. style.css mengandungi semua pemilih lalai semasa responsive.css mengendalikan saiz tetingkap yang berbeza. Doktor saya adalah HTML5 dan saya telah membungkus seluruh bentuk dalam bekas

Contoh ini hanya menunjukkan kesan yang boleh anda nyatakan semasa pengekodan dalam CSS3. Oleh itu, kami tidak mempunyai skrip penyertaan pos atau destinasi untuk mengalihkan pengguna. Kod saya di bawah mengandungi tag input pembukaan untuk elemen bentuk pertama kami.

Kawasan blok pertama dibungkus dalam tag seksyen supaya kita boleh mengaplikasikan susun atur sebelah-sebelah. Lajur kiri mengandungi semua input ini: teks, e-mel, URL, dan nombor telefon. Seperti yang anda tab melalui pada telefon anda paparan keyboard mudah alih harus menyesuaikan berdasarkan jenis input. Terdapat banyak sebab yang baik untuk menyokong ciri-ciri ini untuk mudah alih kerana semua orang sedang bekerja pada hari ini.

Unsur textarea juga boleh mempunyai teks pemegang tempat yang ditakrifkan pada pageload. Ini sama dengan label yang hilang apabila pengguna memasuki beberapa teks dalam medan. Atribut yang tidak dibawa adalah autocomplete kerana textareas biasanya tidak mengisi kandungan yang berkaitan.

Kawalan Sidebar

Saya mahu membina borang ini supaya ia akan bertindak balas dengan tepat untuk mengubah saiz paparan tetingkap. Apabila tetingkap penuh sehingga kedua lajur input terapung bersebelahan. Tetapi jika lebar dipotong sedikit maka sidebar sebelah kanan jatuh di bawah kandungan utama.

Berikut adalah HTML saya untuk kawasan sidebar:

   Penerima:
  
  Keutamaan:
   Rendah    Sederhana    Tinggi

Kod ini sebenarnya bukan sesuatu yang terlalu mengelirukan. Hanya menu pilihan yang mudah pilih dan beberapa butang radio. Di samping itu, selepas objek ini, saya meletakkan semula dan menyerahkan butang ke arah bahagian akhir.

Ini semua kelihatan baik dan bagus, jadi sekarang mari kita pindah ke beberapa sifat CSS. Terdapat banyak penyesuaian yang boleh anda gunakan semasa bekerja pada elemen bentuk. Cuba untuk tidak merosakkan diri sendiri dengan terlalu banyak berfikir dan bersenang-senang!

Shadows Box Animated

Anda akan melihat seperti yang anda tab melalui setiap unsur input utama yang telah saya animasi bayangan luar yang berwarna-warni. Google Chrome mempunyai sifat garis besar yang melakukan sesuatu yang serupa, tetapi tidak terlalu mewah. Bahagian kecil antara muka ini memikat kepada pengunjung pertama kali.

 / ** elemen bentuk ** / # hongkiat-form box-sizing: border-box;  # hongkiat-form .txtinput display: block; font-family: "Helvetica Neue", Arial, sans-serif; gaya sempadan: pepejal; lebar sempadan: 1px; warna sempadan: #dedede; margin-bottom: 20px; saiz fon: 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; peralihan: sempadan 0.15s linear 0s, box-shadow 0.15s linear 0s, warna 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -moz-peralihan: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  # hongkiat-form .txtinput: focus color: # 333; Warna sempadan: 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 tiada;

Untuk mensasarkan setiap elemen teks, saya telah menggunakan kelas .txtinput. Setiap sifat peralihan berfungsi pada sempadan, kotak bayang-bayang, dan warna. saya menggunakan box-sizing: border-box; pada bekas bekas jadi padding tidak merosakkan reka bentuk responsif kami.

Saya terpaksa menyalin gaya yang sama dan mengeditnya sedikit untuk textarea. Saya menukar beberapa padding dan margin, dan menambah ikon latar belakang yang unik.

 # hongkiat-form textarea display: block; font-family: "Helvetica Neue", Arial, sans-serif; gaya sempadan: pepejal; lebar sempadan: 1px; warna sempadan: #dedede; margin-bottom: 15px; saiz fon: 1.5em; padding: 11px 25px; padding-left: 55px; lebar: 90%; ketinggian: 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; peralihan: sempadan 0.15s linear 0s, box-shadow 0.15s linear 0s, warna 0.15s linear 0s; -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -moz-peralihan: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s; -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;  # hongkiat-form textarea: focus color: # 333; Warna sempadan: 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 tiada;  # hongkiat-form textarea.txtblock background: #fff url ('https://assets.hongkiat.com/uploads/responsive-css3-form/speech.png') 5px 4px no-repeat;

Input Sidebar

Butang radio dan item menu pilihan dinyalakan lebih mudah. Anda boleh memohon kesan cahaya luar dan bayang-bayang drop sama pada unsur-unsur ini, tetapi ia tidak selalu kelihatan baik. Selain itu pereka akan membuat antara muka pengguna tersuai dan melampirkannya sebagai imej latar belakang. Tetapi ini mungkin memerlukan workaround jQuery untuk memastikan pilihan dipaparkan dengan betul.

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

Saya tidak melakukan banyak perkara untuk menolaknya daripada unsur input utama. Banyak padding tambahan adalah penting supaya pengguna anda berasa selesa berinteraksi dengan borang tersebut. Apabila teks adalah super kecil, ia boleh menjadi perjuangan hanya untuk mengisi setiap bahagian. Pastikan fon anda besar, tetapi tidak terlalu besar sehingga ia melanda halaman.

Butang tersuai

Butiran semula dan penyerahan direka dalam kelas mereka sendiri. Saya telah membina satu set kecerunan cahaya untuk dipadankan dengan baik dengan sorotan biru dalam medan borang kami.

Berikut adalah kod CSS saya untuk butang serah pada standard dan keadaan hover.

 #buttons #submitbtn display: block; terapung: kiri; ketinggian: 3em; padding: 0 1em; sempadan: pepejal 1px; garis besar: 0; font-weight: bold; saiz fon: 1.3em; warna: #fff; teks-bayangan: 0px 1px 0px # 222; ruang putih: sekarang; kata-balutan: normal; menegak-align: tengah; kursor: penunjuk; -moz-border-radius: 2px; -webkit-border-radius: 2px; jejari sempadan: 2px; border color: # 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 belakang: 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%); imej latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (3%, rgb (226,238,175)), berhenti warna (3%, rgb (188,216,77) %, 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%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e2eeaf", endColorstr = "# 90b026", GradientType = 0);  #buttons #submitbtn: hover, #buttons #submitbtn: active 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-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (2%, rgb (228,237,189)), berhenti warna (3%, rgb (207,219,120) 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: lajur linear (atas, rgb (228,237,189) 2%, rgb (207,219,120) 3%, rgb (149,175,54) 100%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# e4edbd", endColorstr = "# 95af36", GradientType = 0);

Ia hampir mustahil untuk memastikan pemilih jenis ini bersih! Terdapat terlalu banyak sifat yang anda perlukan untuk menyenaraikan dan menyokong banyak pelayar warisan yang lebih tua. Internet Explorer juga boleh membuat kecerunan ini dengan penapis yang betul. Perhatikan selain dari kecerunan latar belakang saya juga telah menyertakan warna sempadan baru, sudut bulat, dan kotak bayang pada hover.

Butang tetapan semula kelihatan serupa tetapi saya telah melakukan laluan yang sama sekali berbeza dengan skema warna. Kelabu muda cenderung jatuh ke latar belakang berbanding dengan warna hijau terang. Butang semula kami mungkin tidak akan digunakan dengan sangat banyak, jadi ia tidak memerlukan semua perhatian.

 #buttons #resetbtn display: block; terapung: kiri; warna: # 515151; teks-bayangan: -1px 1px 0px #fff; margin-right: 20px; ketinggian: 3em; padding: 0 1em; garis besar: 0; font-weight: bold; saiz fon: 1.3em; ruang putih: sekarang; kata-balutan: normal; menegak-align: tengah; kursor: penunjuk; -moz-border-radius: 2px; -webkit-border-radius: 2px; jejari sempadan: 2px; warna latar belakang: #fff; background-image: -moz-linear-gradient (atas, rgb (255,255,255) 2%, rgb (240,240,240) 2%, rgb (222,222,222) 100%); imej latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (2%, rgb (255,255,255)), berhenti warna (2%, rgb (240,240,240) 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%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# dedede", GradientType = 0); sempadan: 1px pepejal # 969696; box-shadow: 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); teks-bayangan: 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 belakang: #fff; background-image: -moz-linear-gradient (atas, rgb (255,255,255) 2%, rgb (244,244,244) 2%, rgb (229,229,229) 100%); imej latar belakang: -webkit-gradien (linear, kiri atas, bahagian bawah kiri, warna berhenti (2%, rgb (255,255,255)), warna berhenti (2%, rgb (244,244,244) rgb (229,229,229))); lgb (244,244,244) 2%, rgb (229,229,229) 100%); background-image: -o-linear-gradient (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%); penapis: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# e5e5e5", GradientType = 0); warna sempadan: #aeaeae; box-shadow: inset 0 1px 0 rgba (256,256,256,0.4), 0 1px 3px rgba (0,0,0,0.5);

Anda juga boleh menjatuhkan jenis set semula dan menggunakan skema warna putih / kelabu ini sebagai butang serah utama anda. Saya telah menggunakan banyak gaya kecerunan yang sama dan menjatuhkan kesan bayangan, bersama-sama dengan bayangan teks untuk label dalaman. Ia pasti memberikan perasaan yang berbeza kepada pengalaman pengguna.

Perubahan Layout Responsif

Bergerak ke fail CSS saya yang lain, kita boleh melihat pertanyaan media responsif yang mudah saya tetapkan. Setiap tetingkap penyemak imbas di atas 800px akan mengalami antara muka bar sisi penuh. Apabila anda mendapat di bawah ambang ini, lajur kiri mengembang hingga lebar 100% dan anda melihat elemen bar sisi jatuh di bawah.

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

Apabila kita semakin dekat, saya cuba menyesuaikan setiap bentuk input. Hartanah lebar boleh berakhir lebih lama daripada laman web itu sendiri dan kemudian kami mempunyai bentuk input yang melekat di tepi. Ini berlaku sekitar 550px yang mana saya memecahkan pertanyaan seterusnya, bersama-sama dengan kedua-dua resolusi paparan skrin iPhone untuk potret dan landskap.

 / * Skrin kecil yang lebih kecil ******* / @media sahaja skrin dan (max-width: 550px) # hongkiat-form .txtinput, # hongkiat-form textarea width: 80%;  / * Landscape iPhone ******** / @media sahaja dan (max-width: 480px) body padding: 10px 0px;  select.selmenu width: 190px;  / * Potret iPhone ******* / @media sahaja 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;

Mod landskap mendatar masih memegang segala-galanya bersama dengan sangat baik. Saya hanya membuat menu pilihan jatuh turun sedikit nipis untuk memberi ruang untuk butang radio. Dalam paparan potret, saya mengubah saiz semua unsur ke lebar yang lebih kecil. Sekarang kod kami tidak akan memecah walaupun dalam tetingkap penyemak imbas yang diselaraskan. Tetapi ia bagus untuk mempunyai sokongan untuk telefon pintar iOS / Android juga.

Demo
Muat turun Kod Sumber

Kesimpulannya

Saya harap tutorial ini telah memberi maklumat dalam menjelaskan betapa banyaknya boleh dilakukan pada bentuk web anda. Ciri-ciri CSS3 baru cukup kuat untuk membina animasi berfungsi sepenuhnya dengan hanya beberapa baris kod. Ini benar-benar satu masa yang menarik untuk bekerja dalam pembangunan web dan mengikuti trend ini.

Sekiranya anda mempunyai idea atau cadangan mengenai kod tutorial, sila rujuk kepada kami melalui kotak komen di bawah.