Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

Bringen Sie Ihre Formulare mit CSS3 und HTML5 Validierung auf den neuesten Stand

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Sehen wir uns an, wie man ein funktionales Formular erstellt, das die Daten der Benutzer clientseitig validiert. Danach werden wir uns mit CSS beschäftigen, inklusive CSS3!

Schritt 1: Konzeptualisierungsfunktionalität

Zuerst wollen wir uns vorstellen, wie unsere Form aussehen wird und wie sie funktionieren wird. In diesem Beispiel erstellen wir ein einfaches Kontaktformular, das folgende Informationen vom Benutzer anfordert:

  • Name
  • Email
  • Webseite
  • Botschaft

Wir möchten sicherstellen, dass der Benutzer die Informationen korrekt eingibt. Um dies zu erreichen, werden wir die neuen clientseitigen Validierungstechniken von HTML5 verwenden. Was ist mit Benutzern, die keine HTML5-Funktionen haben? Sie können einfach die serverseitige Validierung verwenden, aber das wird den Rahmen dieses Artikels sprengen.

Schritt 2: Konzeptform

Lassen Sie uns eine Vorstellung davon bekommen, wie unsere Form aussehen soll, indem Sie ein grobes Modell erstellen.

Wie Sie sehen können, bilden die folgenden Elemente unsere Form:

  • Formulartitel Pflichtfelder Benachrichtigung
  • Formularbeschriftungen
  • Formulareingaben Platzhaltertext
  • Formularfeld Hinweise
  • Schaltfläche "Senden"

Nachdem wir nun festgelegt haben, welche Elemente unser Formular bilden, können wir das HTML-Markup erstellen.

Schritt 3: HTML Starter Code

Lassen Sie uns unser grundlegendes HTML-Markup aus dem von uns erstellten Formularkonzept erstellen.

Bis zu diesem Zeitpunkt wird unsere HTML-Datei im Browser weiterhin leer angezeigt. Dies ist einfach Startcode für eine HTML5-Seite.

Schritt 4: HTML-Formular

Lassen Sie uns das HTML-Formular erstellen (wir lassen die Aktionsmethode vorerst leer, da die serverseitige Validierung in diesem Tutorial nicht behandelt wird):

Schritt 5: HTML-Formularelemente

Um unseren Formularinhalt strukturiert und strukturiert zu halten, werden die Formularelemente (label, input usw.) in einer Liste zusammengefasst. Beginnen wir mit der Erstellung des Formularkopfes und unseres ersten Eingabeelements:

Form Hinweise

Wie in unserem Modell zu sehen ist, werden wir Formatierungshinweise für die Felder "E-Mail" und "Website" haben. Also werden wir unsere Hinweise bei input in die Eingabefelder einfügen und ihnen eine Klasse geben, damit wir sie später stylen können.

Die verbleibenden Input elemente

Lassen Sie uns fortfahren und unsere verbleibenden Formularelemente erstellen, wobei Sie daran denken, jeden Abschnitt in ein Listenelement einzufügen.

Schritt 6: Hinzufügen des Platzhalterattributs

Eine der ersten Verbesserungen, die HTML5 für Webformulare bietet (eines, mit dem Sie wahrscheinlich schon vertraut sind), ist die Möglichkeit, den Platzhaltertext festzulegen. Platzhaltertext wird angezeigt, wenn das Eingabefeld leer oder nicht scharf ist.

Fügen wir unseren input elementen das Platzhalterattribut hinzu. Dies hilft dem Benutzer zu verstehen, was er in jedes Feld eingeben sollte.

Kurztipp: Style deinen placeholder Text

Hier ein kleiner Tipp: Wenn Sie Ihren Platzhaltertext formatieren möchten, stehen Ihnen einige Browserpräfixe zur Verfügung:

Die Unterstützung für das Platzhalterattribut ist in modernen Browsern ziemlich gut etabliert (außer IE9, sorry). Wenn Sie wirklich über alle Browser hinweg unterstützt werden müssen, gibt es einige JavaScript-Lösungen, die Sie untersuchen können.

Schritt 7: Grundlegende CSS

Lassen Sie uns einige grundlegende CSS hinzufügen, um unserer Form eine gewisse Struktur zu geben. Ich werde dich durch die Regeln führen:

Entfernen :focus Stil

Webkit fügt den Eingabeelementen automatisch einen Stil hinzu, wenn sie scharf sind. Da wir unsere eigenen Stile hinzufügen werden, möchten wir diese Standardwerte überschreiben:

