Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Memikirkan Kembali Formulir dalam HTML5

by
Read Time:12 minsLanguages:
This post is part of a series called HTML5 and You.
HTML5 Globals and You
HTML5 Microdata: Welcome to the Machine

Indonesian (Bahasa Indonesia) translation by Johari Triana (you can also view the original English article)

Meskipun ada banyak perubahan untuk yang lebih baik dalam spesifikasi HTML5, tidak ada untung yang lebih baik untuk uang untuk situs web yang digerakkan data daripada transformasi formulir. Perubahan sederhana ini akan mengubah cara Anda memasukkan, memvalidasi, memproses, dan bahkan menampilkan input. Anda akan dapat membuat aplikasi web yang lebih bermanfaat dengan kode yang lebih sedikit dan lebih sedikit kebingungan.


Pendahuluan Apa yang ada di Toko?

"Di masa lalu baru-baru ini, sebagian besar inovasi dalam formulir berasal dari penggunaan JavaScript, daripada HTML kuno. Meskipun tidak ada yang salah dengan menggunakan JavaScript untuk meningkatkan formulir, itu memang membawa kegunaannya sendiri bersama dengan banyak sakit kepala pengembangan. "

HTML 5 masih mengalami perubahan sebelum diselesaikan. Jika Anda melihat spesifikasi, Anda akan melihat bahwa masih ada panggilan terakhir untuk komentar bersama dengan pernyataan, seperti, Implementasi harus menyadari bahwa spesifikasi ini tidak stabil. Selain itu, terutama untuk keperluan tutorial ini, dengan fokus pada perubahan pada formulir, implementasi browser paling tidak tepat. Yang mengatakan, perubahan di cakrawala patut diuji hari ini. Meskipun perubahannya besar dalam ruang lingkup, implementasi untuk pengembang terlihat agak mudah. Dalam tutorial ini, kami akan mengambil ikhtisar tingkat tinggi dari perubahan-perubahan ini, dan berpikir tentang bagaimana mereka akan memengaruhi sifat input pengguna.

Di masa lalu, perubahan formulir relatif kecil. Jika Anda kembali ke spesifikasi HTML 3.2, yang diselesaikan pada tahun 1997, Anda akan melihat input formulir dasar yang sama yang Anda gunakan hari ini. select, textarea, radio, checkbox dan teks yang tersedia. Generasi pengembang web telah menulis dengan standar yang sama. Sementara versi spesifikasi yang lebih baru membawa perubahan pada form, seperti fieldset, label, legend, dan aksi form seperti onsubmit atau onchange, cara kita berurusan dengan input pengguna tetap agak statis. Di beberapa tahun ini, sebagian besar inovasi dalam formulir berasal dari penggunaan JavaScript, daripada HTML kuno. Meskipun tidak ada yang salah dengan menggunakan JavaScript untuk meningkatkan formulir, itu memang membawa kegunaannya sendiri bersama dengan banyak kesulitan pengembangan. Misalnya, ada banyak cara yang berbeda untuk memvalidasi formulir menggunakan JavaScript, tetapi apa yang terjadi jika pengguna tidak mengaktifkan JavaScript? Kami selanjutnya harus menerapkan logika ke skrip sisi server kami. Pada akhirnya, kami memiliki cara yang tidak konsisten dalam menangani input pengguna. HTML 5 tidak membahas setiap sakit kepala inovasi untuk formulir dalam 13 tahun terakhir, tetapi memberi kami banyak alat
membuat pekerjaan kita jauh lebih mudah, dan memungkinkan kita untuk menghasilkan formulir yang jauh lebih konsisten.

Ada tiga perubahan dasar yang harus kita periksa. Pertama, kita akan melihat perubahan pada elemen input, seperti autocomplete atau autofocus. Yang kedua adalah perubahan pada status input, dan ada beberapa lainnya! Akhirnya, kita akan memeriksa elemen formulir baru. Penting untuk menyatakan kembali bahwa spesifikasi sedang berubah; jadi saya tidak akan terkejut jika, di masa depan, ada perubahan halus pada apa yang kita diskusikan. Itulah yang membuat ini menyenangkan!


Perubahan pada Elemen Input: Tempat Bermain yang Seutuhnya Baru.

Atribut input adalah item yang Anda tempatkan di input untuk menjelaskan apa yang dilakukan input. Contohnya:

Pada contoh di atas, atribut input adalah value, size, dan maxlength. Ini sudah ada selama beberapa waktu. HTML 5 tidak mengubah konsep memiliki elemen input, tetapi menambahkan lebih banyak. Tampaknya ada setidaknya satu pengurangan, atau lebih tepatnya substitusi, dan itu adalah perubahan disabled sekarang tampaknya menjadi readonly. Spesifikasinya tidak menjelaskan perubahan secara detail, tetapi jika saya adalah seorang pemain taruhan, perubahan tersebut akan memungkinkan evneet handler, seperti onblur, untuk menjalankan - yang mencegah elemen yang dinonaktifkan untuk mencegah.

