Attributter av nye formelementer i HTML5 - dummies

HTML5 introduserer nye formelementer og gir alle formelementene noen nye godbiter. Når du designer og bygger websider, kan du bruke disse nye attributter og evner til ethvert formelement:

• autofokus : Et element med dette attributtet er fokuset på den første brukerinngangen. Det er vanlig å bruke autofokusattributtet til det første elementet i skjemaet, og å ha bare ett autofokusfelt per skjema. Koden ser ut som:

  navn 
  Hvis nettleseren ikke godtar autofokusattributtet, vil det ikke skje noe skadelig, og du kan fortsatt bruke en JavaScript-basert løsning.
  

• mønster : Med dette kan du angi et regulært uttrykk som brukes til å validere skjemaet. Hvis innholdet samsvarer med det vanlige uttrykket, blir feltet vurdert som gyldig. Bruk bare dette attributtet når standard valideringsteknikker ikke er tilstrekkelige, da det kan være vanskelig å debugere vanlige uttrykk.

  Når du angir et mønster, inkluderer du også et tittelattributt for å indikere hva mønsteret er, som i eksempelkoden:

  Nettleseren kan bruke dette som et tips for brukeren. Det kan også være nyttig å legge til mønsterinformasjon som plassholdertekst.

  plassholder : Plassholderen fungerer som en midlertidig etikett som viser formålet med et tekstfelt uten å kreve en etikett-kode. Så snart brukeren aktiverer feltet, forsvinner plassholderteksten. En prøve av den enkle koden:

  Ikke alle nettlesere støtter plassholdertekst, og noen vil ganske enkelt ignorere stedholderattributtet. På samme måte, hvis feltet allerede er fylt ut, vil plassholderen ikke være synlig. Av disse grunner legger du til en etikett slik at brukerne vet hva de skal skrive inn i hvert tekstområde.

  Plassholdertekst er spesielt nyttig for å indikere hvordan inngangen skal formateres (spesielt hvis dette vil bli håndhevet ved validering eller et mønster).

• Required : Støttende nettlesere markerer alle nødvendige felt (kanskje ved å markere dem i rødt) hvis de ikke er fylt ut. Noen nettlesere vil også sende en advarsel hvis brukeren prøver å sende inn et skjema med tomme obligatoriske felt.

  Den spesielle: obligatoriske pseudoklassen lar deg bruke en CSS-stil til alle nødvendige elementer i skjemaet ditt (for eksempel gi dem en ramme eller en bakgrunnsfarve). Her er et eksempel på en CSS-stil for å markere nødvendige elementer med en rød ramme:

  : obligatorisk {border: 1px solid red;}
  

  Hvis et felt er påkrevd (med den nødvendige attributtet), vil det bli vurdert ugyldig til den inneholder litt verdi.

  Validering: Form validering er en av de vanskeligste delene av webutvikling. Det er ganske enkelt å sette opp et skjema som ber om brukerinformasjon, men det kan være ganske vanskelig å være sikker på at brukeren skriver inn informasjon på riktig måte.

  HTML5 hjelper deg. Når du bruker spesialinngangselementene, kontrollerer nettleseren automatisk skjemafeltet for å sikre at den er i riktig format. Hvis oppføringen ikke er gyldig, vil skjemaet (vanligvis) ikke bli sendt, og den spesielle: ugyldige CSS-pseudoklassen vil bli knyttet til det ugyldige feltet. Bare send CSS til siden din håndtering av: ugyldig tilstand:

  : ugyldig {bakgrunnsfarge: rød;}
  

  Når denne CSS-tilstanden er aktiv, vil eventuelle ugyldige felt ha: ugyldig styling. Hvis du for eksempel har et fargefelt og den røde bakgrunns-CSS-stilen som er definert her, vil fargefeltet ha en rød bakgrunn med mindre brukeren skriver inn en gyldig farge (et gjenkjent fargenavn eller en heksefargeverdi). På samme måte vil e-postfeltet bli rødt til en gyldig e-postadresse er oppgitt. Du trenger ikke å legge til noen annen kode i skjemaet. Bare legg til CSS for å vise ugyldige oppføringer, og nettleseren vil gjøre resten.

  Du kan slå av validering for hvilket som helst felt ved å legge til novalidate attributtet til det aktuelle elementet.

  Det er mulig at nettleseren vil nekte å behandle et skjema til alle felt er validert, men denne virkemåten synes ikke å være universell blant HTML5-kompatible nettlesere.