Jenis elemen baru

Salah satu hal yang aneh tentang formulir HTML adalah penggunaan satu elemen dengan nama yang tidak jelas untuk membuat berbagai kontrol, mulai dari kotak centang, bidang teks, hingga tombol. Tampilan spesifik kontrol bergantung pada atribut type elemen.

Jika browser menemui tipe yang tidak diketahui elemen, browser web memperlakukannya sebagai bidang teks normal. Artinya, tiga elemen berikut diperlakukan sama persis di semua browser:

HTML5 mengambil keuntungan dari perilaku ini. Yakni, beberapa tipe baru telah ditambahkan ke elemen, dan jika browser mana pun tidak mendukungnya, browser akan memperlakukannya sebagai kolom teks biasa. Misalnya untuk memasukkan alamat e-mail Anda dapat membuat bidang jenis email baru:

Jika Anda melihat halaman dengan kode ini di browser yang tidak mendukung jenis email untuk elemen tersebut (misalnya, Penjelajah Internet), maka kolom ini akan muncul sebagai kolom teks biasa. Namun browser yang mendukung formulir HTML5 dapat melakukan hal berikut dengan sedikit lebih cerdas:

Menawarkan layanan pengeditan. Misalnya, browser pintar mungkin menyediakan cara untuk memilih alamat email buku alamat dan tempelkan ke kolom alamat.

Mencegah kemungkinan kesalahan. Misalnya, browser mungkin tidak menerima huruf saat memasukkan kolom seperti angka, atau tidak menerima tanggal yang tidak valid, atau bahkan memaksa pengguna untuk memilih tanggal dari kalender mini, yang lebih mudah dan aman.

Lakukan pemeriksaan. Browser dapat melakukan pemeriksaan yang lebih kompleks setelah pengguna mengklik tombol untuk mengirimkan data.

Spesifikasi HTML5 tidak memberikan panduan apa pun kepada pengembang browser pada poin pertama. Browser bebas mengontrol tampilan dan pengeditan jenis yang berbeda data dengan cara apa pun yang berarti, dan browser yang berbeda dapat menambahkan berbagai fasilitas kecil.

Namun yang lebih penting adalah kemampuan untuk memeriksa dan menghilangkan kesalahan. Minimal, browser yang mendukung formulir HTML5 harus mencegah penyerahan formulir berisi data yang melanggar aturan tipe data. Oleh karena itu, jika browser tidak dapat mencegah kesalahan secara langsung saat input (sesuai poin kedua dalam daftar di atas), browser harus memeriksanya saat pengguna mencoba mengirimkan formulir (sesuai poin ketiga).

Sayangnya, tidak semuanya browser modern memenuhi persyaratan ini. Beberapa mengenali tipe data baru dan menyediakan beberapa kemampuan pengeditan, namun tidak validasi. Banyak browser memahami satu tipe data tetapi tidak memahami tipe data lainnya. Peramban seluler khususnya bermasalah dalam hal ini - peramban menyediakan beberapa kemudahan pengeditan, namun tidak ada kemampuan verifikasi.

Tabel di bawah menunjukkan tipe data baru dan tingkat dukungan penuh di seluruh browser utama. Dukungan penuh Artinya jika tipe datanya dilanggar maka formulir tidak akan dikirimkan.

Meskipun browser seluler Safari untuk iOS dan Android tidak mendukung validasi, penyediaan keyboard khusus oleh browser ini memberikan kemudahan yang signifikan, jadi ada baiknya menggunakan tipe data khusus dalam aplikasi untuk browser web tersebut.

Tipe data email digunakan untuk kolom yang dimaksudkan untuk memasukkan alamat email. Secara umum, alamat email terdiri dari serangkaian karakter (beberapa karakter tidak diperbolehkan). Alamat yang valid harus berisi simbol @ dan titik, dengan setidaknya satu karakter di antaranya, dan setidaknya dua karakter setelah titik:

Jenis email mendukung beberapa atribut, yang memungkinkan Anda memasukkan beberapa alamat dalam satu bidang. Namun beberapa alamat ini masih terlihat seperti satu baris teks, hanya dipisahkan dengan koma.

Jangan lupakan itu nilai kosong sedang diuji. Untuk mencegah bidang kosong alamat, Anda perlu memasukkan atribut yang diperlukan ke dalam elemennya.

