Attribut av nya formulärelement i HTML5

Attribut av nya formulärelement i HTML5 - dummies

HTML5 introducerar nya formulärelement och ger alla formelement några nya godis. När du utformar och bygger webbsidor kan du tillämpa dessa nya attribut och funktioner på något formelement:

  • autofokus : Ett element med detta attribut är fokus för den första användarinmatningen. Det är vanligt att använda autofokusattributet till det första elementet i formuläret och att bara ha ett autofokusfält per form. Koden ser ut som:

     namn 

    Om webbläsaren inte accepterar autofokusattributet kommer inget skadligt att hända, och du kan fortfarande använda en JavaScript-baserad lösning.

  • mönster : Med detta kan du ange ett vanligt uttryck som används för att validera formuläret. Om innehållet matchar det reguljära uttrycket anses fältet vara giltigt. Använd endast detta attribut när standard valideringstekniker inte är tillräckliga, eftersom det kan vara svårt att felsöka regelbundna uttryck.

    När du anger ett mönster, inkludera även ett titelattribut för att ange vad mönstret är, som i provkoden:

    Webbläsaren kan använda detta som ett tips för användaren. Det kan också vara användbart att lägga till mönsterinformation som platshållare.

    platshållare : Platshållaren fungerar som en tillfällig etikett som visar syftet med ett textfält utan att kräva en etiketttagg. Så snart användaren aktiverar fältet försvinner platshållarteksten. Ett exempel på den enkla koden:

    Inte alla webbläsare stöder platshållare, och vissa ignorerar helt enkelt platshållarattributet. På samma sätt, om fältet redan är fyllt i, kommer platshållaren inte att synas. Av dessa skäl lägger du till en etikett så att användarna vet vad de ska skriva i varje textområde.

    Platshållarteksten är särskilt användbar för att ange hur inmatningen ska formateras (speciellt om detta kommer att genomföras genom validering eller ett mönster).

  • krävs : Stödjande webbläsare markerar alla obligatoriska fält (kanske genom att markera dem i rött) om de inte fylls i. Vissa webbläsare skickar också en varning om användaren försöker skicka in ett formulär med tomma obligatoriska fält.

    Den speciella: obligatoriska pseudoklassen gör att du kan tillämpa en CSS-stil på alla erforderliga element i din form (till exempel en gräns eller bakgrundsfärg). Här är ett exempel på en CSS-stil för att markera erforderliga element med en röd kant:

     : krävs {border: 1px solid red;} 

    Om ett fält krävs (med den obligatoriska attributet) anses den vara ogiltig tills den innehåller något värde.

    Validering: Formvalidering är en av de svåraste delarna av webbutveckling. Det är ganska lätt att ställa in en blankett som begär användarinformation, men det kan vara ganska svårt att vara säker på att användaren lämnar in informationen korrekt.

    HTML5 hjälper dig. När du använder specialinmatningselementen kontrollerar webbläsaren automatiskt formulärfältet för att se till att det är korrekt format. Om posten inte är giltig kommer formuläret (generellt) inte att skickas, och den speciella: ogiltiga CSS-pseudoklassen kommer att associeras med det ogiltiga fältet. Ange bara CSS på din sida hantering av: ogiltigt tillstånd:

     : ogiltigt {bakgrundsfärg: röd;} 

    När det här CSS-läget är aktivt kommer alla ogiltiga fält att ha: ogiltig styling. Om du till exempel har ett färgfält och den röda bakgrunds-CSS-stilen definierad här, kommer färgfältet att ha en röd bakgrund om inte användaren anger en giltig färg (ett erkänt färgnamn eller hex-färgvärde). På samma sätt visas e-postfältet rött tills en giltig e-postadress har angetts. Du behöver inte lägga till någon annan kod i formuläret. Lägg bara till CSS för att visa ogiltiga poster, och webbläsaren gör resten.

    Du kan stänga av valideringen för något fält genom att lägga till attributet novalidate till det elementet.

    Det är möjligt att webbläsaren vägrar att bearbeta en blankett tills alla fält är validerade, men detta beteende verkar inte vara allmänt bland HTML5-kompatibla webbläsare.