Membuat formulir dalam HTML. Bagaimana daftar dropdown dilakukan dalam html? Pembuatan grup elemen drop-down dari daftar formulir

Halo para pembaca situs blog yang terhormat. Sebagai bagian dari studi seluk-beluk, sebagai tugas selanjutnya, kami akan terus menganalisis detail pembuatan formulir di situs menggunakan yang sesuai.

Hari ini kita akan menganalisis cara membuat daftar tarik-turun (drop-down), termasuk pilihan ganda, menggunakan pilih dan opsi, cara membangun bidang teks melalui textarea, dan juga berbicara tentang kemungkinan memperluas fungsionalitas formulir dengan menggunakan tag fieldset, label dan legenda.

Biarkan saya mengingatkan Anda bahwa formulir apa pun yang ada di halaman dibuat menggunakan dan dirancang untuk memasukkan informasi apa pun dari pengguna dan mengirimkannya ke server (contoh -).

Sayangnya, sarana bahasa markup hypertext tidak memungkinkan Anda untuk memproses informasi ini secara langsung, oleh karena itu, menggunakan HTML, kami hanya membuat tampilan formulir, dan data yang diperlukan dikirim untuk diproses. Untuk tujuan ini, file khusus sengaja dibuat di server web, ditulis dalam salah satu bahasa server (paling sering, PHP). Misalnya, untuk umpan balik, Anda dapat membuat file mail.php, yang akan menjadi handlernya.

Dalam penggunaan praktis dari informasi yang diperoleh dalam publikasi ini, jangan lupa tentang bagaimana seharusnya terlihat, di mana kode dari semua elemen halaman yang terlihat, termasuk formulir, selalu berada di dalam tag badan.

Informasi ini sangat diperlukan, karena bahkan dalam hal menggunakan semua alat pengembang bawaan modern (ingat, tanda pertama dalam penerapan fungsi ini adalah), Anda harus memahami dengan jelas mekanisme penggunaan tag utama, lalu mengedit Kode HTML, kebutuhan yang muncul dari waktu ke waktu, akan berubah menjadi pengalaman yang menyenangkan.

2. beberapa- atribut ini, yang tidak memiliki parameter, memungkinkan pemilihan ganda, berbeda dengan contoh di atas, di mana Anda hanya dapat memilih satu elemen (garis). Cobalah untuk memilih beberapa baris dalam daftar ini dengan mouse (satu per satu di setiap tempat, tahan tombol Ctrl, atau gunakan Shift berikut dalam satu baris satu per satu):

3. Ukuran- mengatur ketinggian daftar dropdown, yaitu jumlah baris yang ditampilkan. Jika banyak atribut ada dan ukurannya tidak ditentukan (seperti pada contoh di atas), maka empat baris ditampilkan secara default, dan, misalnya, dengan size = "5", lima sudah akan terlihat:

Legenda Fieldset Label Textarea Opsi

4. Diperlukan(tidak memiliki parameter) - mendefinisikan bahwa pilihan harus dibuat sebelum mengirim data ke handler. Jika item dari daftar tidak dipilih, maka data formulir tidak akan dikirim:

Legenda Fieldset Label Textarea Opsi

5. Fokus otomatis(tidak memiliki nilai) - menyetel fokus ke daftar segera setelah halaman dimuat. Selain itu, jika pengguna terbiasa melakukan bagian utama tindakan dengan tombol, maka fokus yang telah dikonfigurasikan sebelumnya akan membantu membuat pilihan dari daftar menggunakan panah pada keyboard tanpa menggunakan mouse:

6. Dengan disabilitas(tanpa parameter) - memblokir akses ke daftar (menonaktifkannya). Dalam praktiknya, ini biasanya digunakan bersama dengan skrip dalam kasus di mana Anda perlu memasukkan daftar drop-down hanya ketika kondisi tertentu terpenuhi:

7. Membentuk- menghubungkan daftar dengan satu atau lebih formulir yang dimilikinya, tetapi berada di luar wadah

... Dalam hal ini, parameter ditulis dalam peran nilai atribut form. atribut id global yang ditambahkan ke tag formulir:

