Hvordan å designe brukervennlige skjemaer i HTML5 - dummies

Designe nyttige skjemaer i HTML er et annet foretak fra å designe lett å -bruk former. Skjemaet ditt kan samle dataene du trenger, men hvis skjemaet ditt er vanskelig for besøkende å bruke, kan de forlate det før de er ferdige.

Når du bruker oppmerkningselementene og andre elementer som driver sideoppsett, må du huske følgende retningslinjer:

• Gi tekstlige spor for alle skjemaene dine. Vær klar over informasjonen du vil ha, og formatet du trenger.

  Fortell brukernes detaljer, for eksempel om

  • Datoer må angis som mm / dd / åå (versus mm / dd / åååå).

  • Antall tegn et felt kan ta er begrenset.

    Du kan begrense karakter ved å bruke maksimallengdeattributtet.

• Bruk feltbredde og tegngrenser for å gi visuelle ledetråder. For eksempel, hvis brukere skal skrive inn et kredittkortnummer som xxx x -xxx x -xxxx -xxxx , vurdere oppretter fire tekstfelt - en for hver del av nummeret.

• Gruppe lignende felt. En logisk gruppering av felt gjør det enklere å fylle ut et skjema. Det er forvirrende hvis du ber om besøkendes fornavn, deretter bursdag, og deretter etternavn.

• Koble lange skjemaer til enkle å administrere seksjoner. Skjemaer i korte biter er mindre skremmende og mer sannsynlig å bli fullført.

  Store nettbutikker (som Amazon.com) bruker denne metoden for å få detaljene de trenger for bestillinger uten å gjøre prosessen for smertefull.

• Merk obligatoriske felt tydelig. Hvis noen deler av skjemaet ditt ikke kan stå tomt når brukerne sender skjemaet, merker du disse feltene tydelig.

  Du kan identifisere nødvendige felt ved

  • Gjør dem dristige

  • Bruk en annen farge

  • Plasser en stjerne ved siden av dem

• Skriv nyttige, vennlige feilmeldinger. Pass på at skjema validering tilbakemelding gir mening besøkende (sjekk dem med en gruppe testere bare for å være sikker). Ingenting slår besøkende bort som en kryptisk, unhelpful melding. ("Type 42-feil" kan bety noe for en programmerer, men ikke til noen andre.)

• Fortell brukere hva slags informasjon de trenger for skjemaet. Hvis brukerne trenger informasjon i hendene før de fyller ut skjemaet ditt, kan en form gateway side spesifisere alt brukerne burde ha før de begynner å fylle ut skjemaet.

Serien av skjemaer som RateGenius bruker til å samle informasjon for billån og lånefinansiering, er gode eksempler på lange skjemaer som samler en rekke ulike typer data ved å bruke alle tilgjengelige formmarkeringselementer.