Formulir HTML
Pada titik ini kami memiliki beberapa petunjuk tentang apa tag dan atribut HTML itu dan bagaimana cara kerjanya. Kami tidak takut melangkah lebih jauh.
Dalam pelajaran ini kita akan belajar bagaimana membangun formulir HTML, yang memungkinkan bagi pengguna untuk mengirimkan data ke server. Misalnya formulir kontak dengan bidang input tunggal dan multiline, dropdown, kotak centang, dan lainnya.
Formulir kontak HTML bergaya
Contoh di bawah ini menunjukkan bentuk HTML minimalis dan tidak terhalang dengan bidang input, area teks dan tombol kirim. Ketika pengguna mengisi kolom dan mengklik tombol Kirim, data akan dikirim ke file send.php melalui metode posting.
< Bentuk tindakan = "/send.php" metode = "post" > Nama: < masukan nama = "nama" jenis = "text" /> < br /> < textarea cols = "20" nama = "comments" baris = "5" > Pesan </ textarea > < br /> < masukan jenis = "submit" value = "Kirim" /> </form >
Melangkah lebih jauh kita dapat membangun bentuk yang lebih rumit yang berisi beberapa elemen baru: fieldset, menu dropdown (pilih dan opsi) dan label.
< form class = "inlineBlock" action = "/ html / tutorial /" method = "post" > < fieldset > < legenda > Detail pribadi: </ legenda > Nama: < input name = "name" type = "text" / > < br /> Umur: < masukan max = "100" min = "1" name = "age" step ="1" jenis = "angka" value = "18" /> < br /> Jenis Kelamin: < masukan diperiksa = "diperiksa" nama = "gender" jenis = "radio" value = "laki-laki" /> Pria < masukan nama = "gender" jenis = "radio" value = "perempuan" /> perempuan < br /> Email: < nama input = "Yourmail" jenis = "email" /> </ fieldset > HP: < masukan max = "300" min = "50" nama = "myrange" langkah = "5" jenis = "range" /> < br /> Mobil: < select name = "gender" > < option selected = "selected" value = "male"> Volkswagen </ opsi> < Option value = "skoda" > Skoda </ option > < option value = "volvo" > Volvo </ option > </ pilih > < br /> Warna: < masukan nama = "carcolor" jenis = "warna" / > < br /> < label > < masukan nama = "istilah" type = "checkbox" value = "tnc" /> Saya menerima persyaratan. </ Label > < br /> < masukan jenis = "submit" value = "Kirim" /> </ bentuk >
Bidang input
Komponen paling umum dari setiap bentuk HTML adalah kotak teks baris tunggal, tetapi bidang input jauh lebih fleksibel dari itu. Ini bisa berupa kotak centang, tombol radio, warna atau pemilih tanggal dan banyak lagi. Lihat contoh di bawah ini.
< Bentuk tindakan = "/action.php" metode = "post" > text: < masukan jenis = "text" nama = "NamaAnda" maxlength = "10" size = "12" diperlukan /> < br /> Nomor: < tipe input = "number" name = "no" min = "0" max = "100"step = "10" value = "30" > < Br /> centang: < masukan jenis = "checkbox" nama = "istilah" value = "tandc" > Saya accpept istilah < br /> radio: < masukan jenis = "radio" nama = "jenis kelamin" value = " laki-laki " diperiksa > Laki-laki < input type = " radio " name = " gender " value = "female" >Perempuan < br > email: < masukan jenis = "email" nama = "yourmail" > < br /> password: < masukan jenis = "password" nama = "sandi batasan" > < br /> warna: < masukan jenis = "warna " nama = "yourcolor" > < br /> tanggal: <input type = "date" name= "Ulang tahun" min = "1900/01/01" max = "2010/01/01" > < br /> Waktu: < masukan jenis = "waktu" nama = "MyTime" > < br /> tanggal dan waktu: < masukan jenis = "datetime-lokal" nama = "time" > < br /> minggu: < masukan jenis = "minggu" name = "yourweek" > <br /> bulan: < masukan jenis = "bulan" nama = "yourmonth" > < br /> kisaran: < masukan jenis = "range" nama = "myrange" min = "0" max = "100" > < br / > pencarian: < masukan jenis = "search" nama = "MySearch" > < br /> tel: < input ketik = "tel" nama = "myphone" > < br /> url: < masukan jenis = "url" nama = "situs" > < br /> < masukan jenis = "submit" value = "Submit" /> < masukan type = "reset" > </ form >
Textarea
Tambahkan bidang input multi-baris ke formulir. Itu dapat menampung jumlah karakter yang tidak terbatas.
< textarea rows = "3" cols = "40" placeholder = "Ketikkan di sini" > Nama: </ textarea >
Kustomisasi area teks dengan atribut di bawah ini:
| Atribut | Nilai | Deskripsi |
|---|---|---|
| fokus otomatis | fokus otomatis | Area teks secara otomatis mendapatkan fokus saat halaman dimuat |
| cols | jumlah | Lebar terlihat dari area teks |
| dirname | textareaname .dir | Arah teks dari textarea akan dikirimkan |
| cacat | cacat | Area teks yang dinonaktifkan tidak dapat digunakan dan kontennya tidak dapat dipilih |
| bentuk | form_id | Bentuk area teks milik |
| panjang maksimal | jumlah | Jumlah karakter maksimum yang diperbolehkan dalam area teks |
| nama | teks | Nama untuk area teks |
| placeholder | teks | Petunjuk singkat ditampilkan saat area teks kosong |
| dibaca saja | dibaca saja | Input tidak dapat diubah ketika disetel ke true |
| wajib | wajib | Area teks diperlukan / harus diisi |
| baris | jumlah | Jumlah garis yang terlihat di area teks |
| membungkus | keras / lunak | Bagaimana teks akan dibungkus ketika dikirimkan dalam formulir |
Dropdown
Tag <select> dapat digunakan untuk menambahkan menu dropdown ke formulir HTML kami yang dapat berisi beberapa opsi.
< form action = "/ html /" method = "post" > < pilih nama = "gender" > < opsi yang dipilih = "terpilih" nilai = "html" > HTML </ option > < opsi nilai = "css" > CSS </ option > < option value = "js" > JavaScript </ option > </ pilih >< Br /> < masukan jenis = "submit" value = "Submit" /> </ bentuk >
Mirip dengan textarea, Anda dapat menggunakan atribut berikut: fokus otomatis, dinonaktifkan, formulir, banyak, nama, wajib, ukuran .
0 komentar:
Posting Komentar