Læremateriell Design Lite Tekstfelt

Neste opp i serien vår lærer innsatsene i Material Design Lite (MDL) vi skal se på komponenten Tekstfelt. Et tekstfelt kan brukes på alt fra et søkeskjema, et kommentarskjema eller et kontaktskjema, og ofte ser vi det sammen med knappelementet.

Faktisk svarer tekstfeltkomponenten i MDL til knappekomponenten; Det er en forbedring av et standard html-element for å bringe det sammen med den generelle materialdesignestetikken og spesifikasjonen. Igjen, før vi begynner, må du inkludere MDL-bibliotekene - stilarkene og JavaScript-inn i dokumentet ditt hode.

La oss begynne med noen grunnleggende.

Grunnleggende tekstfelt

For å implementere tekstfeltkomponenten, starter vi med en tom div med MDL-tekstfeltet og MDL-js-tekstfeltet klasser, innpakket i a skjema element. Hvis du har fulgt våre tidligere innlegg i denne serien, bør du allerede være kjent med klassenavnsmønsteret i MDL. I dette tilfellet er det MDL-tekstfeltet Klassen gjelder de visuelle forbedringene fra CSS, mens MDL-js-tekstfeltet bruker dynamisk oppførsel via JavaScript.

Innen div, vi legger til en inngang element (eller kanskje en textarea) og en etikett (som kreves) sammen med den relevante klassen som trengs for å bruke stilene.

 
  Brukernavn 
 

Det er alt der er til det; Vi har nettopp bygget et grunnleggende tekstfelt med MDL-tekstfeltkomponent!

Potensielle problemer

Det er verdt å merke seg at MDL-textfield__input klasse vi la til inngang elementet vil bare fungere godt når det brukes på en tekstbasert inngangstype, for eksempel tekst, passord, e-post, tlf, url, og Søke. Bruk av klassen til en inngang element av type farge, Dato, eller fil kan churn ut et veldig rart resultat.

I tillegg vil etikettteksten vises like rart hvis vi også legger til plassholdertekst:

Inngangsfeltet med plassholder

Flytende etikett

Vi kan forbedre innspillingselementet med Flytende etikett. Når brukeren fokuserer på inntastingsfeltet, flytter etiketten oppover, ut av markøren. Den flytende etiketten er et stadig vanlig mønster i formdesign, spesielt i det mobile landskapet hvor begrenset plass er bekymret.

MDL har gjort det veldig enkelt å bruke dette designmønsteret. Tilbake til forrige HTML-kode, må vi legge til MDL-tekstfelt - flytende-etikett klasse til div container.

 
  Brukernavn 
 

Bingo! Vårt tekstfelt bør nå være mer visuelt tilfredsstillende med den flytende etiketten:

Utvidbart Input Field

De Utvidbart Input Field er enda et vanlig designmønster som vi kan implementere i MDL. Vi ser først innspillet som et ikon. Ved å bli klikket, vil den ekspandere til et inputfelt. Vi finner vanligvis dette designmønsteret som brukes til søkeinnganger.

For å gjøre vår tidligere innsats utvidbar, må vi legge til MDL-tekstfeltet - kan utvides klasse til div container. Vi pakker også inn inngang element og etiketten med en ny div med MDL-textfield__expandable-holderen klasse vedlagt. Etter denne arbeidsflyten, endrer vi også inngang skriv, tekstetiketten, samt de tilhørende attributter for å spesifisere "søk".

 
  Søke 
 

Deretter lager vi en knapp utenfor utenfor MDL-textfield__expandable-holderen, bruker en merkelapp element som peker på inngangen.

Inngangsvalidering

Sikkerhet og sanitisering av data er avgjørende når det gjelder former. Vi vil ikke at brukerne skal sende inn poster med feil eller til og med skadelig innhold. Vi må derfor evaluere brukeroppføringen i inntastingsfeltet for å overholde inngangstypen. Hvis inngang er av e-post skriv inn, må oppføringen være i overensstemmelse med et e-postformat - det skal inneholde @ og avslutt med en TLD (toppnivå domene).

Heldigvis hjelper MDL oss utenom-boksen. Vi trenger ikke å legge til ekstra oppslag eller klasser. Still inn inngangen med en riktig type, og den vil slå understreken rød hvis inngangsformateringen ikke overholder inngangstypen.

En feil

Men vi kan også sette vår egen formateringsstandard, og også gi et visuelt element som viser en feilmelding. For eksempel:

MDL-inngangsfeilmelding

For å vise et feilvarsel må vi først gi grenser for hva brukere kan legge inn i inngang element gjennom HTML mønster Egenskap. Mønsterattributtet tar en Regular Expression (Regex) som vil evaluere og validere brukerinngangen.

I dette tilfellet vil jeg gjerne at brukernavnet skal være alfabetisk, uten mellomrom. Dermed vil vi spesifisere mønster Tilordne med følgende Regex: [A-Z, a-z] *.

Merk: Du kan finne vanlige Regex-mønstre i HTML5Pattern, for eksempel en for validering av e-post, passord, telefoner, postnummer og datoer.

 
  Brukernavn 
 

Deretter legger vi til feilmeldingen under etiketten ved hjelp av en span element med MDL-textfield__error. Du kan også trenge å bruke stilregler for å justere posisjonen og innholdsjusteringen.

 
  Brukernavn Bare alfabet og ingen mellomrom, vær så snill! 
 

Vi er alle satt! Nå skal innspillet kaste en feilmelding under inngangen, og markere den med rødt, hvis brukeren skriver inn tall, spesialtegn eller mellomrom. Gi det et forsøk:

Wrapping Up

Som vi nettopp har oppdaget, gjør MDL-tekstfeltkomponenten det enkelt for oss å implementere engasjerende inngangsfelt med nyttige designmønstre som flytende etikett og utvidbart inngangsfelt. Vi oppdaget også at det er lett å legge til feilmelding i tilfelle feil formatering.

Neste opplæring bør være en spennende avdrag av denne serien. Vi skal se på en stigende stjerne blant UI-elementer, Kort. Følg med!