Atribut baru termasuk autofocus, autocomplete, list, required, multiple, pattern, min dan max, step dan placeholder. Saya menganggap ini sebagai dua rasa elemen yang berbeda. Rasa pertama meningkatkan pengalaman bagi pengguna, sementara yang kedua meningkatkan pengalaman pengembangan. Yang saya maksud dengan ini, adalah autofocus, autocomplete, list, multiple, dan placeholder membantu pengalaman pengguna dalam memilih item, atau mungkin dengan memberikan deskripsi tentang apa yang dicari input formulir, atau dengan membantu mengisi formulir. required, min and max, pattern dan step menambah pengalaman pengembangan dengan mengatakan apa yang harus ada dalam formulir itu sendiri.

Autofocus

Apa yang dilakukan masing-masing atribut baru ini relatif mudah dipahami. Contohnya:

Di atas, elemen autofocus memfokuskan input teks pada pemuatan halaman. Ini berarti bahwa segera setelah halaman dimuat, input teks ini siap untuk mengambil entri. Anda dapat mulai mengetik segera, karena elemen ini memiliki fokus dokumen. Sesuatu yang biasa kita lakukan dalam JavaScript dalam satu baris atau lebih, sekarang dapat dilakukan dengan satu kata.

Dalam contoh di atas, dengan mematikan autocomplete, Anda menjaga browser dari mengisi bidang formulir dari nilai sebelumnya. Tidak ada yang lebih mengganggu saya daripada melihat nomor kartu kredit saya muncul dalam formulir begitu saya mengetik angka. Default untuk autocomplete adalah on, jadi satu-satunya waktu Anda perlu menggunakan elemen ini adalah ketika Anda ingin mencegah bidang formulir dari menyelesaikan dari entri sebelumnya. Itu menambah pengalaman pengguna dengan menjaga informasi sensitif dari hanya "muncul".

List

Atribut list sangat keren. Pada dasarnya, Anda memberikan datalist, dan itu akan membuat drop down dari input teks Anda. Anggap saja sebagai auto complete alami. Ambillah sedikit lebih jauh, dan daripada harus menambahkan perpustakaan JavaScript untuk melihat cepat, berdasarkan entri kunci, Anda bisa dengan mudah menambahkan event handler "onchange", dengan posting AJAX, dan Anda berakhir dengan setetes turun yang menjadi lebih spesifik saat pengguna mengetik ke dalam kotak. Dengan HTML 5, fungsionalitas ini dibuat hanya dengan beberapa baris.

Multiple

Atribut multiple memungkinkan Anda untuk memilih beberapa item dari datalist Anda. Misalnya, Anda mungkin memiliki formulir yang mengirim pesan dari situs web Anda. Dengan menggunakan multiple elemen, Anda dapat mengizinkan pengguna untuk memilih beberapa penerima untuk mengirim pesan itu. Sekali lagi, ini adalah sesuatu yang dapat kita capai dengan sedikit JavaScript sekarang, tetapi dengan HTML 5, kita hanya perlu menambahkan satu perintah ke formulir.

Placeholder

Atribut placeholder adalah sesuatu yang telah kami lakukan selama bertahun-tahun dengan sentuhan JavaScript. Apa yang dilakukan adalah, segera setelah input difokuskan, Ketik Di Sini akan menghilang. Jika tidak ada perubahan pada teks blur, maka Ketik Di Sini akan muncul kembali. Sekali lagi, kami mengambil beberapa JavaScript dari gambar untuk meningkatkan pengalaman pengguna.

Required

Atribut baru berikutnya ini semuanya meningkatkan pengembangan kita. Dengan pengecualian "step," masing-masing membantu dalam validasi input pengguna.

Atribut required persis seperti yang dibunyikan. Saya, pengembang halaman web ini, meminta Anda untuk mengisi formulir ini sebelum mengirimkan hasil. Ini adalah validasi formulir dasar yang kami gunakan hari ini dengan JavaScript. Apa yang mengambil perpustakaan sebelumnya untuk menambahkan entri yang diperlukan, sekarang mengambil satu kata dalam formulir.

RegEx

Dari semua atribut formulir baru, ini adalah yang paling saya sukai. Tn. Form, izinkan saya memperkenalkan Anda kepada teman baik saya, Regex. Itu benar, kami dapat memvalidasi entri formulir berdasarkan regular expression. Sementara yang satu ini akan membingungkan pada awalnya, saat Anda mempelajari regular expression, kemungkinan validasi kini menjadi tidak terbatas.

