Acara tarik-turun html php css. Kami membuat daftar drop-down yang bergaya. HTML biasa, tarik-turun CSS

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:

  1. Nama – nama unik yang harus ditentukan jika file Html tempat Anda melakukan sesuatu akan menggunakan beberapa formulir web
  2. Tindakan – atribut yang diperlukan yang menunjukkan jalur ke skrip tempat data akan ditransfer untuk diproses lebih lanjut
  3. 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:

  1. bidang teks satu baris (Type = "Teks")
  2. kolom untuk memasukkan kata sandi (Type="Password")
  3. kotak centang (Jenis = "Kotak Centang")
  4. tombol radio (Jenis = "Radio")
  5. bidang tersembunyi (Tipe = "Tersembunyi")
  6. tombol biasa (Tipe = "Tombol")
  7. tombol untuk mengirim data ke handler (Type="Submit")
  8. tombol untuk mengembalikan formulir web ke keadaan semula (Type = "Reset")
  9. bidang untuk mengunggah file ke server (Type = "File)
  10. 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:

  1. 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.
  2. 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
  3. 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.
  4. Nilai - Anda dapat menggunakannya untuk menentukan apa sebenarnya yang akan ditulis secara default di kolom atau pada tombol kirim data
  5. 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:

Pilih dan Opsi - tag daftar tarik-turun

Semua elemen formulir web yang membuat bidang daftar drop-down dibentuk dengan cara yang sama. Pertama, wadah kotak kombo diatur menggunakan tag Html Select pembuka dan penutup. Dan kemudian, di dalam wadah ini, wadah terpisah dibuat dengan item (elemen) dari daftar ini. Ini dilakukan dengan menggunakan tag Opsi pembuka dan penutup.

Ternyata seperti ini:

Tapi ini adalah desain yang disederhanakan, karena Select dan Option memiliki sejumlah atribut, yang menentukan properti dan tampilan bidang daftar drop-down yang dibuat.

  1. Nama - Anda harus menentukan nama unik untuk elemen formulir web yang dibuat menggunakan Select. Nama ini akan diteruskan ke server ke program penanganan data sebagai nama variabel. Nilai variabel ini akan menjadi nilai atribut Nilai (ditetapkan dalam Opsi untuk setiap item) dari item daftar drop-down yang dipilih pengguna.
  2. Ukuran—Anda dapat menggunakannya untuk mengatur jumlah item yang ditampilkan. Dengan kata lain, menggunakan Ukuran Anda dapat mengatur tinggi daftar, diukur dalam jumlah baris yang ditampilkan. Jika Anda tidak secara eksplisit menentukan nilai Ukuran dalam tag Pilih, tinggi default daftar dropdown akan digunakan, dan akan berbeda jika atribut Pilih tidak ada atau ada dalam atribut Pilih:
    1. Jika Ada Banyak di Pilih, maka tinggi daftar drop-down di formulir web secara default akan sama dengan jumlah elemennya. Itu. Semua item daftar dropdown beberapa pilihan akan ditampilkan. Lihat contoh jamak di bawah ini. Jika atribut Ukuran di Pilih diatur kurang dari jumlah item, bilah gulir akan muncul di sebelah kanan.
    2. Jika Banyak tidak ada di Pilih, maka tinggi daftar drop-down di formulir web akan menjadi satu baris secara default. Itu. Hanya satu garis yang akan terlihat, dan item lainnya hanya dapat diakses dengan menekan tombol elevator (di sebelah kanan). Lihat contoh di bawah
  3. Banyak - menetapkan atribut ini ke tag Pilih akan memungkinkan Anda membuat daftar drop-down dengan kemampuan untuk memilih beberapa item secara bersamaan. Baca lebih lanjut tentang atribut ini di bawah.

Formulir dengan daftar drop-down dapat dibagi menjadi dua pilihan. Pada opsi pertama, Anda hanya dapat memilih satu elemen (baris) bidang dengan daftar drop-down; pada opsi kedua, sambil menahan Ctrl atau Shift, Anda dapat memilih beberapa item yang tersedia secara bersamaan.

Dalam hal ini, pada opsi kedua, data tentang semua item yang dipilih akan dikirim ke server. Daftar drop-down mana yang akan dibuat ditentukan oleh ada tidaknya atribut Multiple pada tag Select.

Kelipatan ditentukan dalam Pilih tanpa parameter, karena Itu hanya ditulis Multiple dan hanya itu. Jika ada, formulir web daftar drop-down akan dibuat dengan kemampuan beberapa pilihan (menahan Ctrl atau Shift).

Varian bidang dengan daftar drop-down yang akan ada pilihan ganda mungkin, akan terlihat seperti ini:

Di sebelah kanan adalah contoh formulir web dropdown pilihan ganda yang didasarkan pada kode di atas. Seperti yang Anda lihat, dengan menahan Ctrl atau Shift Anda dapat memilih beberapa item secara bersamaan.

Jika tidak ada atribut Multiple di tag Select, maka hanya satu elemen dari daftar drop-down (baris) ini yang dapat dipilih.

Contoh di mana Anda hanya dapat memilih satu item dapat dilihat di sini:

Label Pilih Situs yang Dipilih Legenda

Atribut Tag Opsi


Dalam daftar drop-down yang dibuat (menggunakan Select dan Option), Anda dapat menambahkan sesuatu seperti pemisah dengan judul grup, yang akan berbeda dari item menu lainnya dalam gaya font.

Untuk membuat grup dari item daftar drop-down, Anda harus menyertakannya di tag pembuka dan penutup formulir Optgroup, dan di tag Optgroup pembuka, tambahkan atribut Label, sebagai parameter yang harus Anda masukkan nama grup yang diinginkan.

Misalnya seperti ini:

Pilih Label
Legenda situs web yang dipilih

Textarea - membuat kolom teks pada formulir

Ada elemen lain dari formulir web yang belum kami pertimbangkan - Textarea (bidang dengan kemampuan memasukkan teks multi-baris). Itu dibuat menggunakan tag HTML berpasangan Textarea. Selain itu, Anda dapat membungkus teks di dalamnya ke dalam baris baru dan itu akan dikirim ke server dengan mempertimbangkan terjemahan yang dilakukan.

Jadi, untuk membuat bidang teks multiline, Anda perlu menentukan Textarea pembuka dan penutup, dan di antara keduanya Anda dapat menambahkan teks yang akan terlihat saat halaman dengan formulir web dimuat. Pengguna kemudian dapat menghapus teks ini dan menulis teksnya sendiri.

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

Dalam contoh ini kami memberi tag

Di browser tampilannya seperti ini:

Mengelompokkan item menu

Mari kita lihat tag berikut , yang digunakan untuk mengelompokkan data terkait dalam daftar dropdown nama = "hitam putih" > label = "Daftar Putih" >

Dalam contoh ini, kami telah menyorot 2 grup dengan tag . Atribut label elemen menentukan nama grup yang dipilih, ditulis dengan huruf tebal:

Dalam contoh berikut, dengan menggunakan atribut boolean yang dinonaktifkan, kita akan menonaktifkan satu grup (" Grup B"):

</span> Contoh penggunaan atribut cacat pada tag HTML <optgroup><span>

Hasil dari contoh kita:

Nonaktifkan daftar dan pilih banyak

</span> Atribut tag yang dinonaktifkan dan banyak <select><span>

Dalam contoh ini, kami membuat dua daftar dropdown. Untuk daftar pertama, kami menggunakan atribut nonaktif, yang mencegah interaksi dengan daftar (menonaktifkannya).

Untuk daftar kedua, kami menggunakan atribut multiple, yang menunjukkan bahwa dimungkinkan untuk memilih beberapa opsi dalam daftar sekaligus (melalui Ctrl pada Windows dan melalui Memerintah di Mac).

Di browser tampilannya seperti ini:

Area teks

Hasil dari contoh kita:

Menonaktifkan area teks

Dengan analogi dengan elemen tag yang telah dibahas sebelumnya



type = "kirim" nama = "kirimInfo" value = "kirim" > !}

Dalam contoh ini, kita telah membuat dua area teks (elemen