Typografische Stile

Fügen wir unseren Formularelementen einige typografische Stile hinzu:

Stile auflisten

Lassen Sie uns unsere Listenelemente stylen, um unserer Form eine Struktur zu geben:

Außerdem fügen wir dem oberen und unteren Bereich des Formulars einen kleinen Rahmen hinzu. Dies können wir mithilfe der Selektoren :first-child und :last-child erreichen. Diese wählen, wie die Namen andeuten, die ersten und letzten Elemente in der <ul> Liste.

Dies fügt unserem Formular einige nützliche visuelle Schnitte hinzu. Beachten Sie, dass diese CSS-Selektoren in älteren Browsern nicht unterstützt werden. Da dies für die Hauptfunktionalität nicht entscheidend ist, belohnen wir diejenigen, die aktuelle Browser verwenden.

Formularkopfzeile

Lassen Sie uns den Header-Bereich unseres Formulars gestalten. Dies umfasst das Überschriften-Tag und die Benachrichtigung, die Benutzer darüber informiert, dass das Sternchen (*) erforderliche Felder anzeigt.

Formulareingabeelemente

Lassen Sie uns alle unsere Kernelemente formatieren, die zum Sammeln von Benutzerinformationen verwendet werden.

Fügen wir nun einige zusätzliche visuelle CSS-Stile hinzu. Einige davon sind CSS3-Stile, die Benutzer belohnen, die moderne Browser verwenden.

Schritt 8: Fügen Sie etwas Interaktivität mit CSS3 hinzu

Fügen wir ein bisschen Interaktivität hinzu. Wir werden das Feld, das momentan ausgewählt ist, erweitern, indem wir etwas Padding hinzufügen.

Jetzt für Browser, die es unterstützen, machen wir die Erweiterung des Feldes einen reibungslosen Übergang mit CSS3.

Schritt 9: Das required Attribut in HTML5

Jetzt ist es an der Zeit, auf die wir alle gewartet haben: die HTML5-Werkzeuge zur Formularverarbeitung.

Das Hinzufügen des required Attributs zu einem Eingabe / Textbereich-Element teilt dem Browser mit, dass ein Wert erforderlich ist, bevor das Formular gesendet werden kann. Daher kann ein Formular nicht gesendet werden, wenn ein required Feld nicht ausgefüllt wurde.

Lassen Sie uns also das required Attribut zu allen unseren Formularelementen hinzufügen (weil wir alle ausfüllen möchten).

Schritt 10: required Felder formatieren

Sie werden wahrscheinlich feststellen, dass visuell nichts passiert ist, indem Sie das required Attribut hinzugefügt haben. Wir werden erforderliche Felder mit CSS formatieren. In diesem Beispiel fügen wir in jedem erforderlichen Feld ein rotes Sternchen als Hintergrundbild hinzu. Um dies zu erreichen, wollen wir zuerst auf der rechten Seite unserer Eingabe, wo das Hintergrundbild sein wird, etwas Auffüllen hinzufügen (dies wird Textüberlappung verhindern, wenn der Feldeintrag eine lange Zeichenfolge ist):

Jetzt verwenden wir den CSS-Pseudo-Selektor :required, um alle Formularelemente mit einem erforderlichen Attribut auszurichten. Ich habe ein einfaches 16x16 Pixel großes rotes Sternchen in Photoshop erstellt, das als visueller Indikator für ein Pflichtfeld dient.

Was passiert bei der Einreichung?

Im Moment werden verschiedene Browser verschiedene Dinge tun, wenn ein Formular mit HTML5-Elementen eingereicht wird. Wenn das Formular abgeschickt wird, werden die meisten Browser die Übermittlung des Formulars verhindern und dem Benutzer einen "Hinweis" anzeigen, der das erste Feld markiert, das benötigt wird und keinen Wert hat. Visuelles Styling und Unterstützung für diese "Blasenfelder" ist ziemlich breit. Hoffentlich werden diese Verhaltensweisen in Zukunft standardisiert werden.

Sie können die aktuelle Browserunterstützung für das required Attribut bei quirksmode sehen.

Kurzer Tipp:

Sie können die Bubble-Nachricht in webkit mit den folgenden Informationen formatieren:

Schritt 11: Neue HTML5 type attribute und clientseitige Validierung

Die HTML5-Validierung funktioniert gemäß dem type Attribut, das in den Formularfeldern festgelegt ist. Seit Jahren unterstützt HTML nur eine Handvoll Typattribute wie type="text", aber mit HTML5 gibt es über ein Dutzend neuer Eingabearten einschließlich e-mail und url, die wir in unserem Formular verwenden werden.

