New(ish) in HTML5
het autocompleteattribuut werd geïntroduceerd als een Onofficiële HTML-functie in Microsoft ‘ s Internet Explorer, en werd overgenomen door een aantal andere browsers. Dus er is brede steun voor het voor een lange tijd, hoewel het exacte gedrag was niet gestandaardiseerd. Bij HTML5 is het kenmerk autocomplete een officieel onderdeel van de specificatie.,
autocomplete vs. list & <datalist>
het autocomplete attribuut vraagt de browser om een poging tot automatische aanvulling, gebaseerd op de gebruikersgeschiedenis. Dit is handig voor persoonlijke gegevens zoals naam en e — mailadres-dingen die de gebruiker waarschijnlijk typen in soortgelijke invoervelden op andere websites hebben. De functie autocomplete kan de browser niet voorzien van een lijst met site-specifieke autocomplete opties., Voor Automatisch aanvullen met site-specifieke suggesties, gebruik je het list attribuut met het <datalist> element.
opzettelijk “gebroken”
alle belangrijke browsers negeren de autocomplete="off" waarde voor bepaalde typen invoervelden. Internet Explorer en Edge negeren het voor allepassword velden. Firefox negeert het voor elk veld in een login formulier. Chrome negeert het op elk moment dat de gebruiker heeft gekozen om de browser te laten onthouden formulier Gegevens. Safari negeert het voor gebruikersnaam, e-mail en wachtwoord velden., Het negeren van de autocomplete="off" waarde wordt gedaan om de bruikbaarheid te verbeteren, en gve de gebruiker meer controle over autocomplete gedrag. Als UX-ontwerper moet je hun voorbeeld volgen en autocomplete="off" spaarzaam gebruiken. Er zijn zeer weinig use cases in normale vormen waar het echt zinvol is om autocompleteniet toe te staan. In sommige complexe apps, is het zinvol om toevallige invoer te voorkomen, maar met de meeste standaardformulieren is er echt geen reden voor.,
Autocomplete en name
Browsers gebruiken het name attribuut om erachter te komen wat voor soort informatie een invoerveld vraagt. Gebruik dus standaard, betekenisvolle waarden voor name., Als je vragen voor een adres, namen gebruiken, zoals:
address-1address-2city-
stateofprovince -
zipofpostal-code
niet gebruiken slim of vreemd specifieke namen, maar dat maakt het moeilijker voor de browser aan te bieden suggesties van autoaanvullen, en het kan zelfs leiden tot de browser probeert in te vullen in het verkeerde waarden in de verkeerde ingangen., (Heb je ooit had uw browser vul uw telefoonnummer in de postcode veld? Dat was de schuld van slechte naamgeving.)
waarden van het attribuut autocomplete
| waarde naam | notities |
|---|---|
| uit | schakelt autocomplete uit. |
| on | zet Automatisch aanvullen aan., |
alle attributen van invoerelement
| Attribuutnaam | waarden | opmerkingen | |
|---|---|---|---|
| stap | hiermee geeft u het interval op tussen geldige waarden in een nummergebaseerde invoer. | ||
| vereist | geeft aan dat het invoerveld vereist is; staat het indienen van formulieren niet toe en waarschuwt de gebruiker als het vereiste veld leeg is. | ||
| plaatshouder | specificeert plaatshouder tekst in een tekstgebaseerde invoer., | ||
| patroon | specificeert een reguliere expressie waarmee de waarde van de invoer moet worden gevalideerd. | ||
| meerdere | staat de gebruiker toe om meerdere waarden in te voeren in een bestand upload of e-mailinvoer. | ||
| min | specificeert een minimumwaarde voor de invoervelden aantal en datum. | ||
| max | geeft een maximale waarde aan voor de invoervelden aantal en datum., | ||
| list | specificeert de id van een<datalist> element dat een lijst geeft van autocomplete suggesties voor het invoerveld. | ||
| hoogte | geeft de hoogte van een beeldinvoer aan. | ||
| formtarget | geeft de bladercontext aan waarin het antwoord van de server wordt geopend na het indienen van het formulier. Alleen te gebruiken op invoertypes van “submit” of “image”., | ||
| formmethod | specificeert de HTTP-methode (GET of POST) die moet worden gebruikt wanneer de formuliergegevens naar de server worden verzonden. Alleen voor gebruik op invoertypen van “submit” of “image”. | ||
| formenctype | geeft aan hoe formuliergegevens naar de server moeten worden verzonden. Alleen voor gebruik op invoertypes “submit” en “image”. | ||
| formaction | geeft de URL voor het indienen van formulieren aan. Kan alleen gebruikt worden voor type = “submit”en type=”image”. | ||
| formulier | geeft een formulier aan waartoe het invoerveld behoort., | ||
| autofocus | geeft aan dat het invoerveld direct moet worden scherpgesteld bij het laden van de pagina. | ||
| accesskey | definieert een sneltoets voor het element. | ||
| autocomplete | off on |
geeft aan of de browser moet proberen de invoer automatisch in te vullen op basis van gebruikersinvoer naar soortgelijke velden. | |
| grens | werd gebruikt om een grens op een invoer te specificeren. Afgekeurd. Gebruik CSS in plaats daarvan., | ||
| checked | geeft aan of een selectievakje of keuzerondje formulier invoer standaard moet worden gecontroleerd. | ||
| disabled | schakelt het invoerveld uit. | ||
| maxlength | geeft het maximum aantal tekens aan dat kan worden ingevoerd in een teksttype-invoer. | ||
| taal | werd gebruikt om de scripttaal aan te geven die wordt gebruikt voor gebeurtenissen die door de invoer worden veroorzaakt. | ||
| naam | geeft de naam van een invoerelement aan., De naam en waarde van elk invoerelement worden opgenomen in de HTTP-aanvraag wanneer het formulier wordt ingediend. | ||
| grootte | geeft de breedte van de invoer in tekens aan. | ||
| src | definieert de bron-URL voor een afbeeldingsinvoer. | ||
| type | button checkbox file hidden image password radio reset submit text |
definieert het invoertype. | |
| waarde | definieert een initiële waarde of standaardselectie voor een invoerveld., |
Geef een reactie