Pilih Opsi Textarea Label Fieldset Legend dari daftar

Jangan bingung memilih atribut tag dengan tag utama untuk membuat formulir. Dalam contoh di atas, atribut id = "data" ditambahkan ke tag formulir, dan atribut form = "data" ditambahkan ke pilih, yang memungkinkan untuk mengaitkan daftar tarik-turun dengan formulir tertentu.

Atribut tag opsi

1. Nilai- mendefinisikan nilai dari daftar drop-down yang akan dikirim ke server (form handler). Sebenarnya, nama tersebut dikirim ke handler, yang ditentukan oleh atribut name dari tag pilih, dan nilai nilai(untuk contoh ini - 1, 2, 3, 4, 5) sesuai dengan baris yang dipilih dari daftar drop-down:

Legenda Fieldset Label Textarea Opsi

2. Dengan disabilitas- memblokir item daftar drop-down untuk dipilih.

Legenda Fieldset Label Textarea Opsi

Seperti yang Anda lihat dari contoh, baris "Opsi" tidak aktif dan tidak dapat dipilih.

3. Label- menampilkan konten teks (yang merupakan nilainya) dari item daftar ini atau itu. Jika label ada, maka baris yang identik dengan nilai atribut ini akan ditampilkan dan konten teks di dalam tag opsi diabaikan. Hal yang sama terjadi jika konten antara sama sekali tidak ada.

Tag Label Tag Textarea Tag Fieldset Tag Legenda

Lihat. Dalam contoh yang diberikan di atas, baris pertama untuk opsi dalam kode kosong (di sisi kiri tabel), tetapi parameter label = "Tag opsi" ditentukan, akibatnya, teks ini muncul dalam daftar (di sisi kanan). Baris kedua kode berisi teks "Textarea Tag" sebagai konten dari tag opsi, tetapi daftar drop-down di sebelah kanan menampilkan kata "Textarea", yang cocok dengan nilai label = "Textarea".

4. Terpilih- menyoroti item saat ini dalam daftar drop-down:

Legenda Fieldset Label Textarea Opsi

Jika ada beberapa atribut, maka dimungkinkan untuk memilih lebih dari satu elemen:

Legenda Fieldset Label Textarea Opsi

Atribut tag optgroup

Jika daftar drop-down perlu diurutkan, misalnya, dibagi menjadi beberapa grup, maka untuk masing-masing grup ini sebuah wadah digunakan, yang terdiri dari tag optgroup pembuka dan penutup, yang berisi bagian dari item daftar drop-down. Namun, ada dua atribut untuk mengonfigurasi daftar drop-down seperti itu.

1. Label- menetapkan nama setiap grup sebagai parameter:

Legenda Fieldset Label Textarea Opsi

Sama, tetapi dengan beberapa dan ukuran = "7" dari tag pilih:

Legenda Fieldset Label Textarea Opsi

2. Dengan disabilitas(tidak ada nilai) - memblokir pemilihan elemen grup dalam kaitannya dengan pengaturannya, terlebih lagi, item yang tidak aktif biasanya disorot dengan warna abu-abu:

Legenda Fieldset Label Textarea Opsi

Sebuah video pendek akan berguna di sini:

Bidang teks dalam formulir melalui textarea

Elemen bentuk lain untuk situs yang akan kami pertimbangkan adalah bidang dengan kemampuan untuk memasukkan teks multi-baris ke dalamnya. Itu dapat dibuat menggunakan tag textarea. Tanpa atribut default, menerapkan tag ini akan memberikan hasil sebagai berikut:

Masukkan teks:

Masukkan teks:

Di lapangan, Anda dapat melakukan jeda baris, sementara teks akan dikirim ke pawang di server, dengan mempertimbangkan jeda baris yang dibuat. Bidang dapat diregangkan lebar dan panjangnya dengan meraih sudut kanan bawah dengan mouse, yang ditandai dengan dua garis diagonal.

Sekarang mari kita coba menambahkan beberapa atribut dengan parameter ke kode aslinya:

1. Nama- mendefinisikan nama area teks sebagai nilai untuk identifikasinya setelah mengirimkan data formulir saat memprosesnya di server.

2. cols- lebar bidang, yang dalam peran parameter ditentukan oleh jumlah simbol identik yang berdekatan yang ditempatkan secara horizontal. Standarnya adalah 20.

3. Baris- tinggi kotak teks, ditentukan oleh jumlah baris. Jika jumlah baris teks yang dimasukkan oleh pengguna lebih besar dari nilai yang ditentukan oleh atribut ini, maka bilah gulir vertikal muncul di sebelah kanan.

4. Panjang maksimal- menunjukkan jumlah maksimum karakter yang dapat ditempatkan di kotak teks. Jika batas terlampaui, entri lebih lanjut tidak mungkin.

Di bawah ini adalah contoh dengan semua atribut di atas, efeknya masing-masing dapat Anda periksa sendiri dengan hanya menempatkan jumlah huruf dan baris yang diperlukan di area teks (Anda cukup memasukkan karakter yang sama beberapa kali):

Masukkan teks:

Masukkan teks:

5. Panjang minimum- menunjukkan jumlah minimum karakter yang harus dimasukkan dalam area teks. Jika pengguna mencoba mengirim teks dengan karakter yang lebih sedikit, browser akan menampilkan pesan singkat dengan informasi, yang akan berisi menyebutkan perlunya melengkapi isi formulir dan berapa banyak karakter yang telah dimasukkan.

7. Baca saja(tanpa parameter) - jika Anda melampirkan atribut ini ke area teks, maka bidang teks tidak akan dapat diakses oleh pengguna untuk diubah dan hanya-baca. Tetapi Anda dapat fokus padanya (gerakkan kursor ke bidang dan klik kiri), serta pilih dan salin (sebagian atau seluruhnya) teks:

Beberapa atribut lagi yang menerapkan fungsionalitas tambahan saat mengisi kolom:

8. Otomatis lengkap- menentukan apakah browser harus memberikan petunjuk saat pengguna mengisi formulir berdasarkan data yang dimasukkan sebelumnya dan memungkinkan untuk memasukkan teks yang sesuai secara otomatis.

Memiliki segalanya dua parameter: pada(termasuk) dan mati(dimatikan). Berikut beberapa contoh kode:

Masukkan teks:

Atribut dengan nilai "on" ini hanya berfungsi saat bidang formulir pelengkapan otomatis diaktifkan di browser web pengguna.

9. Membungkus- menetapkan aturan untuk pembungkusan baris di area teks untuk browser menggunakan tiga nilai:

Lembut- sekumpulan karakter yang tidak sesuai dengan lebar bidang secara otomatis dibungkus ke baris baru. Dalam hal ini, pawang teks akan ditransfer sebagai satu baris... Jika pengguna melakukan transfer teks di tempat yang diinginkan menggunakan tombol "Enter", maka transfer tersebut disimpan saat mengirim formulir web.

Masukkan teks:

Masukkan teks:

Keras- tanda hubung dibuat secara otomatis jika teks tidak sesuai dengan lebar bidang, dan, saat mengirim ke prosesor, tempat tanda hubung tersebut akan disimpan. Parameter ini hanya digunakan di dalam hubungannya dengan atribut cols:

Masukkan teks:

Masukkan teks:

Mati- nonaktifkan jeda baris. Jika Anda mencetak fragmen teks tanpa transfer mekanis menggunakan tombol "Enter", maka semua teks akan ditempatkan pada satu baris, dan bilah gulir horizontal akan muncul:

Masukkan teks:

Masukkan teks:

10. Fokus otomatis(tidak memiliki parameter) - memulai pemfokusan pada bidang teks saat halaman dengan formulir dimuat.

11. Dengan disabilitas- tidak seperti atribut readonly (yang juga melarang pengeditan konten bidang, tetapi memungkinkan untuk fokus padanya), sepenuhnya memblokir akses ke area teks, yang biasanya dicat abu-abu:

Salam untuk semua pembaca blog saya. Hari ini saya akan memberi tahu Anda cara membuat daftar drop-down di html, tag dan atribut apa yang perlu Anda gunakan, dan juga untuk tujuan apa Anda mungkin membutuhkannya.

Pilih tag dan buat daftar tarik-turun

Jadi, daftar dropdown di html dibuat menggunakan tag pilih berpasangan, di mana tag opsi berpasangan ditempatkan. Di dalamnya semua opsi dicatat yang akan ditawarkan ketika Anda mengklik daftar. Contoh:

Pilih hewan

Dalam hal ini, apa yang ditampilkan di antara bagian pembukaan dan penutupan opsi, Anda akan melihat di layar, dan nilai yang terkandung dalam atribut nilai akan dikirim ke server atau diproses menggunakan skrip.

Daftar dalam html bisa berupa pilihan biasa atau ganda. Untuk memungkinkan memilih beberapa item, Anda perlu menambahkan beberapa atribut kosong untuk dipilih. Untuk memilih beberapa nilai, tahan ctrl dan tekan tombol kiri mouse.

Atribut lain yang berguna adalah ukuran. Ini memungkinkan Anda untuk memilih berapa banyak baris yang akan ditampilkan di dropdown.

Atribut lain dinonaktifkan. Itu membuat daftar tidak dapat diakses untuk mengklik dan melihat item, tetapi pada saat yang sama terlihat di halaman.

Wajib - atribut html5. Jika ditentukan, formulir tidak akan dikirimkan tanpa memilih nilai dari daftar turun bawah. Secara umum, itu menjadi suatu keharusan untuk seleksi. Sedangkan atribut tidak bekerja di semua browser.

Atribut tag opsi

Sebenarnya, pilih hanya berfungsi sebagai wadah untuk item daftar, mereka sendiri disetel menggunakan tag opsi. Ini memiliki parameter nilai, seperti yang sudah kami temukan, tetapi selain itu ada yang lain. Misalnya:
Dinonaktifkan - membuat item daftar tidak tersedia untuk dipilih. Ini akan ditampilkan, tetapi Anda tidak dapat mengkliknya.

Dipilih - item akan dipilih secara default. Dalam daftar biasa, atribut tanpa nilai ini dapat diatur ke hanya satu item, dalam daftar jamak - ke beberapa.

Klarifikasi penting untuk pengoperasian yang benar

Jika hasil seleksi perlu dikirim ke server atau diproses melalui script, maka tempatkan pilih pada form agar tidak terjadi kesalahan. Faktanya adalah bahwa daftar drop-down awalnya dibuat persis sebagai salah satu elemen formulir.

Untuk apa pilih?

Biasanya dapat berguna bagi Anda jika Anda mendaftar di situs Anda, atau ingin melakukan survei. Elemen ini memiliki kelemahan - ia tidak mengubah penampilannya dengan sangat baik melalui css.

Secara default, ketika Anda mengklik daftar, bingkai biru muncul, warna yang sama digunakan untuk menyorot item-item dalam daftar yang kursornya diarahkan. Untuk mencegah bingkai muncul saat ditekan, atau disorot dalam warna berbeda, Anda dapat menulis pemilih seperti ini:

Pilih: fokus (
garis besar: 1px oranye solid;
}

Bingkai sekarang akan menjadi oranye.

Opsi juga dapat ditata, tetapi saat Anda mengarahkan kursor ke item, latar belakangnya berubah menjadi biru dan untuk beberapa alasan tidak berubah melalui gaya.

Pilihan (
warna coklat;
latar belakang: air;
}

Omong-omong, adakah di antara Anda yang tahu cara mengubah warna latar belakang saat mengarahkan kursor ke item melalui css?

Sebenarnya, itu semua untuk tag pilih dan penggunaannya. Tidak ada fitur tambahan dalam html untuk itu. Semua operasi lain dengannya dapat dilakukan menggunakan javascript dan php. Misalnya, jika Anda perlu membuat daftar untuk memilih tahun lahir dan mungkin ada 80-100 pilihan yang berbeda, maukah Anda menuliskannya dengan tangan?

