Die Attribute der neuen Formularelemente in HTML5

HTML5 führt neue Formularelemente und gibt alle Formularelemente ein paar neue Leckereien. Wie Sie Web-Seiten entwerfen und zu bauen, können Sie diese neuen Attribute und Fähigkeiten jedes Formularelement gelten:

• Autofokus: Ein Element mit diesem Attribut ist der Mittelpunkt der ersten Benutzereingabe. Es ist üblich, die anzuwenden Autofokus Attribut mit dem ersten Element der Form, und nur eine haben Autofokus Feld pro Form. Der Code sieht so aus:

  Wenn der Browser nicht akzeptiert die Autofokus Attribut, nichts schädlich passieren wird, und Sie können immer noch eine javascript-basierte Lösung verwenden.

• Muster: Mit diesem können Sie einen regulären Ausdruck angeben, verwendet, um die Form zu überprüfen. Wenn der Inhalt des regulären Ausdruck übereinstimmt, wird das Feld als gültig betrachtet. Verwenden Sie dieses Attribut nur, wenn die Standard-Validierungstechniken nicht ausreichen, da es schwierig sein kann, reguläre Ausdrücke zu debuggen.

  Wenn Sie eine angeben Muster, umfassen auch eine Titel Attribut, um anzuzeigen, was das Muster, wie es in dem Beispielcode ist:

  Der Browser kann für den Benutzer dies als eine Spitze verwenden. Es kann auch nützlich sein Musterinformation als Platzhalter Text hinzufügen.

  Platzhalter: Das Platzhalter wirkt als temporäre Etikett den Zweck eines Textfeld zeigt, ohne dass ein erfordern Etikette -Tag. Sobald der Benutzer das Feld aktiviert, verschwindet der Platzhalter-Text. Eine Probe des einfachen Code:

  Nicht alle Browser unterstützen Platzhalter-Text, und einige werden einfach ignorieren die Platzhalter Attribut. Ebenso, wenn das Feld bereits ausgefüllt ist, wird der Platzhalter nicht sichtbar sein. Aus diesen Gründen, fügen Sie ein Label, damit Benutzer wissen, was in jedem Textbereich eingeben.

  Platzhaltertext ist besonders hilfreich, um anzuzeigen, wie der Eingang (vor allem, wenn diese durch die Validierung oder ein Muster erzwungen wird) formatiert werden soll.

• erforderlich: Unterstützung von Browsern markieren Sie alle erforderlich Felder (vielleicht von ihnen in rot hervorgehoben), wenn sie nicht ausgefüllt werden. werden einige Browser senden auch eine Warnung, wenn der Benutzer ein Formular mit leeren erforderlichen Felder vorlegen will.

  Das Sonderangebot :erforderlich Pseudo-Klasse ermöglicht es Ihnen, einen CSS-Stil für alle erforderlichen Elemente in Ihrem Formular zu beantragen (sie einen Rahmen oder Hintergrundfarbe, zum Beispiel zu geben). Hier ist ein Beispiel für einen CSS-Stil für die Kennzeichnung erforderlichen Elemente mit einem roten Rand:

   : Erforderlich {border: 1px solid rot-}

  Wenn ein Feld erforderlich ist (mit der erforderlich Attribut), wird es als ungültig betrachtet, bis er einen Wert enthält.

  Validierung: Formularvalidierung ist einer der heikelsten Teile der Web-Entwicklung. Es ist ziemlich einfach, eine Form zu schaffen, die für die Benutzerinformationen fragt, aber es kann ziemlich schwierig sein, um sicher zu sein, dass der Benutzer korrekt Informationen eingibt.

  HTML5 hilft Ihnen aus. Wenn Sie die Spezialeingabeelemente verwenden, wird der Browser automatisch das Formularfeld überprüfen, um sicherzustellen, in ein geeignetes Format es ist. Wenn der Eintrag nicht gültig ist, wird die Form (im Allgemeinen) nicht vorlegen, und die besondere :ungültig CSS Pseudo-Klasse wird mit dem ungültigen Feld zugeordnet werden. Einfach liefern CSS zu Ihrer Seite die Handhabung :ungültig Bundesland:

  : Invalid {background-color: rot-}

  Wenn dieser CSS-Zustand aktiv ist, werden alle ungültigen Felder haben die :ungültig Styling. Zum Beispiel, wenn Sie ein Farbe Feld und die hier rot definiert Hintergrund CSS-Stil, wird das Farbfeld mit einem roten Hintergrund haben, wenn der Benutzer eine gültige Farbe (eine bekannte Farbe oder Hex-Farbwert) eintritt. Ebenso ist die Email Feld zeigt rot, bis eine gültige E-Mail-Adresse eingegeben wird. Sie brauchen keinen anderen Code in das Formular hinzuzufügen. Einfach CSS hinzufügen ungültige Einträge anzuzeigen, und der Browser den Rest tun.

  Sie können die Validierung für jedes Feld deaktivieren, indem Sie das novalidate Attribut auf dieses Element.

  Es ist möglich, dass der Browser ein Formular zu verarbeiten verweigern, bis alle Felder validiert werden, aber dieses Verhalten scheint noch nicht unter HTML5-kompatiblen Browsern universell zu sein.