ny(ish) i HTML5

attributet autocomplete introducerades som en inofficiell HTML-funktion i Microsofts Internet Explorer, och antogs av ett antal andra webbläsare. Så det har varit brett stöd för det länge, även om dess exakta beteende inte standardiserades. Med HTML5 är attributet autocomplete en officiell del av specifikationen.,

Komplettera automatiskt vs. lista&<datalist>

attributetautocomplete ber webbläsaren att försöka komplettera automatiskt, baserat på användarhistorik. Detta är användbart för personuppgifter som namn och e — postadress-saker som användaren sannolikt kommer att ha typer i liknande inmatningsfält på andra webbplatser. Funktionenautocomplete kan inte ge webbläsaren en lista över webbplatsspecifika alternativ för automatisk komplettering., Använd list-attributet med <datalist> – elementet för automatisk komplettering av webbplatsspecifika förslag.

medvetet ”bruten”

alla större webbläsare ignorerar värdetautocomplete="off" för vissa typer av inmatningsfält. Internet Explorer och Edge ignorerar det för alla password fält. Firefox ignorerar det för något fält i ett inloggningsformulär. Chrome ignorerar det när användaren har valt att låta webbläsaren komma ihåg formulärdata. Safari ignorerar det för användarnamn, e-post och lösenord fält., Ignorera värdet autocomplete="off" görs för att förbättra användbarheten, och gve användaren mer kontroll över Komplettera automatiskt beteende. Som UX-designer bör du följa deras ledning och använda autocomplete="off" sparsamt. Det finns mycket få användningsfall i normala former där det verkligen är meningsfullt att inte tillåta autocomplete. I vissa komplexa appar är det vettigt att undvika oavsiktliga ingångar, men med de flesta standardformulär finns det verkligen ingen anledning till det.,

Komplettera automatiskt och namn

webbläsare använder attributetname för att ta reda på vilken typ av information ett inmatningsfält begär. Så använd standard, meningsfulla värden för name., Om du ber om en adress, Använd namn som:

  • address-1
  • address-2
  • city
  • state eller province
  • zip eller postal-code

använd inte smarta eller märkligt specifika namn, eftersom det gör det svårare för webbläsaren att ge Komplettera automatiskt förslag, och det kan även leda till att webbläsaren försöker fylla i fel värden i fel ingångar., (Har du någonsin haft din webbläsare fylla ditt telefonnummer i Postnummer fältet? Det var fel av dålig namngivning.)

värden för attributet autocomplete

värdenamn anmärkningar
av stänger av autocomplete.
på tänds automatiskt.,

alla attribut för Inmatningselementet

attributnamn värden anmärkningar
steg anger intervallet mellan giltiga värden i ett nummer-
anger intervallet mellan giltiga värden i baserad ingång.
krävs anger att inmatningsfältet krävs; inaktiverar inlämning av formulär och varnar användaren om det obligatoriska fältet är tomt.
platshållare anger platshållartext i en textbaserad inmatning.,
mönster anger ett reguljärt uttryck för att validera värdet på ingången.
multiple tillåter användaren att ange flera värden i en filuppladdning eller e-postingång.
min anger ett minimivärde för inmatningsfält för antal och datum.
max anger ett högsta värde för inmatningsfält för antal och datum.,
lista anger id för en<datalist> element som ger en lista över Komplettera automatiskt förslag för inmatningsfältet.
höjd anger höjden på en bildingång.
formtarget anger bläddringskontexten för att öppna svaret från servern efter inlämning av formulär. För användning endast på ingångstyper av ”Skicka ” eller”bild”.,
formmethod anger HTTP-metoden (GET eller POST) som ska användas när formulärdata skickas till servern. Endast för användning på ingångstyper av ”Skicka ” eller”bild”.
formenctype anger hur formulärdata ska skickas till servern. Endast för användning på ingångstyper ”skicka ” och”bild”.
formaction anger webbadressen för inlämning av formulär. Kan endast användas för type= ”submit” Och type= ”image”.
form anger ett formulär som inmatningsfältet tillhör.,
autofokus anger att inmatningsfältet ska vara i fokus omedelbart vid sidbelastning.
accesskey definierar en tangentbordsgenväg för elementet.
Komplettera automatiskt av
på 		Anger om webbläsaren ska försöka slutföra inmatningen automatiskt baserat på användaringångar till liknande fält.
border användes för att ange en gräns på en ingång. Föråldrad. Använd CSS istället.,
markerad Anger om en kryssruta eller radioknapp formuläringång ska kontrolleras som standard.
inaktiverad inaktiverar inmatningsfältet.
maxlength anger det maximala antalet tecken som kan anges i en texttyp.
språk användes för att indikera skriptspråk som används för händelser som utlöses av inmatningen.
name anger namnet på ett inmatningselement., Namn och värde för varje inmatningselement ingår i HTTP-begäran när formuläret lämnas in.
storlek anger bredden på inmatningen i tecken.
src definierar källadressen för en bildingång.
typ button
checkbox
file
hidden
image
password
radio
reset
submit
text		 definierar ingångstypen.
värde definierar ett initialvärde eller standardval för ett inmatningsfält.,
Adam is a technical writer who specializes in developer documentation and tutorials.