Kasuta veebivormides automaatse täitmise atribuuti tõhusalt

Selles juhendis saate teada, kuidas kasutada oma veebivormides autocomplete-atribuuti, et optimeerida automaatset täitmist sisestusväljades. See funktsioon võib oluliselt parandada kasutajakogemust, hõlbustades kasutajale vormide täitmist. Õpid, kuidas autocomplete-atribuuti õigesti kasutada ja milliseid erinevaid väärtusi saate selle juures kasutada. Lisaks saate kasulikke näpunäiteid võimalike automatiseerimisprobleemide vältimiseks.

Olulisemad teadmised

• Autocomplete-atribuut võimaldab teil konfigureerida sisestusvälja nii, et brauser pakub kasutajale asjakohaseid soovitusi.
• Saate mitte ainult lubada, vaid ka juhtida, millist tüüpi sisestusi tuleks salvestada.
• Siiski tuleb meeles pidada, et see ei oma absoluutset mõju brauserite käitumisele, kuna neil on mõningane vabadus automaatse täitmise osas.

Juhised samm-sammult

Samm 1: Autocomplete-atribuudi mõistmine

Autocomplete-atribuuti kasutatakse selleks, et anda brauserile vihjeid, millist tüüpi teavet tuleks sisestusvälja sisestada. Selle juures on erinevaid väärtuseid, mida saate kasutada, et vastavad sisestusväljad määratleda. Üks levinud väärtus on on, mis tähendab, et brauser salvestab sisestused ja võib järgmisel korral teha soovitusi.

Samm 2: "Off" kasutamine

On ka väärtus off. See on eriti kasulik juhul, kui soovite tagada, et brauser ei täida automaatselt teatud välja sisestusi. Näiteks olukordades, kus sisestatakse tundlikke andmeid, saate kasutada autocomplete="off", et automaatne täitmine välja lülitada. See on siiski ainult vihje; lõplik otsus on brauseri kätes.

Samm 3: Konkreetse tüübi määratlemine

Kui soovite autocomplete-i lubada, saate kasutada konkreetseid tüüpe, nagu street-address. Määrates autocomplete="street-address", annate brauserile selge vihje, et selles väljas sisestatakse tänavadress. Brauser saab siis teha asjakohaseid soovitusi, mis põhinevad salvestatud aadressidel.

Samm 4: Aadresside sisestamine

Näitamaks, kuidas see tegelikult toimib, liikuge sisestusvälja ja lisage autocomplete="street-address" HTML-koodi. Kui kasutaja sellesse välja klõpsab, peaks ta nägema soovitusi salvestatud aadresside kohta. See võib märkimisväärselt parandada kasutajakogemust.

Samm 5: Brauseri sätete mõistmine

Kui brauseril on juba autocomplete-funktsioonid aktiveeritud, saavad kasutajad neid andmeid brauserisätete all lisada või muuta. Näiteks saate Chrome'is salvestada kohandatud aadresse ja muud teavet jaotises "Aadressid ja muu".

Samm 6: Lisaväljade ja -väärtuste määratlemine

Samuti saate autocomplete-atribuudile kasutada muid väärtuseid, nagu name, email, username või new-password. Need spetsiifilised juhised aitavad brauseril hoida õigeid andmeid ja pakkuda neid järgmisel korral. Nende väärtuste õige kasutamine võib võimaldada sujuvat sisestust.

Samm 7: MDN-i dokumentatsioon ja näited

Kõigi võimalike Autocomplete-atribuudi väärtuste nägemiseks ja üksikasjalikuma teabe saamiseks soovitan vaadata MDN-i dokumentatsiooni. Sealt leiate põhjalikku teavet kõikide saadaolevate valikute ja nende konkreetse kasutamise kohta.

Samm 8: Selge strateegia valimine

Kui vajate soovitatava sisu üle täpset kontrolli, peaksite kaaluma datalist-elementi kasutamist, mis kuvab määratletud valikud otse. See annab teile võimaluse täpselt määratleda, milliseid valikuid kasutajale pakutakse.

Kokkuvõte

Automaattäitmise atribuudiga saate oma veebirakenduse kasutajaliidese aktiivselt parandada. Õige väärtuse valimine võib kasutajakogemuse seisukohast olla otsustava tähtsusega. Peate alati meeles pidama, et brauserite käitumine võib erineda ja et autocomplete on põhimõtteliselt vihje.