Validasi

Saya telah menggabungkan tiga yang terakhir menjadi satu contoh, karena mereka semua berurusan dengan validasi angka - atau kisaran angka yang dapat kita sertakan.

  • Min: adalah nilai minimal yang akan diambil input.
  • max: adalah nilai input maksimum yang akan diambil input.

Masing-masing berurusan dengan nilai numerik. Jangan membingungkan mereka dengan maxlength, yang berkaitan dengan jumlah karakter yang akan diambil input. Elemen step sama seperti kedengarannya. Saat Anda memilih nilai numerik, naikkan dengan 0,5 atau turun dengan 0,5 - artinya jenis input ini akan memiliki nilai yang mungkin yaitu 1, 1,5, 2, 2,5, dan seterusnya.

Sampai sekarang, sepengetahuan saya, dukungan browser agak turun naik pada atribut ini. Berikut ini bagan singkat yang menunjukkan apa yang dapat saya temukan pada implementasinya.


Perubahan Jenis Input: Banyak Cinta.

Ada delapan tipe input baru, tidak termasuk semua tipe tanggal dan waktu baru, yang untuk tujuan kami, saya gabungkan menjadi satu. Penting untuk dicatat bahwa browser yang belum menerapkan tipe input baru akan menurun ke jenis teks pada masing-masing yang telah saya uji. Apa yang dibawa oleh tipe input baru adalah kemampuan untuk memvalidasi input pengguna berdasarkan pada tipe yang Anda gunakan. Ada juga lebih banyak validasi yang akan datang yang akan saya bahas di dua bagian berikutnya. Setiap tipe input baru memungkinkan kita untuk memisahkan dari bidang teks ke sesuatu yang lebih spesifik. Misalnya, untuk mengambil nilai integer atau float sebelum HTML 5, kami kebanyakan menggunakan jenis input teks. Hanya dari anotasi, ini kontra intuitif untuk pemula. Dengan menjadi lebih spesifik, kami kemudian memiliki kontrol visual yang lebih baik atas antarmuka kami, karena semakin spesifik elemen dalam HTML, semakin besar kontrol yang Anda miliki dari dalam CSS, dan semakin mudah untuk mendefinisikan elemen-elemen visual. Selain itu, dengan jenis input khusus yang baru, browser sekarang dapat menyesuaikan kisaran input yang seharusnya. Akhirnya, dengan munculnya komputasi mobile, kita dapat membuat elemen formulir aplikasi web yang dapat ditata agar terlihat seperti aplikasi alami, atau dapat membentuk keyboard yang kita gunakan.

Mari kita lihat penanganan nomor:

Number, Integer and Float

Masing-masing tipe input ini memungkinkan kita untuk bermain dengan angka, dan ketika kita memposting formulir, kita harus yakin bahwa kita memiliki nilai-nilai float untuk pemrosesan sisi server kami tanpa tambahan validasi JavaScript. Sederhananya, untuk masing-masing jenis ini, kami berharap mendapatkan angka kembali dalam rentang yang kami tentukan dan dengan langkah yang kami inginkan. Perbedaan antara kedua jenis adalah bagaimana mereka ditampilkan. Sementara saya menunggu untuk melihat implementasi pada tipe angka, saya akan mengharapkan roll, atau kotak teks, atau mungkin tipe select dengan angka. Jenis rentang agak berbeda, karena terlihat seperti nilai geser, mirip dengan apa yang Anda harapkan untuk kontrol volume.

Tanggal dan waktu

Kelegaan besar lainnya untuk membuat standar pengembangan backend Anda adalah tipe input tanggal dan waktu yang baru. Dari implementasi Opera yang telah saya lihat, masing-masing menunjukkan drop-down kalender, yang memungkinkan pengguna Anda memilih tanggal. Sekali lagi, kami dapat memvalidasi pada halaman web kami bahwa inputnya dalam format yang kami harapkan. Masing-masing melakukan persis apa yang Anda pikirkan; Anda memilih bulan, minggu, hari, atau waktu. Yang sedikit berbeda adalah datetime-local, yang menunjukkan tanggal dan waktu tanpa offset zona waktu Anda. Misalnya, jika Anda memilih penerbangan, datetime-local akan menunjukkan waktu dan tanggal di kota tujuan Anda, yang belum tentu zona waktu tempat Anda berada saat ini.

Url, Email, Telepon, dan Warna

