Pada saat membuat form dalam pemrograman html untuk membuat drop down list menggunakan tag

Atribut formulir:

• Atribut action menentukan file server dengan skrip yang bertanggung jawab untuk pemrosesan utama data yang dikirim dari formulir. Biasanya, kode untuk file ini ditulis dalam bahasa pemrograman sisi server, seperti: php atau perl.
• Atribut enctype menunjukkan jenis informasi yang dikirim ke server, jika hanya data teks - teks/polos , jika file dikirim dengan formulir, maka data multipart/formulir harus ditentukan.
• Atribut metode menentukan dan mendefinisikan bentuk transfer data. Kami tidak akan membahas ini secara rinci, tetapi harus dikatakan bahwa untuk transfer yang lebih andal, metode pos harus ditentukan.

elemen bentuk html

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" > !}

Hasil:

• Nilai atribut tipe - teks - menunjukkan bahwa ini adalah bidang teks
• size - ukuran bidang teks dalam karakter
• maxlength - jumlah karakter maksimum yang sesuai dengan bidang
• nilai - teks awal di bidang teks
• name - nama elemen, yang diperlukan untuk pemrosesan data di file handler

Hasil:


Alih-alih teks, topeng ditampilkan di bidang - tanda bintang atau lingkaran

<jenis masukan = "kirim" nilai = "Kirim data">

Hasil:

Tombol kirim mengumpulkan semua data formulir yang dimasukkan oleh pengguna dan mengirimkannya ke alamat yang ditentukan dalam atribut tindakan formulir.

<input type = "reset" value = "(!LANG:Hapus formulir" > !}

Hasil:




Tombol mengembalikan status semua kontrol ke aslinya (mengosongkan formulir)

<tipe input = "kotak centang" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <tipe input = "kotak centang" name = "js" value = "(!LANG:yes" checked = "checked" > !} javascript<br > <tipe input = "kotak centang" name = "php" value = "(!LANG:yes" > !} PHP<br > <tipe input = "kotak centang" name = "html" value = "(!LANG:yes" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML




Hasil:

A.S.P.
javascript
PHP
HTML

Dalam html, kotak centang digunakan untuk mengatur beberapa pilihan, mis. bila perlu dan memungkinkan untuk memilih beberapa jawaban

<tipe input = "radio" name = "buku" value = "(!LANG:asp" > !} A.S.P.<br > <tipe input = "radio" name = "buku" value = "(!LANG:js" > !} javascript<br > <input type = "radio" name = "book" value = "(!LANG:php" > !} PHP<br > <input type = "radio" name = "book" value = "(!LANG:html" checked = "checked" > !} HTML<br >

A.S.P.
javascript
PHP
HTML




Hasil:

A.S.P.
javascript
PHP
HTML

html tombol radio berfungsi untuk satu pilihan dari beberapa opsi

Atribut yang dicentang segera menyetel elemen ke dicentang

Penting: Untuk elemen radio itu perlu bahwa nilai atribut nama semua elemen dalam kelompok memiliki hal yang sama: dalam hal ini, elemen akan bekerja saling berhubungan, ketika satu elemen dihidupkan, yang lain akan dimatikan

HTML daftar tarik-turun

Pertimbangkan contoh menambahkan daftar dropdown:

Hasil:

• Daftar dropdown terdiri dari tag utama - pilih - yang memiliki pasangan penutup, dan setiap item daftar adalah tag opsi, di dalamnya teks item ditampilkan
• atribut ukuran dengan nilai "satu" menunjukkan bahwa daftar dalam formulir yang diciutkan menampilkan satu item, sisanya terbuka saat Anda mengklik panah menu
• Atribut item yang dipilih (opsi) menunjukkan bahwa item tertentu ini awalnya akan terlihat, dan item lainnya "diciutkan"

Untuk daftar besar dan kompleks, ada opsi tambahkan subtitle- tag optgroup dengan atribut label (prasasti):

Hasil:

• Lebar elemen tergantung pada atribut cols, yang menentukan berapa banyak karakter yang cocok secara horizontal.
• Atribut rows menentukan jumlah baris dalam suatu elemen.

elemen lainnya

Elemen dan atribut tambahan

• Untuk kontrol radio Dan kotak centang akan lebih mudah untuk menggunakan elemen tambahan yang, pertama, membuat jangkar teks ke elemen radio atau kotak centang itu sendiri, dan kedua, menambahkan goresan saat diklik:

<input type="kotak centang" id="book1"> <label untuk="buku1"> A.S.P.</label>

A.S.P.

Dalam contoh, label (label tag) dibuat untuk elemen kotak centang. Pengikatan dilakukan melalui atribut id, yang nilainya ditentukan dalam atribut for label.

Hasil:


• Atribut yang dinonaktifkan memungkinkan Anda untuk menonaktifkan elemen, membuatnya tidak dapat diedit oleh pengguna:

<input type = "text" name = "login" size = "20" value = "(!LANG:Login" maxlength = "25" disabled = "disabled" >!}
<tipe input = "kotak centang" name = "asp" value = "(!LANG:yes" > !} A.S.P.<br > <tipe input = "kotak centang" name = "js" value = "(!LANG:yes" checked = "checked" disabled = "disabled" > !} javascript<br >


A.S.P.
javascript

Anda dapat membuat daftar dropdown dalam HTML menggunakan tag Pilih. Selain daftar dropdown (atau "dropdown"), tag Pilih memungkinkan Anda membuat item daftar dengan banyak pilihan. Sintaks untuk menggunakan tag Pilih HTMLnya terlihat seperti ini:

Di sini dengan tag pilihan elemen daftar diberikan.

Hasil aplikasi:

Elektronik Syroezhkin Chizhikov Kukushkina

PILIH atribut tag

Pertimbangkan atribut tag Pilih:

• nama
• ukuran- jumlah baris yang ditampilkan dalam daftar (nomor);
• banyak- termasuk fungsi beberapa pilihan elemen dari daftar drop-down;
• dengan disabilitas- memblokir akses ke elemen;
• membentuk- memungkinkan Anda untuk menautkan daftar drop-down ke formulir (mungkin diperlukan jika daftar itu sendiri berada di luar formulir yang harus dilampirkan). Id formulir dilewatkan sebagai argumen.

Mungkin ini semua adalah atribut utama dari tag Pilih yang paling umum digunakan. Sekarang mari kita lihat bagaimana membuat daftar dropdown dalam HTML menggunakan atribut yang ditentukan:

Daftar tarik-turun dengan HTML - Nubex

Atribut tag OPTION

Menandai pilihan, seperti yang telah disebutkan, memungkinkan Anda untuk menentukan anak-anak dari daftar dropdown Pilih, yang pada gilirannya bertindak sebagai wadah. Menandai pilihan memiliki atribut tersendiri:

• dengan disabilitas- menetapkan larangan pemilihan elemen daftar ini;
• label- memungkinkan Anda untuk menetapkan label untuk elemen daftar saat ini (alih-alih teks yang ditentukan dalam tag, nilai label ditampilkan, yang memungkinkan Anda untuk menampilkan nilai yang dipersingkat); Perhatian: atribut tidak didukung di browser Firefox
• terpilih- item daftar saat ini akan dipilih secara default;
• nilai- nilai yang akan diteruskan ke server;

Mari kita lihat kasus penggunaan lanjutan untuk tag pilihan:

Hasil dari contoh ini akan terlihat seperti ini:

Tuan Elektronik Syroezhkin Chizhikov Kukushkina

Pembuat situs web Nubex memiliki kemampuan untuk membuat formulir khusus menggunakan modul pembuat formulir. Pekerjaan daftar drop-down di "Nubex" dijelaskan dalam artikel:

Selama dua tahun terakhir, pengembangan aplikasi web (situs) telah bergerak jauh ke depan dan apa yang kami gunakan untuk membuat situs di masa lalu sudah ketinggalan zaman atau metode yang lebih baru telah muncul.

Sebelumnya, untuk membuat daftar dropdown di html ( dalam bahasa Inggris. — tarik-turun), kita baru saja menggunakan

Khusus untuk artikel ini, saya menemukan 16 contoh berbeda yang mungkin berguna selama pengembangan situs. Jadi mari kita mulai.

1. Daftar kustom

Template html yang memungkinkan Anda untuk menyesuaikan warna Anda sendiri pada daftar dropdown.

2. Dibuat dengan CSS3/JavaScript

Ditulis dalam CSS3 dan JavaScript. Daftar tarik-turun biasa.

3. Gaya: stasiun kereta bawah tanah

Daftar drop-down transparan dengan gaya stasiun metro.

4. Jatuh. Ditulis dalam SCSS & jQuery

5. Untuk daftar panjang

Solusi hebat untuk menu drop-down yang panjang.

Menu tarik-turun yang ditulis dalam CSS murni tanpa menggunakan skrip apa pun.

Bagus untuk menu samping di situs untuk menampilkan kategori di situs secara visual.

8. Menu pengaturan pengguna yang bergaya

9. Dropdown CSS3

Dibuat dalam gaya UI, cocok untuk gaya UI situs.

12. Pilihan bendera

Dropdown dalam gaya pemilihan negara.

13. HTML biasa, tarik-turun CSS

Saya harap Anda menikmati pilihan saya. Tinggalkan komentar, bagikan pendapat Anda dan kirimkan karya Anda sendiri!

Cara membuat dropdown list di html (pilihan TOP 16) dari bologer

Seringkali di situs Web Anda dapat menemukan halaman dengan formulir HTML yang ditempatkan di atasnya. Formulir web adalah cara mudah untuk mendapatkan informasi dari pengunjung situs web Anda. Contohnya adalah -, - yang memberikan umpan balik kepada pengunjung dan pengembang situs. Formulir juga nyaman bagi pengembang situs saat mengembangkan CMS, yang memungkinkan Anda untuk mempertahankan properti utama situs - relevansi. Artikel ini berfokus pada dasar-dasar pembuatan formulir HTML, pemrosesannya, dan cara meneruskan data dari formulir di layar ke skrip PHP.

1) Membuat bentuk sederhana

tag Dan mengatur awal dan akhir formulir. Tag awal formulir mengandung dua atribut: tindakan Dan metode. Atribut action berisi URL skrip yang harus dipanggil untuk memproses skrip. Atribut metode memberi tahu browser jenis permintaan HTTP apa yang digunakan untuk mengirimkan formulir; nilai yang mungkin POS Dan DAPATKAN.

Komentar

Perbedaan utama antara metode POST dan GET adalah cara informasi ditransmisikan. Dalam metode GET, parameter dilewatkan melalui bilah alamat, mis. sebenarnya, di header HTTP permintaan, sedangkan dalam metode POST, parameter dilewatkan melalui badan permintaan HTTP dan tidak direfleksikan dengan cara apa pun dalam bentuk bilah alamat.

$teks = nl2br($_POST["teksku"]);
?>

Sebuah tugas: Katakanlah kita ingin membuat daftar dropdown dengan tahun dari 2000 hingga 2050.
Larutan: Anda perlu membuat formulir HTML dengan elemen SELECT dan skrip PHP untuk memproses formulir.

Diskusi:

Mari kita mulai dengan membuat dua file: form.html Dan action.php. dalam file form.html akan berisi formulir html dengan daftar drop-down. Selain itu, nilai dalam daftar dapat ditentukan dengan dua cara:

I. Entri data manual:

II. Memasukkan data melalui loop:

Seperti yang Anda lihat, contoh kedua dengan loop lebih ringkas. Saya pikir tidak ada gunanya memberikan skrip pengendali formulir, karena diproses seperti bidang teks, mis. nilai daftar dapat diambil dari array superglobal $_POST.

Keterangan:

Mari kita buat form HTML untuk mengirim file ke server.

Formulir html ini memiliki elemen jelajahi, yang membuka kotak dialog untuk memilih file yang akan diunggah ke server. Dengan menekan tombol "Transfer Berkas", file diteruskan ke skrip handler.

Maka Anda perlu menulis penangan skrip action.php. Sebelum menulis handler, Anda perlu memutuskan di direktori mana kami akan menyalin file:

if(isset($_FILES [ "file saya" ])) // Jika filenya ada
{
$catalog = "../gambar/" ; // Direktori kami
jika (is_dir ($catalog )) // Jika ada direktori seperti itu
{
$file saya = $_FILES [ "file saya" ][ "nama_tmp" ]; // file sementara
$nama_file saya = $_FILES [ "file saya" ][ "nama" ]; // Nama file
if(! copy ($myfile , $catalog )) echo "Kesalahan menyalin file". $nama_filesaya // Jika penyalinan file gagal
}
lain mkdir("../gambar/"); // Jika tidak ada direktori seperti itu, kami akan membuatnya
}
?>

Komentar

Jika Anda memercayai pengguna untuk mengunggah file apa pun ke server Anda, Anda harus sangat berhati-hati. Penyerang dapat menyuntikkan kode "buruk" ke dalam gambar atau file dan mengirimkannya ke server. Dalam kasus seperti itu, Anda perlu mengontrol unduhan file dengan ketat.

Contoh ini menunjukkan cara membuat direktori dan menyalin file ke direktori tersebut di server.

Saya juga ingin menunjukkan contoh dengan elemen kotak centang. Elemen ini sedikit berbeda dari elemen lain jika bukan salah satu elemen kotak centang'a tidak dipilih, maka variabel superglobal $_POST akan mengembalikan nilai kosong:

if (!empty($_POST [ "warnaku" ])) echo $_POST [ "warnaku" ]; // Jika setidaknya 1 item dipilih
gema "Pilih nilai";
?>

Pembaruan terakhir: 04/08/2016

Elemen pilih membuat daftar. Tergantung pada pengaturannya, ini bisa berupa daftar drop-down untuk memilih satu item, atau daftar drop-down di mana Anda dapat memilih beberapa item sekaligus.

Mari kita buat daftar dropdown:

pilih elemen dalam HTML5

Di dalam elemen pilih ditempatkan elemen opsi - elemen daftar. Setiap elemen opsi berisi atribut nilai yang menyimpan nilai elemen. Namun, nilai elemen opsi tidak harus cocok dengan teks yang ditampilkannya. Sebagai contoh:

Dengan atribut yang dipilih, kita dapat mengatur elemen terpilih default - tidak harus menjadi elemen pertama dalam daftar:

Menggunakan atribut lain yang dinonaktifkan, Anda dapat menonaktifkan pemilihan elemen tertentu. Biasanya, elemen dengan atribut ini digunakan untuk membuat heading:

Untuk membuat daftar pilihan ganda, tambahkan beberapa atribut ke elemen pilih:

pilih elemen dalam HTML5

Dengan menahan tombol Ctrl, kita dapat memilih beberapa elemen dalam daftar seperti itu:

Pilih juga memungkinkan Anda mengelompokkan elemen menggunakan tag :

pilih elemen dalam HTML5

Penggunaan grup item berlaku untuk daftar drop-down dan daftar pilihan ganda.

Apa HTML yang benar untuk membuat drop down list?

Bagaimana cara membuat form pada HTML?

Apa yang dimaksud dengan tag select?

Apa itu tag form HTML?