Eine Anleitung zu HTML & CSS -Formularen (keine Hacks!)

Historisch gesehen waren HTML -Formen ziemlich schwierig - zuerst, weil zumindest ein bisschen JavaScript erforderlich war, und zweitens, weil keine Menge CSS sie sich jemals verhalten kann.

Dies gilt jedoch nicht unbedingt im Fall des modernen Webs. Lassen Sie uns also lernen, wie Sie Formulare mit nur HTML und CSS markieren können.

Key Takeaways

• HTML -Formulare können nur mit HTML und CSS erstellt werden, ohne dass JavaScript erforderlich ist. Die Formularstruktur wird mit dem Element
  erstellt und die Daten werden unter Verwendung des Aktionsattributs übermittelt. Zusätzliche Attribute wie EnCTPE und Target können verwendet werden, um den Datencodierungsart zu definieren, und wo die Ausgabe angezeigt wird.
• Beschriftungen sind für die Benutzerfreundlichkeit und die Zugänglichkeit von wesentlicher Bedeutung und beschreiben, wofür ein Eingang ist. Es gibt drei Möglichkeiten, ein Etikett zu deklarieren: angrenzende Etiketten, ARIA -Etiketten und Verpackungsetiketten. Die effizienteste Methode ist das Einwickeln der Eingänge in Etiketten. Platzhalter sind auch nützlich, um Beispiele dafür zu geben, was im Eingangsfeld erwartet wird.
• Es stehen verschiedene Eingabetypen zur Auswahl, z. B. Schaltfläche, Kontrollkästchen, Farbe, Datum, E -Mail, Datei usw. Die Styling -Eingänge können aufgrund von Browser -Standardeinstellungen eine Herausforderung sein, aber das Erscheinungsmerkmal kann verwendet werden, um diese zu überschreiben. Die Eingabevalidierung ist entscheidend, um sicherzustellen, dass die Benutzereingabe bestimmte Kriterien erfüllt, und kann mithilfe der nativen HTML-Validierung oder JavaScript erreicht werden.

form die Grundstruktur

Beginnen Sie mit dem Element

.

Nichts Besonderes hier. Nur die Grundstruktur abdecken.

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Wenn Sie die Formulardaten auf natürliche Weise senden (dh ohne JavaScript), müssen Sie das Aktionsattribut angeben, wobei der Wert die URL ist, an die Sie die Formulardaten senden. Die Methode sollte abhängig von dem, was Sie erreichen möchten, erhalten oder veröffentlichen (senden Sie keine sensiblen Daten mit GET).

Zusätzlich gibt es auch das weniger verwendete EngeTePe-Attribut, das den Codierungstyp der gesendeten Daten definiert. Außerdem kann das Zielattribut, obwohl nicht unbedingt ein für Formulare eindeutiges Attribut, verwendet werden, um die Ausgabe in einer neuen Registerkarte anzuzeigen.

JavaScript-basierte Formen benötigen diese Attribute nicht unbedingt.

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Formulare bestehen aus Eingaben, die Datenwerte erwarten.

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Siehe den Stift

Form 1 von SitePoint (@sinepoint)
auf Codepen.

Einbeziehung von Etiketten für bessere Benutzerfreundlichkeit und Zugänglichkeit

Jede Eingabe benötigt ein Etikett.

Eine Beschriftung ist ein Textdeskriptor, der beschreibt, wofür eine Eingabe ist. Es gibt drei Möglichkeiten, ein Etikett zu deklarieren, aber einer von ihnen ist den anderen beiden überlegen. Lassen Sie uns jetzt in diese eintauchen.

benachbarte Bezeichnungen

benachbarte Bezeichnungen erfordern den meisten Code, da wir explizit erklären müssen, welche Eingabe das Beschriftung beschreibt. Für die meisten ist dies kontraintuitiv, da wir stattdessen Eingänge innerhalb von Beschriftungen einwickeln können, um den gleichen Effekt mit weniger Code zu erzielen.

, dass die angrenzende Methode unter mildernden Umständen erforderlich sein kann. So würde das so aussehen:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Wie Sie aus dem obigen Beispiel sehen können, muss das Attribut der mit dem ID -Attribut der Eingabe übereinstimmen, und was dies tut Eingang. Das Eingabegerät leitet dies dann an Benutzer weiter (Bildschirmleser diktieren es beispielsweise über Sprache).

Aria Bezeichnungen

Während semantisches HTML besser ist, können ARIA -Beschriftungen (zugängliche reiche Internetanwendungen) in ihrer Abwesenheit ausgleichen. In diesem Fall könnte ein Etikett in Abwesenheit eines tatsächlichen HTML :

aussehen

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Leider ist der Nachteil dieses Ansatzes das Fehlen eines visuellen Etiketts. Dies kann jedoch bei einigen Markups in Ordnung sein (z. B.

eine einzelne Eingangsform mit einer Überschrift und einem Platzhalter ):

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

(Ich werde erklären, wofür Platzhalter in einem Moment sind.)

Beschriftungen

Wickeln in Etiketten ist der sauberste Ansatz. Dank CSSs: Focus-Within können wir sogar Etiketten stylen, während ihre Kindereingaben Fokus erhalten, aber wir werden das später diskutieren.

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Platzhalter gegen Bezeichnungen

Ein kurzer Vergleich:

Beschriftungen geben an, was der Eingang erwartet
Platzhalter zeigen Beispiele für diese Erwartungen

Platzhalter sind nicht als Alternative zu Etiketten ausgelegt, obwohl sie, wie wir im obigen Aria -Beispiel gesehen haben, einen Teil des Kontextes hinzufügen können, der ohne visuelle Etiketten verloren geht.

Idealerweise sollten wir beide verwenden:

Siehe den Stift

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

Form 2 von SitePoint (@sinepoint)

auf Codepen.

Eingabetypen auswählen

Platzhalter gelten nur für textbasierte Eingaben, aber es gibt tatsächlich einen ganzen Bereich verschiedener Eingangstypen, darunter:

semantische Eingangstypen sind während der Formularvalidierung nützlich, insbesondere wenn wir uns auf die native Validierung verlassen, die wir uns in Kürze ansehen werden. Lassen Sie uns zunächst lernen, wie diese Eingaben stylen können.

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Styling -Eingänge

Der wohl ärgerlichste Aspekt der Codierungsformulare besteht darin, das Standardstyling des Browsers zu überschreiben. Zum Glück heute Aussehen: Keine; hat 96,06% Browser -Unterstützung laut caniuse.com.

Nachdem wir das Standard -Styling des Webbrowsers mit dem folgenden CSS -Code zurückgesetzt haben, können wir dann Eingänge stylen, wie wir möchten, und dies enthält sogar die Funk- und das Kontrollkästchen -Eingabetypen:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Einige dieser Eingaben können jedoch mit Macken ausgestattet sind, die schwierig oder sogar unmöglich zu überwinden sind (abhängig vom Webbrowser). Aus diesem Grund tendieren viele Entwickler dazu, auf den Standardtyp = "Text" Attribut = Wert zurückzukehren, wenn sie diese Macken unerwünscht finden (z. B. die "Pflege" auf Eingabetyp = "Nummer").

Es gibt jedoch ein Silberstreifen…

Angeben eines inputMode

Mit 82,3% Webbrowser -Unterstützung nach Caniuse.com gibt das neue Eingabemodat -Attribut unabhängig vom verwendeten Eingangstyp an, welches Tastaturlayout auf Handheld -Geräten angezeigt wird.

.

besser als nichts, oder?

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Validierung der Benutzereingabe

Wenn Sie die native HTML-Validierung über eine JavaScript-Lösung wählen, denken Sie daran, dass InputMode in dieser Hinsicht nichts erreicht. inputMode = "E -Mail" validieren Sie keine E -Mail -Adresse, während Eingabe type = "E -Mail" wird. Das ist der Unterschied.

Wenn Sie dies beiseite legen, diskutieren wir, was die Validierung auslöst:

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Erstellen benutzerdefinierter Regeln

benutzerdefinierte Regeln erfordern Kenntnisse über reguläre Ausdrücke von JavaScript, wie sie vom Regexp -Objekt verwendet werden (ohne Schrägstriche oder Zitate). Hier ist ein Beispiel, das in einer Regel Kleinbuchstaben (A - Z) und Minlenlänge/MaxLength erzwingt:

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Weitere Informationen hier.

Hinweis: Front-End-Validierung (native HTML oder auf andere Weise) sollte niemals als Ersatz für die serverseitige Validierung verwendet werden!

Styling gültig/ungültige Zustände

Nur für zusätzliche Klarheit, so würden wir die Gültigkeit stylen:

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

Houston, wir haben ein Problem!

Eingänge versuchen sofort, ihre Werte (oder das Fehlen dessen) sofort zu validieren

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Dies zeigt das gültige/ungültig

Siehe den Stift Form 3 von SitePoint (@sinepoint) auf Codepen.

Andere grundlegende Dinge

Senden von Formulardaten

Senden von Formulardaten an den Server erfordert normalerweise, dass Eingänge das Namensattribut haben. Dies gilt auch für versteckte Eingänge:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

Akzeptieren von Langformeingang

im Wesentlichen ist dasselbe wie , außer dass Textareas Multiline -Unterstützung haben. Ja, wäre sicherlich intuitiver, aber auch ist die richtige Möglichkeit, Langforminstrumente von Benutzern zu akzeptieren. Außerdem akzeptiert es die meisten (wenn nicht alle) der Attribute, die Eingaben tun.

Gruppieren von Eingängen für eine bessere Zugänglichkeit

Obwohl kürzere Formulare eine viel bessere Benutzererfahrung bieten, sind manchmal längere unvermeidlich. In einem solchen Szenario kann das

-Element verwendet werden, um verwandte Eingänge zu enthalten, wobei eine untergeordnete als Titel/Überschrift für das

: verwendet wird

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

nette Dinge, die Dinge

Behinderung von Eingängen

Hinzufügen des deaktivierten Attributs kann ein Eingang (oder ein beliebiges fokussierbares Element) aufgelegt werden, obwohl dies normalerweise über JavaScript angewendet/nicht angewendet wird. So funktioniert es jedoch:

<span><span><span><form</span>></span>
</span>    <span><span><span><input</span> type<span>="text"</span>></span><!-- text input -->
</span>    <span><span><span><input</span> type<span>="text"</span> value<span>="Prefilled value"</span>></span>
</span><span><span><span></form</span>></span>
</span>

und das dazugehörige CSS, falls erforderlich:

<span><span><span><label</span> for<span>="firstName"</span>></span>First name<span><span></label</span>></span>
</span><span><span><span><input</span> id<span>="firstName"</span>></span>
</span>

Wenn Sie jedoch nur einen zusätzlichen visuellen Hinweis hinzufügen möchten, dass der Eingang des Benutzers nicht gültig ist, möchten Sie höchstwahrscheinlich das allgemeine Geschwisterkombinator (~) verwenden. Der folgende Code bedeutet grundsätzlich "die Schaltfläche Senden, die jedem Element mit ungültigen Eingaben folgt". Dies ändert keine Funktionalität, aber wenn wir native HTML-Formularvalidierung nutzen (was automatisch die Deaktivierung/Aktivierung von Subjekt-Fähigkeit behandelt), ist dies in Ordnung:

<span><span><span><input</span> aria-label<span>="First name"</span>></span>
</span>

Deaktivieren einer Eingabe, aber trotzdem die Daten senden

Eine Mischung aus und stellt das folgende Beispiel sicher, dass der Wert nicht geändert werden kann. Der Unterschied besteht darin, dass im Gegensatz zu deaktivierten Readonly -Werten als Formulardaten gesendet werden. und im Gegensatz zu versteckten ist Readonly sichtbar:

<span><span><span><h1</span>></span>Subscribe<span><span></h1</span>></span>
</span><span><span><span><form</span>></span>
</span>    <span><span><span><input</span> aria-label<span>="Email address"</span> placeholder<span>="bruce@wayneenterpris.es"</span>></span>
</span><span><span><span></form</span>></span>
</span>

Inkremente verändern

numerisch-basierte Eingänge haben eine „Spin-Taste“, um den numerischen Wert anzupassen, und akzeptieren auch ein Schrittattribut, das einen alternativen inkrementellen Wert jeder Einstellung bestimmt:

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span>></span>
</span><span><span><span></label</span>></span>
</span>

Styling -Formulare, Beschriftungen und Felder auf Focus

Wir können Focus-Infithin verwenden: zum Stil jedes übergeordnete eines Eingangs, der derzeit Fokus erhält. Höchstwahrscheinlich ist dieses Element die

, oder

Container:

<span><span><span><label</span>></span>
</span>    First name<span><span><span><input</span> placeholder<span>="Bruce"</span>></span>
</span><span><span><span></label</span>></span>
</span>

Senden Sie mehrere Werte mit einer Eingabe

Mehrfach ist für die Datei- und E -Mail -Eingabetypen gültig:

<span><span><span><input</span> type<span>="button"</span>></span>
</span><span><span><span><input</span> type<span>="checkbox"</span>></span>
</span><span><span><span><input</span> type<span>="color"</span>></span>
</span><span><span><span><input</span> type<span>="date"</span>></span>
</span><span><span><span><input</span> type<span>="datetime-local"</span>></span>
</span><span><span><span><input</span> type<span>="email"</span>></span>
</span><span><span><span><input</span> type<span>="file"</span>></span>
</span><span><span><span><input</span> type<span>="hidden"</span>></span> <!-- explained later -->
</span><span><span><span><input</span> type<span>="image"</span>></span>
</span><span><span><span><input</span> type<span>="month"</span>></span>
</span><span><span><span><input</span> type<span>="number"</span>></span>
</span><span><span><span><input</span> type<span>="password"</span>></span>
</span><span><span><span><input</span> type<span>="radio"</span>></span>
</span><span><span><span><input</span> type<span>="range"</span>></span>
</span><span><span><span><input</span> type<span>="reset"</span>></span>
</span><span><span><span><input</span> type<span>="search"</span>></span>
</span><span><span><span><input</span> type<span>="submit"</span>></span> <!-- submits a form -->
</span><span><span><span><input</span> type<span>="tel"</span>></span>
</span><span><span><span><input</span> type<span>="text"</span>></span> <!-- the default -->
</span><span><span><span><input</span> type<span>="time"</span>></span>
</span><span><span><span><input</span> type<span>="url"</span>></span>
</span><span><span><span><input</span> type<span>="week"</span>></span>
</span>