Masing-masing tipe input ini bersifat deskriptif. URL dan jenis Email keduanya memiliki validasi pola url yang valid dan pola email yang valid. Namun, telepon tidak sesuai dengan pola spesifik apa pun. Itu hanya menghilangkan garis. Jika Anda ingin menerapkan pola validasi pada bidang telepon, Anda selalu dapat menggunakan elemen pola. Masing-masing elemen ini dikurangi warna juga akan mengambil atribut daftar, warna minus. Warna adalah keanehan dari kelompok itu; Saya dapat melihat penggunaan praktisnya, di mana Anda dapat memilih warna dari pull down yang menunjukkan warna, dan memaksakan entri teks dari sesuatu seperti #000000, tetapi itu tidak benar-benar cocok dengan sisa perubahan, menurut pendapat saya. Ini seperti bermain yang mana tidak seperti yang lain.

Seperti halnya atribut, implementasi browser tipe input cukup turun naik. IPhone saya tampaknya mendukung lebih dari ini daripada Safari, yang agak lucu bagi saya. Ini adalah yang terbaik yang bisa saya temukan, untuk mendukung.


Perubahan pada Elemen Formulir: Tidak Cukup Drastis

Jumlah perubahan pada elemen form tidak sedrastis atribut input dan tipe. Yang mengatakan, ada beberapa elemen baru yang harus diperhatikan. Kami telah membahas datalist - ini adalah bagaimana kami mendefinisikan apa yang akan dipilih dari pemanggilan elemen list - tetapi kami belum melihat keygen, output, progress, atau meter. Di luar keygen. ini tidak cukup jelas sebagai atribut baru. Mari kita gali sedikit saja.

Keygen

Yang ini agak membingungkan. Itu tidak menghasilkan kunci publik untuk Anda. Sebaliknya, ini adalah kontrol generator pasangan kunci. Setelah formulir dikirimkan, itu mengemas pasangan kunci untuk menyimpan kunci pribadi di penyimpanan kunci lokal, dan mengirim kunci publik kembali ke server. Ini akan menghasilkan sertifikat klien dan menawarkannya kembali kepada pengguna untuk diunduh. Setelah diunduh dan disimpan dengan kunci pribadi, Anda dapat mengotentikasi layanan, seperti SSL atau otentikasi sertifikat.

Output

Pikirkan elemen output sebagai area teks pada steroid. Apa yang dapat Anda lakukan adalah menghitung dari dua jenis input teks dan output perhitungan itu tanpa pernah mengirimkan formulir kembali ke server. Jika Anda hanya mengembalikan pengiriman palsu, dalam contoh di atas, itu akan menghitung number_1 plus number_2, dan memberikan Anda jawabannya. Seperti banyak hal yang dibahas dalam tutorial ini, ini adalah sesuatu yang dapat kita capai hari ini dengan JavaScript, tetapi ini benar-benar mengurangi jumlah kode yang perlu kita tulis di masa depan.

Progress dan Meter

Dua elemen baru terakhir adalah progress dan meter. Mereka serupa, tetapi dengan satu perbedaan. Progress dimaksudkan untuk digunakan untuk mengukur kemajuan tugas tertentu. Misalnya, jika Anda mungkin memiliki lima halaman lagi untuk diselesaikan sebelum survei dilakukan, Anda akan menunjukkan elemen progress di area itu. Meter, di sisi lain, adalah ukuran dari sesuatu. Anda mungkin ingin menunjukkan sisa ruang disk yang tersisa pengguna. Anda akan menggunakan meteran untuk menampilkan pengukuran itu. Ada elemen batas baru, seperti low, high dan optimal. Ini menggantikan elemen min atau max; jadi jika mereka melebihi mereka, mereka menjadi batas bawah dan atas formulir yang baru.

Seperti perubahan formulir HTML 5 lainnya, implementasi browser saat ini buruk. Inilah yang tampaknya berhasil, dan apa yang tidak (pada saat penulisan ini).


Kesimpulan

Dari apa yang saya lihat, tidak ada alasan untuk tidak mulai menggunakan formulir HTML 5. Elemen dan tipe input semuanya terdegradasi dengan baik, bahkan di IE6, di mana elemen tersebut diabaikan sebagai elemen, atau terdegradasi menjadi input teks. Kita harus menunggu beberapa saat agar atribut validasi menjadi kenyataan, tetapi dengan itu, masih ada beberapa kegunaan saat ini tanpa kelebihan itu. Misalnya, iPhone memodifikasi keyboard jika Anda menggunakan jenis url, email, atau nomor. Jenis input rentang sudah didukung di browser WebKit, jadi Anda bisa menjadi anak pertama di blok dengan slider nomor yang berfungsi tanpa JavaScript. Spesifikasi ini dengan cepat diselesaikan, dan browser mengejar agak cepat dengan perubahan paradigma. Tidak ada waktu seperti sekarang untuk setidaknya mulai bermain dengan mainan baru ini! Apa yang kamu pikirkan?

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.