Durch die Kombination unserer type Attribute mit dem neuen required Attribut kann der Browser nun die Daten-Client-Seite des Formulars validieren. Wenn der Browser eines Benutzers die neuen type attribute nicht unterstützt, z. B. type="email", wird standardmäßig einfach type="text" verwendet. Das ist eigentlich ziemlich erstaunlich. Im Wesentlichen haben Sie Rückwärtskompatibilität in allen Browsern der Welt, hurra!

Was also, wenn der Browser tatsächlich die neuen type attribute unterstützt? Bei Desktop-Browsern gibt es keine visuellen Unterschiede (sofern nicht durch benutzerdefinierte CSS-Regeln festgelegt). Ein type="text" -Feld sieht genauso aus wie ein type="email" -Feld. Bei mobilen Browsern gibt es jedoch Unterschiede in der Benutzeroberfläche.

Ein Beispiel: Das iPhone

Apples iPhone erkennt die Formulartypen und ändert dynamisch die Bildschirmtastatur, indem es kontextbewusste Zeichen zur Verfügung stellt. Zum Beispiel benötigen alle E-Mail-Adressen die folgenden Symbole: "@" und "." Daher stellt das iPhone diese Zeichen zur Verfügung, wenn der Eingabetyp für die E-Mail angegeben ist.

Schritt 12: Ändern der type attribute

Wir haben bereits unsere Formularfelder auf den Standard type="text" eingestellt. Aber jetzt wollen wir das Type-Attribut in unseren E-Mail- und Website-Feldern auf den entsprechenden HTML5-Typ ändern.

Schritt 13: HTML5-Validierung

Wie bereits erwähnt, basiert die HTML5-Validierung auf Ihren type attributen und ist standardmäßig aktiviert. Es ist kein spezielles Markup erforderlich, um die Formularvalidierung zu aktivieren. Wenn Sie es deaktivieren möchten, können Sie das novalidate-Attribut wie folgt verwenden:

Namensfeld

Schauen wir uns unser erstes Feld an, in dem der Benutzer nach seinem Namen gefragt wird. Wie beschrieben, haben wir das Attribut type="text" und das required Attribut hinzugefügt. Dadurch wird der Webbrowser darüber informiert, dass dieses Feld obligatorisch ist und das Feld als einfacher Text validiert werden soll. Solange der Benutzer mindestens ein Zeichen in dieses Feld eingibt, wird es validiert.

Jetzt erstellen wir ein eigenes CSS, um Feldeingaben zu stylen, die vom Browser als gültig und ungültig angesehen werden. Wenn Sie sich erinnern, verwendeten wir in unserem CSS :required, um alle Eingabeelemente mit einem erforderlichen Attribut zu stylen. Jetzt können wir unsere erforderlichen Felder, die entweder gültig oder ungültig sind, formatieren, indem wir unseren CSS-Regeln hinzufügen :valid oder :invalid.

Lassen Sie uns zuerst Felder mit ungültigen Feldern formatieren. In diesem Beispiel möchten wir das Formular nur als ungültig kennzeichnen, wenn es im Fokus ist. Wir fügen einen roten Rahmen, einen roten Schatten und ein rotes Symbol hinzu, die in Photoshop erstellt wurden, um das ungültige Feld anzuzeigen.

Erstellen wir nun die Regeln, die angeben, dass das Feld gültig ist. Wir fügen einen grünen Rahmen, einen grünen Schatten und ein Gier-Häkchen in Photoshop hinzu. Dies wird auf alle gültigen Felder angewendet, unabhängig davon, ob sie im Fokus stehen oder nicht.

Wenn Sie sich nun auf ein Formularfeld konzentrieren, wird das rote ungültige Styling angezeigt. Sobald ein einzelnes Zeichen in das Feld eingegeben wurde, wird es validiert und grüne CSS-Stile werden angezeigt, um diese Tatsache anzuzeigen.

E-Mail- und URL-Felder

Unsere CSS-Stile und Validierungsregeln werden bereits auf das E-Mail-Feld angewendet, da wir den type und die required Attribute früher festgelegt haben.

Schritt 14: Einführung in das HTML5- pattern attribut

Mit dem type="email" -Attribut als Beispiel scheint es, dass die meisten Browser dieses Feld als *@* validieren (irgendein Zeichen + das "@"  -Symbol + irgendein Zeichen). Dies ist natürlich nicht sehr einschränkend, aber es hindert Benutzer daran, Leerzeichen oder Werte einzugeben, die völlig falsch sind.