Kurzformformcode

schreiben

Wenn ein Formular nur aus einem Singular , oder besteht, gibt es eine Kurzmethode zum Markieren von HTML -Formularen. Hier ist ein Beispiel:

<span><span><span><form</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

im Gegensatz dazu:

<span><span><span><form</span> method<span>="POST"</span> action<span>="/subscribe"</span> enctype<span>="application/x-www-form-urlencoded"</span> target<span>="_blank"</span>></span>
</span>    ...
<span><span><span></form</span>></span>
</span>

habe ich etwas vermisst?

html ist so viel intuitiver als beispielsweise vor 10 Jahren. Es entwickelt sich ständig weiter und es wird zweifellos mehr zum Thema HTML/CSS -Formen zu gegebener Zeit hinzufügen. Ein Beispiel, das mir in den Sinn kommt, ist das datalistische Element, das im Moment ziemlich fehlerhaft sein kann (insbesondere in Firefox). Aber das beiseite, habe ich etwas vermisst?

Ich werde beenden, dass es einige Aspekte von HTML -Formularen gibt, die ich nicht besprochen habe, weil ihre Verwendung nicht empfohlen wird, einschließlich:

• Autofokus (schlecht für die Zugänglichkeit)
• automatisch vervollständigt (nicht automatisch verwendet, sollte die Wahl des Benutzers sein, nicht die Standardeinstellung)
• AccessKey (schlechte Unterstützung und Zugänglichkeit)
• novalidat (dies ist ohne JavaScript nutzlos)

FAQs über HTML -Formulare

Was ist eine HTML -Form?

Ein HTML -Formular ist ein entscheidendes Element, das zum Sammeln und Sammeln von Benutzereingaben auf einer Webseite verwendet wird. Dadurch können Benutzer Daten eingeben, Auswahlmöglichkeiten treffen und Informationen zur Verarbeitung an einen Server senden.

Wie erstelle ich ein grundlegendes HTML -Formular?

Um ein grundlegendes HTML -Formular zu erstellen, verwenden Sie das Element

und enthalten verschiedene Eingangselemente wie Textfelder, Kontrollkästchen, Optionsfelder und Schaltflächen darin. Das Formular -Tag enthält Attribute wie Aktion und Methode, die angeben, wo die Daten gesendet werden sollen und wie sie verarbeitet werden sollten. Gemeinsame Eingangstypen enthalten Textfelder (), Checkboxes (), Optionszeichen (), Dropdown -Listen () und Schaltflächen ().

Benutzereingabe wird mit serverseitigen Skripten oder clientseitigen Skripten (wie JavaScript) behandelt. Das Aktionsattribut des Formulars gibt die URL an, an der die Daten gesendet werden, und das Methodenattribut definiert die zur Einreichung verwendete HTTP -Methode (GET oder Post). Formen?

Die GET -Methode findet Daten an die URL an, die in der Adressleiste sichtbar ist und für weniger sensible Daten geeignet ist. Die Post -Methode sendet Daten in der Anforderungsbehörde und hält sie vor den Benutzern versteckt und macht sie für vertrauliche Informationen sicherer.

Formulardaten können mithilfe von HTML -Attributen wie erforderlich oder mit JavaScript für eine komplexere Validierung validiert werden. Mit JavaScript können Sie eine Echtzeit-Validierung durchführen und sicherstellen, dass die eingegebenen Daten vor der Einreichung bestimmte Kriterien erfüllen.

Ja, Sie können HTML -Formulare mit CSS stylen. Sie können das Erscheinungsbild von Formularelementen ändern, Layouts anpassen und Stile anwenden, um die allgemeine visuelle Anziehungskraft und die Benutzererfahrung zu verbessern.

Kann ich Dateien mit HTML -Formularen hochladen?

Ja, Sie können Datei -Uploads mit dem Element aktivieren. Auf diese Weise können Benutzer Dateien über das Formular auswählen und senden. Das EngeTePe-Attribut des Formulars sollte für Datei-Uploads auf "Multipart/Form-Data" festgelegt werden.

Das obige ist der detaillierte Inhalt vonEine Anleitung zu HTML & CSS -Formularen (keine Hacks!). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!