Sempurnakan input teks – Beragampengetahuan
Formulir dan masukan web mendukung berbagai properti tambahan yang memberikan petunjuk kepada browser dan meningkatkan pengalaman pengguna dalam mengisi formulir secara online. Dengan sedikit usaha ekstra, kami dapat memastikan tabel kami membantu dan bukannya menghambat.
saat membuat atau menggunakan Hyper Text Markup Language Dalam formulir, kita sering menambahkan berbagai elemen tambahan seperti label, teks bantuan, validasi, dan perilaku JavaScript. Namun, banyak formulir tampaknya tidak memperhitungkan beberapa fitur bawaan yang dapat dengan mudah memberikan pengalaman formulir yang lebih baik.
Jika Anda pernah menggunakan formulir yang terasa tidak pas di browser Anda Juga Sangat membantu, form dapat memanfaatkan beberapa fitur bawaan ini. Misalnya, jika formulir berisi bidang URL atau SKU produk, pemeriksaan ejaan dan kapitalisasi otomatis lebih cenderung menghambat daripada membantu. Dalam hal ini, kami ingin browser mengetahui untuk tidak menerapkan ini ke lapangan.
Kita punya spellcheck,
autofocus, autocapitalize, autocompleteDan autocorrect11ini autocorrect Properti ini non-standar dan hanya didukung di Safari. Properti yang dapat ditambahkan ke kolom input untuk meningkatkan pengalaman pengguna. Semua ini membantu memberi tahu browser dan ekstensi cara menangani kolom masukan. Dan tidak diperlukan JavaScript!
ini MDN Dokumentasi untuk properti ini cukup menyeluruh, jadi kami hanya akan membahas dasar-dasarnya dengan beberapa contoh.
Contents
spellcheck
ini spellcheck Properti secara teknis tidak memerlukan nilai, tapi saya pribadi ingin menentukan nilai eksplisit. Kita dapat mengaturnya menjadi true atau falsetetapi bahkan string kosong pun setara dengan mengaktifkannya. Perilaku default pemeriksaan ejaan berbeda-beda antar browser, jadi akan sangat membantu jika mengaktifkan atau menonaktifkannya secara eksplisit untuk setiap masukan. Namun, pada akhirnya ini hanyalah saran untuk browser dan mungkin tidak dipatuhi.
Perlu juga dicatat bahwa spellcheck Properti dapat diterapkan untuk disertakan form Sebuah elemen yang berlaku untuk semua masukan turunannya. Hal ini memudahkan untuk mengaktifkan atau menonaktifkannya secara default dan mengganti nilai untuk bidang tertentu tanpa harus menentukannya di setiap bidang. (Gambar 1)
<form action="/check" spellcheck="true"> <!-- Inherit from containing `form` --> <input type="text"> <!-- Explicitly enabled without value --> <input type="text" spellcheck> <!-- Explicitly enabled with `true` --> <input type="text" spellcheck="true"> <!-- Explicitly disabled with `false` --> <input type="text" spellcheck="false"></form>
ini spellcheck Atribut tersebut dapat memberikan petunjuk kepada agen pengguna apakah akan melakukan pemeriksaan ejaan pada bidang tertentu. Itu juga dapat ditentukan dalam isinya form elemen sehingga nilainya akan diwarisi oleh input anak.
↩︎
autofocus
ini autofocus Properti bisa jadi rumit karena hanya satu elemen yang dapat memilikinya dalam satu waktu. Selain itu, karena pembaca layar beralih ke elemen fokus otomatis, pengguna dapat mengalami disorientasi jika mereka tidak menduganya. Sebaiknya gunakan dengan hati-hati, terutama bila elemennya cukup jauh dari halaman sehingga dapat menyebabkan pengguliran. (Gambar 2)
<form action="/focus"> <input type="text" autofocus></form>
ini autofocus Properti adalah Boolean, jadi tidak ada nilai yang perlu ditentukan.
↩︎
autocapitalize
ini autocapitalize Atribut menyediakan beberapa opsi berbeda agar browser mengetahui apa yang harus dilakukan dengannya. menyukai spellcheckitu juga dapat ditentukan dalam isinya form Sebuah elemen yang berlaku untuk semua masukan turunannya.22URL, email, dan entri kata sandi tidak pernah menggunakan huruf kapital secara otomatis. juga suka spellcheckperilaku default bervariasi antar browser, jadi akan sangat membantu jika mengaktifkan atau menonaktifkannya secara eksplisit untuk setiap masukan. (gambar 3)
Ada empat kemungkinan perilaku autocapitalize:
noneatauoff– Nonaktifkan dan jangan gunakan huruf besar apa pun. (Bawaan peramban Firefox)sentencesatauon– Gunakan huruf kapital hanya pada huruf pertama setiap kalimat. (Default untuk Chrome dan Safari)characters– Gunakan huruf kapital pada setiap karakter.words– Gunakan huruf kapital hanya pada karakter pertama setiap kata.
<form action="/capitalize" autocapitalize="true"> <!-- Inherit from containing `form` --> <input type="text"> <!-- Explicitly enabled --> <input type="text" autocapitalize="on"> <input type="text" autocapitalize="sentences"> <!-- Explicitly disabled --> <input type="text" autocapitalize="off"> <input type="text" autocapitalize="none"> <!-- Capitalize every single character --> <input type="text" autocapitalize="characters"> <!-- Capitalize first character of each word --> <input type="text" autocapitalize="words"></form>
judul
↩︎
autocomplete
ini autocomplete Properti lebih maju daripada yang lain dan mendukung nilai yang lebih luas tergantung pada jenis konten yang diharapkan di lapangan.33Pastikan untuk memeriksa standar WHATWG untuk penjelasan lebih rinci tentang cara kerjanya. Hal ini dapat ditentukan dalam form Elemen ini berlaku untuk semua masukan turunannya, namun dapat juga ditentukan pada masukan individual untuk menggantikan nilai tingkat formulir.
Opsi paling sederhana untuk pelengkapan otomatis adalah on atau offtapi saat kita menggunakannya on, sebenarnya kami membiarkan browser memutuskan apa yang harus dilakukan dengannya. Selain nilai tersebut, kita juga dapat memilih dari daftar nilai tertentu untuk memberikan petunjuk kepada browser tentang jenis konten yang diharapkan. Ini termasuk bagian dari nama, mis. given-name, family-name, nickname, dan masih banyak lagi. Saya mendorong Anda untuk memeriksa daftar lengkap untuk melihat apakah ada sesuatu yang mungkin berguna untuk meja Anda. (Gambar 4)
<form action="/autocomplete"> <!-- We have endless variations for parts of names, but full name is easy. --> <input name="full-name" autocomplete="name"> <!-- We can specify one-time codes/passwords to be autocompleted. --> <input type="password" name="one-time-code" autocomplete="one-time-code"> <!-- We can specify when passwords fields are for the current value or a new one. --> <input type="password" name="new-password" autocomplete="new-password"> <input type="password" name="current-password" autocomplete="current-password"></form>
kita bisa gunakan autocomplete Memberikan petunjuk ke browser dari daftar lebih dari 50 nilai yang mewakili berbagai jenis masukan umum.
↩︎
Selain tipe nilai tertentu, kita juga bisa menggunakan section- Awalan untuk bidang grup. Contoh paling umum adalah formulir yang berisi alamat penagihan dan pengiriman. Nyatanya, autocomplete Nilai-nilai yang secara eksplisit didukung oleh properti billing Dan shipping untuk membedakan keduanya. (Gambar 5)
Contoh lain mungkin berupa formulir di mana seseorang harus menentukan informasinya dan informasi tamunya. Dalam hal ini, formulir mungkin memiliki beberapa bidang nama dan a section-guest value dapat membantu memberikan tingkat petunjuk kepada browser.
<form action="/autocomplete" capitalize="true"> <fieldset> <legend>Billing Address</legend> <label for="billing-address-one">Address Line 1</label> <input id="billing-address-one" name="billing-address-one" autocomplete="section-billing billing address-line1"> <label for="billing-address-two">Address Line 2</label> <input id="billing-address-two" name="billing-address-two" autocomplete="section-billing billing address-line2"> <!-- ... --> </fieldset> <fieldset> <legend>Shipping Address</legend> <label for="shipping-address-one">Address Line 1</label> <input id="shipping-address-one" name="shipping-address-one" autocomplete="section-shipping shipping address-line1"> <label for="shipping-address-two">Address Line 2</label> <input id="shipping-address-two" name="shipping-address-two" autocomplete="section-shipping shipping address-line2"> <!-- ... --> </fieldset></form>
Selain nilai-nilai inti kita, kita juga bisa menggunakan section- Awalan untuk bidang terkait grup, kami bahkan mendapatkan dukungan eksplisit dalam hal alamat billing Dan shipping alamat.
↩︎
autocorrect
Akhirnya, dan yang paling tidak penting, kita sudah melakukannya autocorrect— atau lebih tepatnya, mereka yang menggunakan Safari memilikinya. dapat diatur ke on atau offmeskipun merupakan properti non-standar, properti ini mudah untuk ditambahkan dan dapat membantu siapa saja yang menggunakan Safari. (Gambar 6)
<!-- Since product SKU's don't use dictionary words, don't use autocorrect --> <input type="text" name="sku-code" autocorrect="off"> <!-- Long-form prose can potentially benefit from autocorrect --> <textarea name="summary" autocorrect="on"></textarea>
ini autocorrect Properti ini hanya didukung oleh Safari, namun tetap bermanfaat untuk mengaktifkan atau menonaktifkannya secara eksplisit berdasarkan bidang.
↩︎
Kesimpulannya
Meski terasa seperti detail kecil, saat kami menyetel properti ini pada masukan, kami menyederhanakan berbagai hal bagi pengunjung sekaligus memberi instruksi kepada browser kapan harus menyingkir. Pada akhirnya, karena jumlah pekerjaan per atribut relatif rendah, hal ini layak dipertimbangkan saat berikutnya Anda mengerjakan formulir.
rencana pengembangan website
metode pengembangan website
jelaskan beberapa rencana untuk pengembangan website, proses pengembangan website, kekuatan dan kelemahan bisnis pengembangan website
, jasa pengembangan website, tahap pengembangan website, biaya pengembangan website
#Sempurnakan #input #teks
