Membuat dan bekerja dengan formulir dalam html. Membuat formulir dalam HTML Select, Option, Textarea, Label, Fieldset, Legend - daftar drop-down, area teks, dan elemen formulir web lainnya

Tanda-tanda kehamilan setelah implantasi embrio

Tag opsi HTML digunakan untuk membuat daftar dropdown yang memungkinkan pengguna memilih satu opsi dari serangkaian nilai yang telah ditentukan sebelumnya.

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

  • Daftar dropdown dibuat menggunakan tag opsi untuk pemilihan ditentukan menggunakan tag
  • Di dalam tag

Dimungkinkan juga untuk menentukan kelas CSS daripada menggunakan ID untuk menata gaya daftar dropdown.

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

Menggunakan atribut nilai

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

Dalam contoh berikut, kita akan membuat daftar dropdown dengan atribut value:

Lihat demo dan kode online

Untuk tanda

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 pilihan warna. Setelah dipilih, klik tombol untuk menerapkan warna tersebut ke dokumen:

Lihat demo dan kode online

Untuk nilai opsi HTML, kode berikut digunakan:

Baris kode berikut digunakan dalam JavaScript untuk mengakses nilai atribut nilai opsi maknanya berbeda dengan teks. Setelah Anda memilih warna, jQuery menampilkan teks yang terlihat di peringatan. Kode tanda

Berikut cara mengakses nilai ini Opsi pilih HTML memilih JavaScript:

var warna yang dipilih = $("#jquerypilih opsi:dipilih").teks();

Anda juga dapat mengakses nilai menggunakan metode JQuery $.val():

var warna yang dipilih = $("#jqueryselect").val();

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

Contoh mendapatkan nilai dalam skrip PHP

Dalam contoh mendapatkan nilai opsi yang dipilih dari daftar dropdown, formulir dibuat menggunakan tag

Dan berikut cara penggunaan script PHP untuk mendapatkan nilai opsi pilih HTML:

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

Jika formulir menentukan metode GET maka gunakan susunan PHP $_GET[“”].

Menata Daftar Dropdown dengan CSS

Sekarang mari kita lihat cara mendefinisikan gaya daftar dropdown - menentukan elemen formulir seperti tombol, sakelar, bidang teks untuk entri data.

  • type="text" - mendefinisikan kolom teks untuk entri data.
  • type="password" - mendefinisikan bidang untuk memasukkan kata sandi, dengan teks ditampilkan dalam bentuk tanda bintang atau lingkaran.
  • type="checkbox" - mendefinisikan tombol radio.
  • type="hidden" - mendefinisikan elemen formulir tersembunyi - digunakan untuk mentransfer informasi tambahan ke server.
  • size="25" - panjang bidang teks dalam karakter.
  • maxlength="30" - jumlah maksimum karakter yang dimasukkan.
  • value="" - mendefinisikan nilai yang akan dikirim untuk diproses jika berkaitan dengan tombol radio atau sakelar. Nilai atribut ini sebagai bagian dari kolom teks atau tombol akan ditampilkan seperti Vasya atau Login pada contoh di atas.

    • Contoh formulir HTML | Komentar di situs

    Contoh formulir HTML




    Nama



    Surat

    Tag, atribut, dan nilai

    • action="http://site/comments.php" - menentukan url tujuan pengiriman data dari formulir.
    • id="" - mendefinisikan nama dan pengidentifikasi elemen formulir.
    • name="" - mendefinisikan nama elemen formulir.
    • - tentukan bidang teks sebagai bagian dari formulir.
    • cols="" - menentukan jumlah kolom kolom teks formulir.
    • baris = "" - menentukan jumlah baris bidang teks formulir.

    Jika antara teks tempat, itu akan ditampilkan di dalam bidang sebagai contoh yang dapat dengan mudah dihapus.

    Contoh formulir HTML | Daftar tarik-turun

    formulir HTML

    Tag, atribut, dan nilai

    • - tentukan daftar dengan posisi yang akan dipilih.
    • size="" - menentukan jumlah posisi daftar yang terlihat. Jika nilainya 1 , kita berhadapan dengan daftar dropdown.
    • - menentukan posisi (item) daftar.
    • value="" - berisi nilai yang akan dikirim oleh formulir ke url yang ditentukan untuk diproses.
    • dipilih="dipilih" - menyorot item daftar sebagai contoh.

    Contoh formulir HTML | Daftar dengan bilah gulir

    Dengan meningkatkan nilai atribut size="", kita mendapatkan daftar dengan bilah gulir:

    Posisi pertama Posisi kedua Posisi ketiga Posisi keempat

    formulir HTML

    Untuk opsi ini, gunakan tanda multiple='multiple', yang memungkinkan untuk memilih beberapa posisi. Ketidakhadirannya memungkinkan Anda memilih hanya satu item.

  • type="submit" - mendefinisikan tombol.
  • type="reset" - mendefinisikan tombol reset.
  • value="" - mendefinisikan label pada tombol.

    • Lihat tambahan:

    Berkat tagnya harus ditempatkan dalam formulir (tag

    ). Di bawah ini contohnya:




    Apa sajakah atribut dari tag pilih?

    Menandai







    Atribut kedua diperlukan , dengan bantuannya Anda dapat "memberi tahu" browser bahwa daftar tersebut harus dipilih sebelum mengirimkan formulir, jika tidak, browser akan melarang pengiriman formulir dan akan menampilkan pesan yang sesuai kepada Anda. Tampilan pesan ini sepenuhnya bergantung pada browser dan tidak dapat diubah oleh pengguna. Di bawah ini adalah contoh penggunaan atribut yang diperlukan:




    Atribut ketiga adalah size , yang dapat digunakan untuk menentukan jumlah item daftar yang akan ditampilkan. Atribut size hanya boleh berisi bilangan bulat. Atribut size mengubah daftar, misalnya jika sama dengan 1, maka tag








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

    Tag pilih dan buat daftar dropdown

    Jadi, daftar drop-down dalam html dibuat menggunakan tag pilihan berpasangan, di mana tag opsi berpasangan ditempatkan. Di dalamnya semua opsi yang akan ditawarkan ketika Anda mengklik daftar dicatat. Contoh:

    Pilih binatang

    Dalam hal ini, Anda akan melihat apa yang ditampilkan antara bagian pembuka dan penutup opsi di layar, dan nilai yang terdapat dalam atribut value akan dikirim ke server atau diproses menggunakan skrip.

    Daftar dalam html bisa biasa atau dengan pilihan 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 size . Ini memungkinkan Anda memilih berapa banyak baris yang akan ditampilkan di daftar dropdown.

    Atribut lainnya dinonaktifkan. Itu membuat daftar tidak dapat diklik dan tidak dapat diklik, namun masih terlihat di halaman.

    Diperlukan – atribut html5. Jika disetel, formulir tidak akan dikirimkan tanpa memilih nilai dari daftar dropdown. Secara umum, ini menjadi pilihan yang harus dimiliki. Meskipun atribut tersebut tidak berfungsi di semua browser.

    Atribut Tag Opsi

    Sebenarnya, pilih hanya berfungsi sebagai wadah untuk item daftar; item itu sendiri ditentukan menggunakan tag opsi. Ini memiliki parameter nilai, seperti yang telah kita ketahui, tetapi selain itu ada parameter lain. Misalnya:
    Disabled – membuat item daftar tidak tersedia untuk dipilih. Ini akan ditampilkan, tetapi Anda tidak dapat mengkliknya.

    Dipilih – elemen akan dipilih secara default. Dalam daftar biasa, atribut tanpa nilai ini hanya dapat ditetapkan ke satu item; dalam daftar berganda, atribut ini dapat ditetapkan ke beberapa item.

    Klarifikasi penting untuk pengoperasian yang benar

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

    Untuk apa pilih digunakan?

    Biasanya dapat berguna bagi Anda jika Anda mendaftar di website Anda atau ingin melakukan survei. Elemen ini memiliki kelemahan - tidak mengubah tampilan dengan baik melalui css.

    Secara default, saat Anda mengklik daftar, bingkai biru muncul; item daftar yang kursornya diarahkan akan disorot dengan warna yang sama. Untuk mencegah bingkai muncul saat diklik, atau disorot dengan warna berbeda, Anda dapat menulis pemilih berikut:

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

    Bingkai sekarang akan berwarna oranye.

    Opsi juga dapat diberi gaya, namun saat Anda mengarahkan kursor ke item, latar belakangnya berubah menjadi biru dan karena alasan tertentu hal ini tidak berubah melalui gaya.

    Pilihan(
    warna coklat;
    latar belakang: air;
    }

    Ngomong-ngomong, mungkin ada di antara Anda yang tahu cara mengubah warna latar belakang saat mengarahkan kursor ke suatu item melalui css?

    Itu saja untuk saat ini tentang tag pilih dan penggunaannya. Tidak ada fitur tambahan yang disediakan untuk itu di html. Semua operasi lain dengannya dapat dilakukan menggunakan javascript dan php. Misalnya, jika Anda perlu membuat daftar untuk memilih tahun lahir dan mungkin terdapat 80-100 pilihan berbeda, bukankah Anda akan menuliskannya secara manual?

    Inilah mengapa Anda perlu menggunakan pemrograman, yaitu loop. Baiklah, ini adalah topik untuk percakapan lain, tetapi untuk hari ini hanya ini informasi yang ingin saya sampaikan kepada Anda. Anda bisa berkenalan dengan tag utama lainnya di html.

    Keterangan

    tanda HTML mungkin berisi dua atau lebih tag

    Lebar dropdown akan ditentukan oleh teks terpanjang yang ditentukan dalam tag

    Atribut

    fokus otomatis: Menentukan bahwa elemen harus secara otomatis menerima fokus saat halaman web dimuat. Nilai yang mungkin untuk atribut boolean fokus otomatis: Contoh » form: Mendefinisikan bentuk yang dikaitkan dengan elemen. Nilai atribut adalah pengidentifikasi elemen
    . Atribut ini memungkinkan Anda menempatkan elemen Contoh "

    Catatan: Karena perbedaan cara memilih beberapa item dan pemberitahuan tambahan kepada pengguna bahwa beberapa pilihan tersedia, disarankan agar Anda menggunakan kotak centang daripada daftar drop-down.

    Nama: Mendefinisikan nama untuk daftar dropdown. Ini dapat digunakan untuk mengakses data formulir setelah dikirimkan, atau untuk mereferensikan elemen dalam JavaScript. size: Menentukan jumlah opsi yang terlihat di daftar dropdown. Jika nilai atribut ukuran lebih besar dari 1 tetapi kurang dari jumlah total pilihan dalam daftar, maka browser akan secara otomatis menambahkan bilah gulir untuk menunjukkan bahwa ada lebih banyak pilihan untuk dilihat.

    Publikasi tentang topik tersebut