Im Beispiel des Attributs type="url" scheint es, als ob die Mindestanforderung für die meisten Browser ein beliebiges Zeichen gefolgt von einem Doppelpunkt ist. Wenn Sie also "h:" eingegeben haben, wird das Feld validiert. Dies ist nicht sehr hilfreich, verhindert jedoch, dass Benutzer irrelevante Informationen eingeben, z. B. ihre E-Mail-Adresse oder ihre Privatadresse. Jetzt können Sie mit Ihren Eingabewerten in Ihrer serverseitigen Validierung genauer umgehen. Wir werden jedoch darüber sprechen, wie man das in HTML5 macht.

Das pattern attribut

Das Musterattribut akzeptiert einen regulären JavaScript-Ausdruck. Dieser Ausdruck wird anstelle des Browserstandards verwendet, um den Wert des Felds zu validieren. Unser HTML sieht nun so aus:

Jetzt akzeptiert unser Feld nur Werte, die mit "http://" oder "https://" und einem zusätzlichen Zeichen beginnen. Diese regelmäßigen Ausdrucksmuster können auf den ersten Blick verwirrend sein, aber wenn Sie sich erst einmal die Zeit genommen haben, sie zu lernen, werden Ihre Formen für eine ganz neue Welt offen sein.

Schritt 15: Formularfeldhinweise (CSS)

Lassen Sie uns nun unsere Formularhinweise formatieren, die dem Benutzer das Format mitteilen, in dem sie ihre Informationen eingeben sollen.

Wir setzen display:none, weil wir die Hinweise nur anzeigen, wenn der Benutzer auf das Eingabefeld fokussiert. Wir setzen unsere Tooltips auch auf unsere rote ungültige Farbe, weil sie immer als ungültig betrachtet werden, bis die richtige Information eingegeben wird.

Verwenden Sie den ::before Selector

Jetzt möchten wir ein kleines Dreieck zu unseren Hinweisfeldern hinzufügen, die helfen, das Auge zu lenken und zu führen. Dies kann mit Bildern geschehen, aber in unserem Fall werden wir es mit reinem CSS machen.

Da es sich lediglich um ein Präsentationselement handelt, das für die Funktionalität der Seite nicht entscheidend ist, fügen wir ein kleines Dreieck hinzu, das nach links zeigt, indem wir den Pseudo-Selektor ::before verwenden. Wir können dies tun, indem Sie eine der geometrischen Unicode-Formen verwenden.

Normalerweise würden wir das HTML-Unicode-Format verwenden, um diese in unserem HTML anzuzeigen (wie im Bild oben gezeigt). Da wir jedoch den ::before-CSS-Selektor verwenden werden, müssen wir bei der Verwendung der content:"" -Regel den entsprechenden Unicode des Dreiecks verwenden. Dann benutzen wir einfach die Positionierung, um es dahin zu bringen, wo wir es wollen.

Verwenden des + angrenzenden Selektors

Schließlich verwenden wir den angrenzenden CSS-Selektor, um unsere Formularfeldhinweise ein- und auszublenden. Der angrenzende Selektor (x + y) wählt das Element aus, dem das vorherige Element unmittelbar vorangeht. Da unsere Feldhinweise direkt hinter unseren Eingabefeldern in unserem HTML-Code stehen, können wir mit diesem Selektor die Tooltips ein- und ausblenden.

Wie Sie dem CSS entnehmen können, legen wir auch die Formularhinweise fest, um die Farben zusammen mit dem Rahmen der Eingabe zu ändern, wenn ein Feld gültig oder ungültig ist.

Schritt 16: Lehnen Sie sich zurück und bewundern Sie Ihr schönes HTML5-Formular

Schauen Sie sich Ihr Endprodukt an!

Fazit

Wie Sie sehen können, sind die neuen HTML5-Formularfunktionen recht ordentlich! Alles ist abwärtskompatibel, so dass die Integration dieser neuen Funktionen in Ihre Website nichts ändert.

Die HTML5-Validierung nähert sich dem Ersetzen der clientseitigen Validierung und hilft Benutzern beim korrekten Ausfüllen ihrer Online-Formulare. Die HTML5-Validierung ersetzt jedoch nicht die serverseitige Validierung. Vorläufig sollten Sie beide Methoden verwenden, wenn Sie von Benutzern eingereichte Informationen verarbeiten. Danke fürs Lesen!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.