Inilah yang Anda butuhkan untuk menggunakan pemrograman, yaitu sebuah loop. Baiklah, ini sudah menjadi topik untuk percakapan lain, tetapi untuk hari ini hanya ini informasi yang ingin saya sampaikan kepada Anda. Anda dapat membiasakan diri dengan tag dasar lainnya di html.

Tag HTML opsi digunakan untuk membuat daftar tarik-turun yang memungkinkan pengguna memilih satu opsi dari kumpulan nilai yang telah ditentukan sebelumnya.

Teks yang terlihat oleh pengguna dapat berbeda dari teks yang ditentukan dalam atribut nilai. Berikut cara membuat daftar dropdown:

  • Daftar dropdown dibuat menggunakan tag mendefinisikan opsi untuk seleksi menggunakan tag
  • di tag

Dimungkinkan juga untuk menentukan kelas CSS alih-alih menggunakan ID untuk menentukan gaya tarik-turun.

Di bagian selanjutnya, saya akan menunjukkan contoh penggunaan dropdown HTML di JavaScript / JQuery. Contoh-contohnya juga akan menunjukkan cara menata gaya

Menggunakan atribut nilai

Seperti yang disebutkan sebelumnya, nilai atribut value bisa berbeda dari teks yang ditampilkan di halaman. Misalnya, Anda dapat menampilkan nama negara atau warna untuk pengguna, dan menggunakan kode pendek di atribut nilai.

Dalam contoh berikut, kami akan membuat daftar dropdown dengan atribut nilai:

Lihat demo dan kode online

Untuk tag

Contoh Mengakses Opsi yang Dipilih dalam JavaScript

Sekarang mari kita buat contoh mengakses nilai opsi yang dipilih dan melakukan beberapa tindakan. Kami membuat daftar yang sama seperti pada contoh di atas dengan opsi pemilih warna. Setelah dipilih, klik tombol untuk menerapkan warna ini ke dokumen Anda:

Lihat demo dan kode online

Nilai opsi HTML menggunakan kode berikut:

Baris kode berikut digunakan dalam JavaScript untuk mengakses nilai atribut nilai dari suatu varian maknanya berbeda dengan teks. Setelah Anda memilih warna, jQuery menampilkan teks yang terlihat di peringatan. kode tag

Ini adalah bagaimana nilai ini diakses di HTML pilih opsi yang dipilih JavaScript:

var selectedcolor = $("# jquerypilih opsi: dipilih").text();

Dimungkinkan juga untuk mengakses nilai menggunakan metode JQuery $ .val ():

var selectedcolor = $("# jqueryselect").val();

Ganti baris ini pada contoh di atas dan kode akan menampilkan kode pendek / nilai warna dalam atribut nilai daripada teks yang terlihat.

Contoh mendapatkan nilai dalam skrip PHP

Dalam contoh mendapatkan nilai opsi yang dipilih dari daftar drop-down, formulir dibuat menggunakan tag

Dan berikut ini cara script PHP digunakan untuk mendapatkan nilai dari opsi pilih HTML:

".$_POST["selphp"].""; } ?>

Jika formulir menentukan metode GET maka gunakan Array PHP $ _GET [""].

Mendefinisikan gaya tarik-turun dengan CSS

Sekarang mari kita lihat bagaimana mendefinisikan gaya dari daftar dropdown

Dalam contoh ini kami menandai

Di browser tampilannya seperti ini:

Mengelompokkan item menu

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

Dalam contoh ini, kami telah memilih 2 grup dengan tag ... Atribut label elemen menetapkan nama grup yang dipilih dalam huruf tebal:

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

</span> Contoh penggunaan atribut yang dinonaktifkan dari tag HTML <optgroup><span>

Hasil dari contoh kita:

Daftar bisu dan multi-pilih

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

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

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

Di browser tampilannya seperti ini:

Area teks

Hasil dari contoh kita:

Menonaktifkan area teks

Mirip dengan elemen yang dibahas sebelumnya, tag


type = "kirim" name = "kirimInfo" value = "(! LANG: kirim" > !}

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