Jenis url digunakan untuk kolom masukan URL. Pertanyaan tentang apa yang dimaksud dengan URL yang valid terus menjadi perdebatan hangat. Namun sebagian besar browser menggunakan algoritma verifikasi yang relatif lemah. Alamat harus berisi awalan (yang dapat berupa asli, ketik http://, dan yang fiktif, seperti bonk//) dan memungkinkan Anda memasukkan spasi dan sebagian besar lainnya karakter khusus, kecuali titik dua.

Beberapa browser juga menawarkan kemungkinan saran URL dalam daftar drop-down, yang biasanya diambil dari riwayat browser dari halaman yang baru-baru ini dikunjungi.

Jenis pencarian digunakan untuk kolom pencarian. Mereka biasanya dimaksudkan untuk masukan kata kunci, yang kemudian digunakan untuk melakukan beberapa jenis pencarian. Ini bisa berupa pencarian di seluruh Internet (seperti Google), pencarian satu halaman, atau prosedur pencarian khusus yang memeriksa katalog informasi. Apa pun yang terjadi, bidang pencarian terlihat dan berperilaku hampir persis seperti bidang teks biasa.

Di beberapa browser, seperti Safari, bidang pencarian terlihat sedikit berbeda dan memiliki sudut membulat. Selain itu, ketika pengguna mulai memasukkan data ke dalam kolom pencarian di peramban Safari atau Chrome, dengan sisi kanan bidang, ikon X kecil muncul, dengan mengkliknya Anda dapat mengosongkan bidang tersebut.

Terlepas dari perbedaan kecil ini, kolom pencarian tidak lebih dari kolom teks biasa. Perbedaan utamanya adalah semantik. Dengan kata lain, tipe data pencarian digunakan untuk membuat nama field jelas bagi browser dan program pembantu untuk pengguna dengan kecacatan. Mereka dapat mengarahkan pengunjung ke lokasi yang diinginkan pada halaman atau menyediakan layanan lain yang lebih cerdas – mungkin di masa depan.

Tipe data tel digunakan untuk menunjukkan kolom input nomor telepon, yang paling bisa disajikan format yang berbeda. Dalam beberapa kasus hanya angka yang digunakan, dalam kasus lain spasi, tanda hubung, tanda tambah dan tanda kurung. Kurangnya format yang seragam mungkin menjadi alasan mengapa standar HTML5 tidak mengharuskan browser untuk melakukan validasi nomor telepon. Pada saat yang sama, tidak jelas mengapa bidang seperti tel tidak ditolak setidaknya, surat.

Saat ini, satu-satunya keuntungan menggunakan bidang seperti tel adalah menyediakan spesialisasi papan ketik maya untuk memasukkan nomor telepon browser seluler, yang berisi angka tetapi bukan huruf.

HTML5 mendefinisikan dua tipe data numerik. Tipe bilangan adalah untuk bilangan biasa.

Jenis data ini memiliki potensi yang jelas. Bidang teks biasa menerima apa saja: angka, huruf, spasi, tanda baca, dll. Karena alasan ini, salah satu tugas validasi yang paling umum adalah memastikan bahwa suatu nilai adalah angka rentang tertentu. Namun saat Anda memasukkan data ke dalam kolom seperti angka, browser secara otomatis mengabaikan semua karakter kecuali angka. Berikut ini adalah contoh kode untuk membuat field jenis ini:

Usia *

Tentu saja, ada banyak angka yang tidak cocok untuk semua jenis data numerik. Misalnya, markup di atas memungkinkan usia seperti 43.000 atau -6 tahun, yang agak tidak sesuai dengan kenyataan. Masalah ini diselesaikan dengan menggunakan atribut min dan max. DI DALAM kode berikut Contoh pembatasan usia pada rentang yang wajar diberikan:

Biasanya, bidang angka hanya menerima bilangan bulat, dan pecahan seperti 30,5 tidak diperbolehkan. (Faktanya, beberapa browser bahkan tidak mengizinkan Anda memasukkan tempat desimal.) Namun perilaku ini juga dapat diubah menggunakan atribut step, yang menentukan langkah perubahan angka (naik atau turun). Misalnya, dengan menyetel nilai langkah ke 0,1, Anda dapat memasukkan nilai seperti 0,1, 0,2, 0,3, dll. Namun coba kirimkan formulir dengan nilai 0,15 dan Anda akan mendapatkan pesan kesalahan familiar yang muncul. Nilai langkah default adalah 1.

Atribut langkah juga mempengaruhi pengoperasian tombol bidang dengan penghitung:

Tipe numerik HTML5 lainnya adalah rentang. Seperti tipe angka, tipe ini dapat mewakili nilai bilangan bulat dan pecahan. Juga mendukung atribut min dan max untuk menetapkan rentang nilai. Berikut ini adalah contoh kode untuk membuat field jenis ini:

Usia *

Perbedaannya terletak pada cara bidang rentang menyajikan informasinya. Alih-alih penghitung, seperti untuk bidang angka, browser pintar menampilkan penggeser:

Untuk mengatur nilai jenis rentang, Anda cukup menyeret penggeser ke posisi yang diinginkan antara nilai minimum dan maksimum. Namun browser yang mendukung jenis kolom ini tidak menyediakannya informasi umpan balik tentang menetapkan nilai. Untuk mendapatkan informasi ini, Anda perlu menambahkan prosedur JavaScript ke markup Anda yang bereaksi terhadap perubahan posisi penggeser (mungkin dengan memproses acara onChange), lalu menampilkan formasi ini di sebelah lapangan.

HTML5 mendefinisikan beberapa tipe data terkait waktu. Browser yang mendukung tipe tanggal dapat menyediakan kalender drop-down yang nyaman dimana pengguna dapat memilih tanggal dan/atau waktu yang diinginkan. Hal ini tidak hanya menghilangkan ketidakpastian mengenai hal ini format yang benar tanggal, tetapi juga melarang pengaturan tanggal yang tidak ada secara tidak sengaja (atau sengaja). Browser pintar dapat melakukan lebih banyak hal, seperti mendukung integrasi dengan kalender pribadi.

Di bawah ini adalah contoh penggunaan tanggal:

Tanggal lahir *

Tabel di bawah mencantumkan enam format HTML5 baru untuk tanggal dan waktu, dengan penjelasan singkatnya:

Browser yang mendukung tipe data untuk tanggal dan waktu juga mendukung atribut min dan max untuknya, yang memungkinkan Anda menyetel tanggal minimum dan maksimum selama Anda menggunakan format tanggal yang benar. Hal ini ditunjukkan pada contoh di atas.

Tipe data warna digunakan untuk bidang warna. Tipe data warna adalah fitur sekunder yang menarik, meskipun jarang digunakan, yang memungkinkan pengunjung halaman web memilih warna dari palet drop-down, mirip dengan palet editor grafis:

Pilih warna favorit Anda Warna

Standar HTML5 mengenali beberapa atribut lagi yang digunakan untuk mengontrol browser saat mengisi formulir. Tidak semua atribut ini didukung oleh semua browser. Namun, mereka bagus untuk bereksperimen dengan:

Beberapa browser berupaya mengisi kesenjangan dalam pengetahuan ejaan pengguna dengan memeriksa ejaan teks yang dimasukkan. Masalah nyata dengan layanan ini adalah tidak semua teks terdiri dari kata-kata sebenarnya, dan garis bawah merah berlekuk-lekuk dapat membuat pengguna gelisah dengan sangat cepat. Untuk mencegah browser memeriksa ejaan teks dalam suatu bidang, atur atribut pemeriksa ejaan ke salah dan atribut periksa ke benar.

Secara default, browser yang berbeda bertindak berbeda dalam hal pemeriksaan ejaan, namun menyetel atribut pemeriksa ejaan akan menghasilkan perilaku yang konsisten.

Beberapa browser mencoba menghemat waktu pengguna dengan menyarankan, saat memasukkan informasi ke dalam suatu bidang, nilai yang sebelumnya dimasukkan ke dalam bidang ini. Perilaku ini tidak selalu diinginkan - seperti yang ditunjukkan dalam spesifikasi HTML5, beberapa informasi mungkin sensitif (misalnya kode untuk meluncurkan rudal nuklir;) atau hanya relevan untuk waktu yang singkat (misalnya. kata sandi satu kali pintu masuk ke sistem perbankan swalayan). Untuk bidang seperti itu, setel nilai atribut pelengkapan otomatis ke nonaktif untuk mencegah browser meminta pilihan yang memungkinkan penyelesaian teks yang dimasukkan ke dalam kolom. Dan untuk melengkapi otomatis bidang tertentu, aktifkan atribut pelengkapan otomatisnya.

Atribut ini digunakan untuk mengontrol kemampuan koreksi otomatis dan kapitalisasi pada beberapa browser seluler, yaitu Versi Safari untuk iPad dan iPhone

Pengembang web telah menggunakan atribut ganda dengan elemen untuk membuat daftar pilihan ganda sejak dahulu kala. Namun sekarang mereka dapat menggunakan atribut ini dengan tipe tertentu elemen, termasuk jenis file (untuk mengunggah file) dan email. Pada browser yang mendukung atribut ini, pengguna dapat memilih beberapa file untuk diunggah ke server sekaligus atau memasukkan beberapa alamat email ke dalam satu kolom.

Tag adalah salah satu elemen formulir serbaguna dan memungkinkan Anda membuat elemen antarmuka yang berbeda dan menyediakan interaksi pengguna. Terutama ditujukan untuk membuat bidang teks, berbagai tombol, tombol radio, dan kotak centang. Meskipun elemen tidak perlu ditempatkan di dalam wadah yang mendefinisikan formulir, jika input pengguna harus dikirim ke server tempat input tersebut diproses oleh program CGI, maka FORM diperlukan. Hal yang sama juga berlaku dalam hal pengolahan data menggunakan aplikasi klien, misalnya skrip dalam JavaScript.

Parameter utama tag yang menentukan tipe elemen adalah tipe. Ini memungkinkan Anda untuk mengatur elemen berikut formulir: bidang teks (teks), bidang kata sandi (password), tombol radio (radio), kotak centang (checkbox), bidang tersembunyi (tersembunyi), tombol (button), tombol untuk mengirimkan formulir (submit), tombol untuk menghapus formulir (reset ), kolom untuk mengirim file (file) dan tombol dengan gambar (image). Setiap elemen memiliki daftar parameternya sendiri yang menentukan tampilan dan karakteristiknya.

Menentukan cara menyelaraskan bidang gambar relatif terhadap teks atau elemen formulir lainnya.

• bottom - Menyelaraskan batas bawah gambar dengan teks di sekitarnya
• kiri - Menyejajarkan gambar ke tepi kiri jendela
• tengah - Menyelaraskan bagian tengah gambar dengan garis dasar garis saat ini.
• kanan - Menyelaraskan gambar ke tepi kanan jendela.
• top - Batas atas gambar disejajarkan dengan elemen tertinggi dari garis saat ini.

Nilai defaultnya adalah yang terbawah. Browser juga mendukung argumen absbottom, absmiddle, baseline, dan texttop, yang tidak termasuk dalam spesifikasi HTML 4.01.

Parameter alt menetapkan teks alternatif untuk bidang gambar. Teks ini memungkinkan Anda untuk mendapatkan informasi teks tentang gambar ketika pemuatan gambar dinonaktifkan di browser. Karena gambar dimuat setelah browser menerima informasi tentang gambar tersebut, teks pengganti gambar muncul lebih awal. Dan saat dimuat, teks akan digantikan oleh gambar. Browser juga menampilkan teks alternatif sebagai tooltip saat Anda mengarahkan mouse ke gambar.

Nilainya bisa apa saja yang sesuai rangkaian teks. Itu harus diapit oleh tanda kutip ganda atau tunggal.

Browser memperlakukan gambar yang ditambahkan melalui tag serupa dengan gambar yang dibuat menggunakan tag . Anda juga dapat menambahkan bingkai di sekeliling gambar, yang warnanya sesuai dengan warna teks.

Nilai yang valid adalah bilangan bulat positif dalam piksel. Nilai defaultnya adalah 0.

Parameter ini menentukan apakah elemen formulir seperti kotak centang atau tombol radio sudah dicentang sebelumnya. Dalam hal menggunakan tombol radio, hanya satu elemen grup yang dapat dicentang; untuk kotak centang, diperbolehkan untuk menandai setidaknya semua elemen.

Memblokir akses dan modifikasi bidang formulir. Dalam hal ini, ditampilkan berwarna abu-abu dan tidak dapat diaktifkan oleh pengguna. Selain itu, bidang tersebut tidak dapat memperoleh fokus dengan menekan tombol Tab, menggunakan mouse, atau lainnya. Namun, status bidang ini dapat diubah menggunakan skrip.

Menetapkan jumlah maksimum karakter yang dapat dimasukkan oleh pengguna dalam kolom teks. Ketika angka ini tercapai saat mengetik, input lebih lanjut menjadi tidak mungkin.

Mendefinisikan nama yang unik elemen bentuk. Biasanya nama ini digunakan saat mengirim data ke server atau untuk mengakses data lapangan yang dimasukkan melalui skrip.

Nama adalah sekumpulan karakter, termasuk angka dan huruf. JavaScript peka terhadap huruf besar-kecil, jadi saat merujuk ke elemen berdasarkan nama, gunakan formulir yang sama dengan parameter nama.

Ketika parameter readonly ditambahkan ke tag, kolom teks tidak dapat diubah oleh pengguna, termasuk memasukkan teks baru atau memodifikasi yang sudah ada. Selain itu, bidang tersebut tidak dapat memperoleh fokus dengan menekan tombol Tab, menggunakan mouse, atau lainnya. Namun, status dan isi kolom dapat diubah menggunakan skrip.

Lebar bidang teks, yang ditentukan oleh jumlah karakter dalam font monospace. Dengan kata lain, lebarnya ditentukan oleh jumlah huruf yang berdekatan dengan lebar horizontal yang sama. Jika ukuran font diubah menggunakan gaya, lebarnya juga berubah.

Nilai yang valid adalah bilangan bulat positif apa pun.

Alamat file grafik, yang akan ditampilkan pada halaman web di bidang gambar.

Nilainya diambil penuh atau jalur relatif ke file.

Parameter tipe yang diperlukan memberi tahu browser jenis elemen formulir apa.

• tombol - Tombol.
• kotak centang - Kotak centang. Memungkinkan Anda memilih lebih dari satu opsi dari yang diusulkan.
• file - Bidang untuk memasukkan nama file yang dikirim ke server.
• tersembunyi - Bidang tersembunyi. Itu tidak ditampilkan dengan cara apa pun di halaman web.
• image - Bidang dengan gambar. Ketika Anda mengklik gambar, data formulir dikirim ke server.
• kata sandi - Bidang teks biasa, tetapi berbeda karena semua karakter ditampilkan sebagai tanda bintang. Dirancang untuk mencegah siapa pun mengintip kata sandi yang dimasukkan.
• radio - Sakelar. Mereka digunakan ketika Anda perlu memilih satu opsi dari beberapa opsi yang ditawarkan.
• reset - Tombol untuk mengembalikan data formulir ke nilai aslinya.
• submit - Tombol untuk mengirimkan data formulir ke server.
• teks - Bidang teks. Dirancang untuk memasukkan karakter menggunakan keyboard.

Nilai defaultnya adalah teks.

Menentukan nilai elemen formulir yang akan dikirim ke server atau diterima menggunakan skrip klien. Pasangan “nama=nilai” dikirim ke server, di mana nama ditentukan oleh parameter nama tag, dan nilai ditentukan oleh parameter nilai.

Bergantung pada tipe elemen, parameter value memainkan peran berikut:

• untuk set tombol (input type="button | reset | submit"). prasasti teks pada mereka;
• untuk bidang teks (input type="password | text") menentukan string yang dimasukkan sebelumnya. Pengguna dapat menghapus teks dan memasukkan karakternya sendiri, tetapi bila digunakan dalam formulir Tombol setel ulang teks khusus nilai yang dimasukkan dalam parameter dihapus dan dipulihkan;
• untuk kotak centang dan tombol radio (input type = "kotak centang | radio") secara unik mendefinisikan setiap elemen sehingga klien atau program server dapat dengan jelas menentukan item mana yang dipilih pengguna.

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 yang 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.

String pencarian situs yang sama () dibuat menggunakan tag ini, dan pencarian akan diperlukan pada proyek Anda. Oleh karena itu, memahami cara kerja dan cara kerjanya tidak akan merugikan Anda sama sekali. pekerjaan yang sukses atas desain, dan bahkan kapan promosi diri dan promosi tidak akan berlebihan.

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 mengulas banyak materi tentang topik bahasa markup hiperteks, 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 Nilai atribut Anda dapat menentukan apa sebenarnya yang akan ditulis pada tombol yang terletak di sebelah kolom untuk memasukkan permintaan. Data yang dimasukkan dalam formulir harus diproses lebih lanjut dengan cara tertentu.

Misalnya, dalam kasus masukan pengguna, setelah mengisi kolom dengan namanya, memasukkan E-mail dan teks pesan, kemudian mengklik tombol kirim, berhak berharap bahwa data dari formulir akan dikirim ke E -mail dari penulis situs. Namun sayangnya, hal ini tidak dapat diimplementasikan hanya dengan menggunakan satu bahasa markup hypertext ().

Untuk tujuan ini Anda memerlukannya program khusus sebuah pengendali yang, setelah pengguna mengklik tombol kirim, akan mengambil semua data dari kolom 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 berupa skrip tertulis bahasa PHP. Oleh karena itu, dalam atribut Action pada tag Form, Anda perlu menentukan path ke file skrip ini yang terletak di server hosting Anda. Izinkan saya memberi Anda contoh berlangganan Umpan RSS blog saya melalui email: