Salam, para pembaca situs blog yang budiman. Hari ini saya ingin berbicara tentang sesuatu seperti formulir HTML. Apapun mesin situs Anda (cms), pasti akan menggunakan formulir dalam satu bentuk atau lainnya, dibuat menggunakan tag Formulir dan Input, serta atribut dan parameter Button, Checked, Value, Checkbox, Radio, Checkbox, Submit .
Nah, Anda juga dapat menambahkan elemen ini untuk membuat daftar drop-down dan bidang teks - Select, Option, Textarea, Label, Fieldset, Legend.
Mengapa formulir diperlukan dan bagaimana cara kerjanya di situs web modern?
String pencarian situs yang sama () dibuat menggunakan tag ini, dan pencarian akan diperlukan pada proyek Anda. Oleh karena itu, memahami bagaimana mereka terstruktur dan bekerja tidak akan menghalangi Anda sama sekali untuk berhasil mengerjakan desain, dan tidak akan berlebihan jika Anda mempromosikannya sendiri.
Jadi, setelah membenarkan kebutuhan untuk mempelajari elemen-elemen ini, saya pikir tidak ada lagi pertanyaan yang muncul, jadi inilah saatnya untuk langsung mempelajari opsi-opsi yang memungkinkan.
Ya, saya juga ingin mengingatkan Anda bahwa kami telah meninjau banyak materi tentang topik bahasa markup hypertext, misalnya tiga ) dan .
Pada intinya, formulir terdiri dari elemen, untuk pembuatannya berbagai tag dimasukkan dari tag Formulir di dalam wadah utama - Dicentang, Nilai, Kotak Centang, Radio, Kotak Centang, Kirim, dll. Kita hanya perlu menempatkan kodenya di tempat yang nyaman tempatkan di templat situs , menunjukkan menggunakan tag dan atributnya bagaimana tampilannya.
Ini bisa berupa bidang teks dengan tombol untuk mengirimkan kueri yang dimasukkan, pilihan dengan tombol radio (di mana Anda hanya dapat membiarkan salah satu tombol yang disediakan ditekan), beberapa bidang teks dengan tombol untuk mengirimkan(), dan banyak lagi.
Misalnya, dalam kasus “pencarian”, menggunakan atribut Nilai Anda dapat menentukan apa sebenarnya yang akan ditulis pada tombol yang terletak di sebelah bidang untuk memasukkan kueri. Data yang dimasukkan dalam formulir harus diproses lebih lanjut dengan cara tertentu.
Misalnya, dalam hal umpan balik, pengguna, setelah mengisi kolom dengan namanya, memasukkan E-mail dan teks pesannya, lalu mengklik tombol kirim, berhak berharap bahwa datanya dari formulir akan dikirim ke E-mail penulis situs. Namun sayangnya, hal ini tidak dapat diimplementasikan hanya dengan menggunakan satu bahasa markup hypertext ().
Untuk tujuan ini, Anda memerlukan program prosesor khusus, yang, setelah pengguna mengklik tombol kirim, akan mengambil semua data dari bidang umpan balik dan mengirimkannya melalui email ke pemilik sumber daya. Anda harus menentukan program mana yang akan melakukan ini sendiri menggunakan atribut Action.
Biasanya, program pengolahnya adalah skrip yang ditulis dalam PHP. Oleh karena itu, dalam atribut Action dari tag Form, Anda perlu menentukan path ke file skrip ini yang terletak di server hosting Anda. Izinkan saya memberi Anda contoh berlangganan RSS feed blog saya melalui E-mail:
Ini mungkin tampak sedikit tidak jelas pada awalnya, tapi saya pikir semuanya akan menjadi lebih jelas seiring berjalannya cerita.
Tag Formulir dan Input untuk membuat tombol, kotak centang, dan tombol radio
Formulir apa pun harus diapit tag pembuka dan penutup Membentuk. Ini semacam wadah untuk kreasi mereka. Tag ini memiliki sejumlah atribut wajib dan opsional:
- Nama – nama unik yang harus ditentukan jika file Html tempat Anda melakukan sesuatu akan menggunakan beberapa formulir web
- Tindakan – atribut yang diperlukan yang menunjukkan jalur ke skrip tempat data akan ditransfer untuk diproses lebih lanjut
- Metode – dengan itu Anda dapat mengubah metode transfer data dari formulir web ini ke skrip file handler. Jika Anda tidak menentukannya, maka metode Dapatkan akan digunakan secara default, yang sebenarnya ditujukan terutama untuk variabel dan pesan singkat, serta transmisi data secara terbuka melalui bilah alamat browser. Untuk mentransfer data formulir ke skrip handler, masih lebih baik digunakan metode POSTING, dirancang khusus untuk transmisi pesan teks secara pribadi
Mari kita lihat tag lainnya yang memungkinkan Anda membuat berbagai formulir web. Yang paling serbaguna adalah Memasukkan. Atribut Type harus ditulis di dalamnya, yang menentukan seperti apa bentuk HTML yang dibuat menggunakan tag ini.
Menggunakan Input dan Type Anda dapat membuat elemen berikut:
- bidang teks satu baris (Type = "Teks")
- kolom untuk memasukkan kata sandi (Type="Password")
- kotak centang (Jenis = "Kotak Centang")
- tombol radio (Jenis = "Radio")
- bidang tersembunyi (Tipe = "Tersembunyi")
- tombol biasa (Tipe = "Tombol")
- tombol untuk mengirim data ke handler (Type="Submit")
- tombol untuk mengembalikan formulir web ke keadaan semula (Type = "Reset")
- bidang untuk mengunggah file ke server (Type = "File)
- tombol dengan gambar (Type="Image")
Input tidak memiliki tag penutup. Seperti apa sebenarnya formulir web yang dibuat menggunakannya bergantung sepenuhnya pada parameter yang ditentukan dalam atribut Type. Jika Tipe tidak ditentukan, kolom teks akan dibuat secara default.
Contoh form yang dibuat pada Input dengan nilai Type yang berbeda
Atribut tag Input lainnya dan contoh penggunaannya
Mari kita lihat untuk apa atribut lain diperlukan:
- Nama – jika data harus dikirim ke skrip program handler, maka Anda harus menentukan parameter untuk atribut Nama. Dengan nama ini, data yang dikirim dari formulir akan muncul di program pengolah informasi.
- Ukuran - ini digunakan untuk mengatur ukuran bidang formulir web yang sedang dibuat. Nilai ditunjukkan dalam jumlah karakter yang dapat ditampung dalam bidang ini. Jika Ukuran tidak ditentukan, lebarnya akan default ke 24 karakter
- Maxlength - secara default, jumlah karakter yang dapat dimasukkan ke dalam formulir Html tidak dibatasi, namun menggunakan Maxlength Anda dapat mengatur batasan ini. Anda tidak akan dapat memasukkan lebih banyak karakter daripada yang ditunjukkan di kolom.
- Nilai - Anda dapat menggunakannya untuk menentukan apa sebenarnya yang akan ditulis secara default di kolom atau pada tombol kirim data
- Dicentang adalah atribut flag yang dapat dimasukkan ke dalam Input untuk tombol radio atau kotak centang. Dalam hal ini, tombol radio atau kotak centang ini akan aktif ketika halaman dengan formulir web dimuat (mereka sudah memiliki tanda centang)
Sekarang mari kita lihat semuanya contoh formulir dengan Input. Tampilan kolom teks mirip dengan tampilan kolom entri kata sandi, jadi mari kita pertimbangkan opsi membuat Teks saja, misalnya untuk memasukkan alamat email:
Sekarang mari kita lihat membuat formulir web dengan tombol radio (Radio):
Perhatikan bahwa formulir ini menggunakan tag Input dua kali, satu kali untuk membuat masing-masing dua tombol radio. Apalagi masing-masing berisi atribut Nama dengan nilai yang sama (resultat), dan nilai Nilainya berbeda (YA dan TIDAK).
Artinya saat memprosesnya, jika salah satu saklar dipilih maka akan dikirimkan sebuah variabel yang namanya tertulis di Nama, namun nilai variabel tersebut akan bergantung pada saklar mana yang dipilih.
Mari kita lihat contoh pembuatan formulir web dengan kotak centang:
Kotak centang berbeda dari tombol radio karena memungkinkan Anda memilih beberapa opsi sekaligus. Nama digunakan untuk menentukan dalam file handler di mana kotak centang ditempatkan, dan Nilai menentukan nilai yang akan dikirim ke handler (jika Nilai tidak ditentukan, maka teks yang terletak di sebelah kotak centang ini akan dikirim ke handler ).
Select, Option, Textarea, Label, Fieldset, Legend - daftar drop-down, area teks, dan elemen formulir web lainnya
Untuk memulainya, saya ingin mengingatkan Anda sedikit tentang apa sebenarnya formulir web dan mengapa diperlukan pada halaman situs web. Mereka terutama dirancang untuk mereplikasi elemen yang ditemukan di sistem operasi apa pun dalam bentuk yang mudah digunakan: tombol, kolom input teks, daftar drop-down, kotak centang, sakelar, dan sejenisnya.
Semua pengguna, tanpa penjelasan tambahan apa pun, memahami tujuan elemen ini dan jika mereka melihat tombol formulir HTML, mereka memahami bahwa mereka perlu mengkliknya.
Apalagi semua elemen penyusunnya (seperti Select, Option, Textarea, Label, Fieldset, Legend) sudah diisi blanko (container), untuk menyisipkannya Anda hanya perlu menggunakan tag yang diinginkan dengan atribut dan parameter yang diperlukan.
Browser sendiri mengetahui cara menampilkan elemen formulir web ini atau itu. Benar, opsi tampilan untuk elemen yang sama di browser yang berbeda mungkin sedikit berbeda satu sama lain, tetapi, sebagai suatu peraturan, tidak signifikan.
Itu. ternyata formulir web dalam Html merupakan upaya untuk mentransfer kunci elemen yang digunakan dalam sistem operasi apa pun, ke halaman situs web. Tapi mengapa mereka dibutuhkan di halaman situs?
Pada prinsipnya, untuk tujuan yang sama dengan elemen serupa yang digunakan dalam sistem operasi - mentransfer data dari pengguna. Dalam hal formulir, data dari pengguna ditransfer ke server, di mana data tersebut diproses oleh program khusus (sayangnya, bahasa markup hiperteks tidak memungkinkan pemrosesan data).
Meskipun demikian, data dapat dikirim tidak hanya ke server, tetapi juga, misalnya, melalui email ke alamat yang ditentukan dalam atribut Action pada tag Form. Saat mengirim data dari Html ke E-mail, pengguna yang mengisi kolom, setelah mengklik tombol kirim data, akan meluncurkan program email default yang digunakan di komputernya.
Tag Formulir pembuka dalam hal ini akan terlihat seperti ini:
Seperti yang Anda lihat, mengklik teks untuk mengaktifkan elemen ini tidak ada gunanya - Anda harus mengkliknya sendiri. Keadaan inilah yang dirancang untuk diperbaiki oleh tag Label. Ini memungkinkan Anda membuat teks di sebelah elemen formulir web dapat diklik, yang tidak diragukan lagi akan meningkatkan kegunaan.
Tapi bagaimana cara menghubungkan elemen formulir HTML dan teks? Untuk melakukan ini, Anda perlu menambahkan ID dengan parameter unik ke atribut, dan teks harus diapit oleh tag Label pembuka dan penutup. Dan itu belum semuanya. Pada tag Label pembuka, Anda perlu menyertakan atribut For, yang parameternya harus sama persis dengan atribut ID pada tag Html elemen formulir. Ternyata seperti ini:
Seperti yang Anda lihat, sekarang, berkat penggunaan Label, elemen formulir web dapat diaktifkan tidak hanya dengan mengkliknya sendiri, tetapi juga dengan mengklik teks yang terletak di sebelahnya.
Fieldset dan Legend - memecah formulir menjadi beberapa bagian
Anda mungkin sering melihat bahwa bentuk-bentuk besar di Html dibagi menjadi beberapa kelompok (Fieldset), yang dikelilingi oleh bingkai dan masing-masing kelompok tersebut memiliki judulnya sendiri (Legenda). Ini diimplementasikan hanya dengan menggunakan dua tag: Fieldset dan Legend. Mereka berpasangan, mis. Mereka harus memiliki pembukaan dan penutupan.
Jadi, untuk membuat sekelompok bagian komponen, Anda perlu menyertakan semua bagian ini di tag Fieldset pembuka dan penutup. Dan untuk menetapkan judul (Legenda) untuk grup ini, Anda harus segera setelah Fieldset pembuka menulis konstruksi Legenda pembuka dan penutup, di antaranya Anda perlu menyisipkan teks judul grup.
Berikut contoh pembuatan grup menggunakan Fieldset dan Legend:
Semoga beruntung untukmu! Sampai jumpa lagi di halaman situs blog
Anda mungkin tertarik
Select, Option, Textarea, Label, Fieldset, Legend - Tag HTML untuk bentuk daftar drop-down dan bidang teks
Daftar dalam kode Html - tag UL, OL, LI dan DL
MailTo - apa itu dan bagaimana cara membuat link di Html untuk mengirim Email
Bagaimana warna diatur dalam kode Html dan CSS, pemilihan warna RGB dalam tabel, keluaran Yandex, dan program lainnya
Apa itu bahasa markup hypertext Html dan cara melihat daftar semua tag di validator W3C
Cara memasukkan link dan gambar (foto) ke dalam HTML - tag IMG dan A
Tabel dalam Html - Tag Tabel, Tr dan Td, serta Colspan, Cellpadding, Cellspacing, dan Rowspan untuk membuatnya
Font (Wajah, Ukuran dan Warna), Blockquote, dan Tag Pra - pemformatan teks lama dalam HTML murni (tidak menggunakan CSS)
Cara membuat hyperlink (A, Href, Target blank), cara membukanya di jendela baru situs, dan juga menjadikan gambar link dalam kode Html
Selama dua tahun terakhir, perkembangan aplikasi web (website) telah mengalami kemajuan pesat dan apa yang kita gunakan untuk membuat website sebelumnya sudah ketinggalan zaman atau metode yang lebih baru telah muncul.
Sebelumnya, untuk membuat daftar dropdown di html ( dalam bahasa Inggris. - tarik-turun), kami baru saja menggunakan
Khusus untuk artikel ini, saya menemukan 16 contoh berbeda yang mungkin berguna selama pengembangan situs web. Jadi mari kita mulai.
1. Daftar khusus
Templat HTML yang memungkinkan Anda menyesuaikan warna Anda sendiri untuk daftar dropdown.
2. Dibuat dengan CSS3/JavaScript
Ditulis dalam CSS3 dan JavaScript. Daftar drop-down reguler.
3. Gaya: stasiun kereta bawah tanah
Daftar drop-down transparan dengan gaya stasiun metro.
4. Jatuh. Ditulis dalam SCSS & jQuery
5. Untuk daftar penerbitan yang panjang
Solusi terbaik untuk menu drop-down yang panjang.
Menu dropdown yang ditulis dalam CSS murni tanpa menggunakan skrip apa pun.
Sempurna untuk menu samping di situs web untuk menampilkan kategori di situs web secara visual.
8. Menu pengaturan pengguna yang bergaya
9. Daftar Tarik-turun CSS3
Dibuat dengan gaya UI, akan sesuai dengan gaya UI situs.
12. Pemilihan bendera
Dropdown dalam gaya pemilihan negara.
13. HTML biasa, tarik-turun CSS
Saya harap Anda menyukai pilihan saya. Tinggalkan komentar, bagikan pendapat Anda, dan kirimkan karya Anda sendiri!
Cara membuat daftar drop-down di html (pilihan TOP 16) dari bologer
Menu tarik-turun horizontal digunakan untuk mengatur struktur navigasi situs. Jumlah tingkat sarang yang optimal adalah satu atau dua. Semakin sedikit tingkat lampiran, semakin mudah pengunjung situs menemukan informasi yang mereka butuhkan. Cara membuat menu horizontal biasa dijelaskan secara rinci di.
Cara membuat menu dropdown horizontal
1. Markup HTML dan gaya dasar untuk menu drop-down dengan satu level bersarang
Markup HTML menu tarik-turun horizontal berbeda dari menu biasa karena tertaut ke item daftar yang diinginkan
- atau<оl> .
Untuk memposisikan submenu relatif terhadap menu utama, gaya berikut dideklarasikan:
— untuk elemen daftar yang berisi daftar drop-down: li (position: relative;) ;
— untuk menu drop-down ul (position: absolute;) , serta nilai kiri dan atas.
Untuk kejelasan dan kemudahan pemformatan, mari tambahkan kelas topmenu ke menu utama dan submenu ke menu drop-down.
Ada beberapa cara untuk menyembunyikan menu drop-down:
1) tampilan: tidak ada;
2) visibilitas: tersembunyi;
3) opasitas: 0;
4) transformasi: skalaY(0);
5) menggunakan perpustakaan jQuery.
Metode 1. (tampilan: tidak ada;)
Menu tarik-turun disembunyikan menggunakan .submenu (display: none;) , saat diarahkan ke atas ditampilkan menggunakan .topmenu li:hover .submenu (display: block;) .
Metode 2. (visibilitas: tersembunyi;)
Menu disembunyikan menggunakan .submenu (visibilitas: tersembunyi;) , dan ditampilkan menggunakan .topmenu li:hover .submenu (visibilitas: terlihat;) .
Metode 3. (opasitas: 0;)
Menu disembunyikan menggunakan .submenu (opacity: 0;) dan ditampilkan menggunakan .topmenu li:hover .submenu (opacity: 1;) . Untuk mencegah menu muncul saat Anda mengarahkan kursor ke area lokasinya, tambahkan visibilitas: tersembunyi; , dan saat melayang, ubah menjadi visibilitas: terlihat; .
Metode 4. (transformasikan: skalaY(0);)
Menu disembunyikan menggunakan .submenu (transform: scaleY(0);) dan ditampilkan menggunakan .topmenu li:hover .submenu (transform: scaleY(1);) . Karena transformasi elemen default terjadi dari pusat, Anda perlu menambahkan for .submenu (transform-origin: 0 0;) , yaitu. dari sudut kiri atas.
Metode 5: Menggunakan jQuery
$(".lima li ul").hide(); // menyembunyikan menu drop-down $(".five li:has(".submenu")").hover(function())( $(".five li ul").stop().fadeToggle(300) ;) /* pilih elemen daftar yang berisi elemen dengan kelas .submenu dan tambahkan fungsi hover yang menampilkan dan menyembunyikan menu drop-down */);2. Menu tarik-turun 3D
Efek menarik dapat dibuat menggunakan transformasi CSS3, misalnya membuat menu muncul dari dalam layar.
* ( ukuran kotak: kotak perbatasan; ) badan ( margin: 0; latar belakang: gradien radial(#BFD6E2 1px, rgba(255,255,255,0) 2px); ukuran latar belakang: 10px 10px; ) nav ul ( gaya daftar : tidak ada; margin: 0; bantalan: 0; ) nav a ( tampilan: blok; dekorasi teks: tidak ada; garis besar: tidak ada; transisi: .4s kemudahan masuk; ) .topmenu ( visibilitas muka belakang: tersembunyi; latar belakang : rgba(255,255,255,.8); ) .topmenu > li ( tampilan: inline-block; posisi: relatif; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; tinggi: 70px; tinggi garis: 70 piksel; bantalan: 0 30 piksel; berat font: tebal; warna: #003559; transformasi teks: huruf besar; ) .bawah: setelah ( konten: "\f107"; margin-kiri: 8 piksel; font-family : FontAwesome; ) .topmenu li a:hover ( warna: #E6855F; ) .submenu ( latar belakang: putih; batas: 2px solid #003559; posisi: absolut; kiri: 0; visibilitas: tersembunyi; opacity: 0; z-index : 5; lebar: 150px; transformasi: perspektif(600px) rotasiX(-90deg); asal transformasi: 0% 0%; transisi: .6s kemudahan masuk; ) .topmenu > li:hover .submenu( visibilitas: bisa dilihat; opacity: 1; transformasi: perspektif(600px) putarX(0deg); ) .submenu li a ( color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; )
3. Menu tarik-turun dengan logo yang dapat diperluas
Dalam contoh ini, bagian atas halaman berisi logo dan navigasi situs. Logo dapat berupa gambar atau teks. Menu tarik-turun secara bertahap diperluas dari bawah item daftar teratas menggunakan fungsi transformasi CSS3.
4. Memperluas Menu Dropdown
Contoh lain untuk menu dropdown. Efek pembesaran saat menu muncul diwujudkan dengan memperkecil size.submenu awal (transform: scale(.8);) , saat hover ukurannya bertambah menjadi.topmenu > li:hover .submenu (transform: scale(1);) .
* ( ukuran kotak: kotak perbatasan; ) badan ( margin: 0; latar belakang: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( latar belakang: putih; ) nav ul ( gaya daftar: tidak ada; margin: 0; padding: 0; ) nav a ( dekorasi teks: tidak ada; garis besar: tidak ada; tampilan: blok; transisi: .4s kemudahan masuk-keluar; ) .topmenu ( perataan teks: tengah; padding: 10px 0; ) .topmenu > li ( tampilan: blok sebaris; posisi: relatif; ) .topmenu > li:after ( konten: ""; posisi: absolut; kanan: 0; lebar: 1px; tinggi: 12px; latar belakang: #d2d2d2; atas: 16px; bayangan kotak: 4px -2px 0 #d2d2d2; transformasi: putar(30deg); ) .topmenu > li:last-child:after ( latar belakang: tidak ada; kotak -bayangan: tidak ada; ) .topmenu > li > a ( padding: 12px 26px; warna: #767676; transformasi teks: huruf besar; berat font: tebal; spasi huruf: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( warna: #c0a97a; ) .submenu ( posisi: absolut; kiri: 50%; atas: 100%; lebar: 210 piksel; margin-kiri: -105 piksel; latar belakang: #fafafa ; batas: 1px solid #ededed; indeks-z: 5; visibilitas: tersembunyi; opacity: 0; transformasi: skala(.8); transisi: kemudahan masuk-keluar 0,4 detik; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; ukuran font: 12px; warna: #484848; font-family: "Kurale", serif; ) .topmenu > li:hover .submenu ( visibilitas: terlihat; opacity: 1; transformasi: skala(1); )
5. Menu tarik-turun
Menu horizontal dengan animasi mini: saat Anda mengarahkan kursor ke link menu atas, sebuah lingkaran kecil akan muncul, yang juga menyertai tampilan menu drop-down.
@import url("https://fonts.googleapis.com/css?.jpg); posisi latar belakang: tengah tengah; pengulangan latar belakang: tanpa pengulangan; ukuran latar: sampul; tinggi: 100vh; posisi: relatif; ) badan:sebelum ( konten: ""; posisi: absolut; kiri: 0; bawah: 0; tinggi: 100%; lebar: 100%; latar belakang: gradien linier(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( perataan teks: tengah; padding: 40px 0 0; ) nav ul ( gaya daftar: tidak ada; margin: 0; padding: 0; ) nav a ( dekorasi teks : tidak ada; tampilan: blok; warna: #222; ) .topmenu > li ( tampilan: blok sebaris; posisi: relatif; ) .topmenu > li > a ( posisi: relatif; padding: 10px 15px; font-family: " Skrip Kaushan", kursif; ukuran font: 1,5em; tinggi baris: 1; spasi huruf: 3 piksel; ) .topmenu > li > a:before ( konten: ""; posisi: absolut; indeks-z: 5; kiri: 50%; atas: 100%; lebar: 10px; tinggi: 10px; latar belakang: putih; radius batas: 50%; transformasi: terjemahan(-50%, 20px); opacity: 0; transisi: .3s; ) .topmenu li:hover a:before ( transform: terjemahkan(-50%, 0); opacity: 1; ) .submenu ( posisi: absolut; indeks-z: 4; kiri: 50%; atas: 100%; lebar: 150px; padding: 15px 0 15px; margin-atas: 5px; latar belakang: putih; radius batas: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); ukuran kotak: border-box; visibilitas: tersembunyi; opacity: 0; transformasi: terjemahan(-50%, 20px); transisi: .3s ; ) .topmenu > li:hover .submenu ( visibilitas: terlihat; opacity: 1; transformasi: terjemahkan(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville", serif; ukuran font: 11px; spasi huruf: 1px; padding: 5px 10px; transisi: .3s linear; ) .submenu a:hover (latar belakang: #e8e8e8;)
Pada artikel ini, kita akan melihat elemen yang memungkinkan Anda membuat daftar drop-down, mempelajari cara membentuk grup dalam daftar ini, melihat cara menonaktifkan item dan bahkan grup daftar, mengenal elemen yang memungkinkan Anda membuat bidang teks multi-baris, yang nantinya dapat Anda gunakan di dalam formulir HTML (element
Selain itu, kami menempatkan tombol di dalam formulir yang berfungsi untuk mengirimkan formulir (elemen dengan tombol ketik "kirim formulir": ketik = "kirim" ).
Hasil dari contoh kita:
Keterangan alat area teks
Jadi kita akan melihat contoh terakhir dan beralih ke tugas praktis dari artikel di buku teks ini.
Berkat atributnya (tag HTML
Teks tooltip disembunyikan ketika pengguna memasukkan nilai (karakter apa pun) ke dalam bidang teks; jika dihapus, tooltip akan ditampilkan lagi.
Mari kita lihat contoh penggunaannya:
type = "kirim" nama = "kirimInfo" value = "kirim" > !}
Dalam contoh ini, kita telah membuat dua area teks (elemen
Perhatikan bahwa jika bidang teks bersifat baca-saja, konten tidak dapat diubah, namun pengguna masih dapat menavigasi, memilih, dan menyalin konten.
Selain itu, kami menempatkan tombol di dalam formulir yang berfungsi untuk mengirimkan formulir (elemen dengan tombol ketik "kirim formulir": ketik = "kirim" ).
Hasil dari contoh kita:
Pertanyaan dan tugas tentang topik tersebut
Sebelum melanjutkan ke topik berikutnya, selesaikan tugas latihan:
- Dengan menggunakan pengetahuan yang Anda peroleh, buatlah formulir lowongan pekerjaan berikut:
Sebelum memulai tugas, buka contoh di jendela baru dan periksa formulir dengan cermat untuk mengulangi semua poinnya. Untuk menyelesaikan tugas ini, Anda memerlukan pengetahuan dari artikel tersebut. Jika Anda melewatkannya, kembalilah untuk mempelajarinya.
Setelah Anda menyelesaikan latihan, periksa kode halaman dengan membuka contoh di jendela terpisah untuk memastikan Anda melakukan semuanya dengan benar.
Hari ini saya ingin menyajikan “resep” kecil untuk membuat daftar di CSS. Tanpa JQuery, tanpa CSS3 - hanya CSS lintas-browser lama yang bagus. Contohnya cukup sederhana, jadi kawan yang berpengalaman mungkin tidak tertarik. Kami akan menerapkan daftar drop-down dengan tombol sosial.
Jadi, jangan bicara panjang lebar, langsung saja ke intinya
HTML
Bagikan postingan ini
- Google Ditambah
- Dalam kontak dengan
- RSS
Saya sengaja menghilangkan poin-poin umum, seperti memasukkan gaya, agar kode tidak bertambah. Di bagian bawah halaman saya akan memberikan link ke sumbernya - semuanya ada di sana.
Apa yang kita miliki di HTML adalah daftar biasa dan header yang tidak biasa. Keunikannya adalah dibuat dengan hyperlink, yang memungkinkan Anda melacak acara tersebut : melayang, yaitu bimbingan. Daftar tarik-turun akan berfungsi saat Anda mengarahkan kursor ke judul.
CSS
Pertama, mari kita lihat gaya dasar daftar dropdown. Saya mencoba mengomentari setiap baris kode agar lebih jelas:
/*Reset padding*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Hover gaya blok*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Judul dalam keadaan normal*/ .droplink h3 a( text-align:center ; lebar:100%; tampilan:blok; padding:12px 0px; warna:#999; dekorasi teks:none ) .droplink h3 a img(border:none) /*Gaya untuk judul hover*/ .droplink:hover h3 a ( warna:#FFF; font-weight:bold; posisi:mutlak )
Tidak ada yang istimewa di sini; kami menunjukkan ukuran dan gaya blok, gaya header, dan untuk kedua elemen, gayanya saat mengarahkan kursor. Teruskan:
/*Menyembunyikan daftar tanpa hover*/ .droplink ul( list-style:none; display:none ) /*Menampilkan daftar saat hover*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li( tampilan:blok)
Kode ini lebih menarik dan menunjukkan bagaimana perilakunya daftar tarik-turun saat mengarahkan kursor. Dalam kondisi normal, biayanya tampilan: tidak ada, artinya, itu tidak ditampilkan. Saat diarahkan, kami menampilkannya sebagai blok. Itulah seluruh rahasianya. Sekarang mari kita hiasi sedikit elemen daftar dan masukkan ikon:
/*Daftar gaya item*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; warna latar:#484A47; tampilan:blok; warna:#FFF; dekorasi teks:tidak ada; ukuran font:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Elemen gaya hover*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image : url("icons/facebook.png")) .twitter a (gambar-latar belakang:url("icons/twitter.png")) .vk a (gambar-latar:url("ikon/vk.png")) . rss a (gambar-latar belakang:url("ikon/rss.png")) .gplus a (gambar-latar belakang:url("ikon/gplus.png"))
Sebenarnya itu saja. Daftar drop-down sudah siap dan terlihat cukup bagus. Anda dapat mendesain elemen sesuai kebijaksanaan Anda, menambahkan sudut membulat dan fitur menarik lainnya.
Jika Anda ingin daftarnya “tumpang tindih” dengan teks di bawahnya saat diarahkan, lihat ke samping indeks-z.
Jika ada yang kurang jelas atau tidak berhasil, tanyakan di komentar atau gunakan tombol “Kirim pesan”, itu ada —>