Eine Schritt-für-Schritt-Anleitung für den Einstieg in HTML-Formulare

Überblick

HTML-Formulare sind erforderlich, wenn Sie Daten von der Person sammeln möchten, die Ihre Website besucht. Wenn Sie sich beispielsweise für Anwendungen wie Uber, Netflix oder Facebook registrieren / anmelden, geben Sie Informationen wie Name , E-Mail und Passwort über HTML- Formulare ein .

Jetzt lernen wir alle erforderlichen Elemente zum Erstellen eines Formulars.

HINWEIS: Ich habe das Styling bereits mithilfe von CSS hinzugefügt, sodass meine Elemente anders aussehen, aber genauso funktionieren.

Wenn Sie möchten, dass Ihre Elemente wie meine aussehen, finden Sie meine CSS-Datei unter den folgenden Links:

Benutzerdefiniertes CSS: //gist.github.com/abhishekjakhar/493d920a219ed9d88f1846cd31de7751

CSS normalisieren:

//gist.github.com/abhishekjakhar/3a6c25fa61a293b6a56d28f98497808b

Formularelement

Dies ist das erste Element, das wir lernen werden. Dieses Element umschließt alle anderen Elemente, die in unser Formular aufgenommen werden. Dies ist das Formularelement.

Unser Formular übermittelt die Daten nirgendwo, da sie nicht mit einem Server verbunden sind. Um unser Formular mit einem Server zu verbinden und unsere Daten zu verarbeiten, können wir jede serverseitige Sprache wie Node, Python, Ruby oder PHP verwenden. Der Teil der Datenverarbeitung umfasst zwei wichtige Attribute, die an das Formularelement angehängt werden. Werfen wir einen Blick auf diese Attribute.

Attribute:

  1. Aktion: Das Aktionsattribut ist die Webadresse (URL) eines Programms, das die von unserem Formular übermittelten Informationen verarbeitet.
  2. Methode: Dies ist die HTTP-Methode, mit der der Browser das Formular sendet. Die möglichen Werte sind POST und GET.
  • POST - Daten aus dem Hauptteil des Formulars werden an den Server gesendet.
  • GET - Daten werden innerhalb der URL gesendet und Parameter werden durch ein Fragezeichen getrennt.
Hinweis: Sie können keine Formulare in einem anderen Formular verschachteln lassen . Das heißt, Sie können kein Element in einem anderen Element haben.

Eingabeelement

Das Eingabeelement ist das am häufigsten verwendete Formularelement. Es wird verwendet, um ein Textfeld zu erstellen, in das der Benutzer einige Informationen eingeben kann, z. B. E-Mail , Passwort usw.

Lassen Sie uns ein Textfeld erstellen, in das der Benutzer seinen Namen eingeben kann.

Hinweis: Das Eingabeelement ist ein selbstschließendes Tag, sodass Sie kein schließendes Tag eingeben müssen, das mit dem öffnenden Tag übereinstimmt.

Ich habe dem obigen Eingabe-Tag drei Attribute hinzugefügt. Schauen wir uns jeden einzelnen im Detail an.

Art

Das type- Attribut gibt an, welche Art von Eingabe wir wünschen. Wenn wir einen Wert von geben Text zu dem Typ - Attribute, als wir hier , was bedeuten, dass der Wert, den wir in das Eingabefeld eingeben ist vom Typ Text. Es gibt viele mögliche Werte für dieses bestimmte Attribut. Einige mögliche Werte sind E-Mail, Telefon für Telefon und Passwort usw.

Beispiel: Wenn Sie sich bei einem Ihrer Konten (Amazon / Netflix) anmelden, müssen Sie zwei Dinge eingeben: E-Mail und Passwort . In diesem speziellen Fall wird also das Eingabeelement verwendet. Das type- Attribut wird mit dem Wert von E-Mail bzw. Passwort angegeben.

Ich würde

Das ID-Attribut ist nicht obligatorisch, es ist jedoch eine gute Idee, eines hinzuzufügen. In einigen Fällen ist dies hilfreich, um Elemente mit CSS / JavaScript auszurichten. Das ID - Attribut wird hinzugefügt , so dass wir assoziieren können Etiketten auf spezifische Form Kontrollen .

Name

Das Namensattribut ist erforderlich. Wenn ein Formular an den serverseitigen Code gesendet wird, kann der Server die Formulardaten verstehen und die Werte entsprechend verarbeiten.

Platzhalter

Dies ist ein kurzer Hinweis, der im Eingabefeld angezeigt wird, bevor der Benutzer einen Wert eingibt. Wenn der Benutzer das Eingabefeld eingibt, verschwindet der Platzhalter.

Mal sehen, wie einige andere grundlegende Eingabeelemente aussehen.

Hinweis: Die Verwendung unterschiedlicher Werte für das Typattribut führt zu unterschiedlichen Ergebnissen. Sie können beispielsweise Eingaben vom Typ E-Mail, Text oder Passwort usw. vornehmen. Alle zeigen ein etwas anderes Verhalten, das Sie unten sehen werden.

Mehrere Eingabeelemente (Text, E-Mail, Passwort)

Mehrfacheingabeelement (Text, E-Mail, Passwort)

Textarea-Element

Manchmal reicht eine einzelne Textzeile nicht aus und ein einfaches Eingabeelement funktioniert nicht. Einige Websites verfügen beispielsweise über ein Kontaktformular, über das Benutzer ihre Anfragen oder Nachrichten eingeben können. In diesen Fällen ist es am besten, das textareaElement zu verwenden.

Das ea> ist kein selbstschließendes Tag, daher müssen wir sowohl das öffnende als auch das schließende Tag eingeben. ()

Attribute:

  • id: Wie oben im Element erwähnt.
  • Name: Wie oben im Element erwähnt.
  • Spalten: Gibt die sichtbare Breite eines Textbereichs an.
  • Zeilen: Gibt die sichtbare Anzahl von Zeilen in einem Textbereich an.

Original text


Sie können sehen, dass wir im Textbereich mehrere Zeilen eingeben können. Die Größe eines Textbereichs kann vom Benutzer geändert werden. In der obigen Abbildung sehen Sie, dass ich die Größe des Textbereichs verändere.

Hinweis: In den meisten Browsern kann die Größe des Textbereichselements geändert werden.

Schaltflächenelement

Das Schaltflächenelement ist eines der wichtigsten Formularelemente. Ohne eine Schaltfläche können Sie kein Formular zur Verarbeitung an den Server senden.

Das Schaltflächenelement akzeptiert das Attribut type. Dieses Attribut akzeptiert drei Werte: Senden , Zurücksetzen und Schaltfläche .

Attribute:

  • Typ =“reset“: Es wird klar , alle die Formulardaten , wenn es angeklickt wird .
  • type = ”button”: Es hat kein Standardverhalten und wird hauptsächlich mit JavaScript verwendet, um es für benutzerdefiniertes Verhalten zu programmieren .
  • type = ”submit”: Das Standardverhalten des Submit-Typs besteht, wie der Name schon sagt, darin, das Formular zu senden und alle Daten an den Server zu senden.

Beschriftungselement

Derzeit kann der Benutzer nicht feststellen, welche Formularsteuerung was bewirkt. Es gibt keine Möglichkeit zu wissen, wo Sie die E-Mail eingeben und wo Sie das Passwort eingeben werden. Das Formular sieht sehr unvollständig und unordentlich aus.

Wir können jedes unserer Formularsteuerelemente mit dem Label-Element beschriften.

Das am häufigsten verwendete Attribut mit einer Bezeichnung ist für.

Attribute:

  • for: Das Attribut for ordnet die Beschriftung einem bestimmten Formularelement zu. Die Art und Weise, wie es übereinstimmt, ist nach ID . Wie Sie im obigen Beispiel sehen können, ist der Wert des ID- Attributs, das dem Eingabeelement zugewiesen wird, E-Mail. Der Wert des for- Attributs, das dem label-Element zugewiesen wird, ist ebenfalls E-Mail, sodass beide miteinander verknüpft sind.
Hinweis: Wenn wir auf die Beschriftung klicken, erhalten wir automatisch den Fokus auf das Eingabefeld, das der Beschriftung zugeordnet ist. Dies ist ein Standardverhalten.

Jetzt sieht unsere Form sehr gut aus?

Wählen Sie Menüs

Wenn Sie ein Formular erstellen, möchten Sie manchmal nicht, dass der Benutzer den Text eingeben kann. Vielleicht möchten Sie, dass sie aus einigen von Ihnen bereitgestellten voreingestellten Optionen auswählen .

Immer wenn Sie eine Liste von Optionen haben, die länger als beispielsweise vier oder fünf Dinge ist, ist es am besten, das Auswahlmenü zu wählen, da dies Platz spart.

Nehmen wir an, unser Formular richtet sich an Studierende, die eine Zulassung an einer Universität anstreben. Wir möchten den Studenten ermöglichen, aus einer vordefinierten Liste von Universitätsprogrammen auszuwählen.

Das Auswahlmenüelement erfolgt durch Öffnen und Schließen ct> tag.

ct> - Das Auswahlelement zeigt ein Dropdown- Menü mit auswählbaren Optionen an . Das select-Element macht von sich aus nichts. Diese Form Element tatsächlich benötigt zusätzliche Elemente in der es, genau lik e

    ele ment Bedürfnisse
  • Elemente. Die Elemente, die wir in ein ausgewähltes Element einfügen, werden als Optionselemente bezeichnet.

    Attribute:

    • Name: Wie oben im Element erwähnt.

    on> - Das Optionselement stellt eine der Auswahlmöglichkeiten dar, die ein Benutzer in einem Auswahlmenü auswählen kann . Die & l t; Option> Elem ent verwendet ein Attri bute c ALLED Wert.

    Attribute:

    • Wert: Wenn Sie ein Formular an serverseitigen Code senden, ist jedem Formularelement ein Wert für Texteingaben und Textbereiche zugeordnet. Dieser Wert ist unabhängig davon, was der Benutzer in das Feld eingibt. Da wir jedoch diese vordefinierten Optionen erstellen, müssen wir angeben, wie der Wert beim Senden aussehen soll. Daher verwenden wir das value- Attribut, um die Werte für vordefinierte Optionen anzugeben.

    Jetzt haben wir die Bezeichnung Kurse auswählen mit dem soeben erstellten Auswahlmenü. Jetzt können wir unsere Liste auch mit dem in logischen Gruppen organisierenup> Element.

    Attribute:

    • label: Der Name der Optionsgruppe. Im folgenden Beispiel wurde unsere Liste der Optionen in zwei Gruppen mit der Bezeichnung "Engineering and Management" unterteilt.

    Im folgenden Beispiel

    Radio Knöpfe

    Ausgewählte Menüs eignen sich hervorragend, wenn Sie viele Optionen haben. Wenn Sie 5 oder weniger Optionen haben, ist es besser, Optionsfelder zu verwenden.

    Der Unterschied zwischen Auswahlmenü und Optionsfeld besteht darin, dass Optionsfelder alle Optionen gleichzeitig anzeigen. Wie das Auswahlmenü kann der Benutzer nur eines davon auswählen.

    Attribute:

    • Name: Wie oben im Element erwähnt.
    • value: Da wir diese vordefinierten Optionen erstellen, müssen wir angeben, wie der Wert beim Senden aussehen soll. Daher verwenden wir das value- Attribut, um die Werte für vordefinierte Optionen anzugeben.
    Hinweis: Wenn Sie eine Option auswählen und dann versuchen, eine andere Option auszuwählen, wird die vorherige Option deaktiviert. Die Art und Weise , dass sie weiß , dass zu tun ist , weil wir die haben Namen Attribut genau gleich. Es ist also bekannt, dass diese beiden Optionsfelder Teil derselben Gruppe sind. Hinweis: Der Name sollte identisch sein, wenn Optionsfelder Teil derselben Optionsfeldgruppe sein sollen.

    Kontrollkästchen

    Manchmal haben Sie möglicherweise eine Gruppe vordefinierter Optionen. Sie möchten, dass der Benutzer mehrere Optionen auswählen kann und nicht nur eine. Hier sind Kontrollkästchen nützlich.

    Attribute:

    • Name: Wie oben im Element erwähnt.
    • value: Da wir diese vordefinierten Optionen erstellen, müssen wir angeben, wie der Wert beim Senden aussehen soll. Daher verwenden wir das value- Attribut, um die Werte für vordefinierte Optionen anzugeben.
    • markiert: Standardmäßig ist eine Checkbox-Eingabe deaktiviert. Sie können den Standardstatus auf "Überprüft" setzen, indem Sie das Attribut " Überprüft" verwenden . Denken Sie daran, dass dies ein boolesches Attribut ist.

    Im folgenden Beispiel habe ich das Etikett für jede einzelne Option verwendet. Ich habe das Kontrollkästchen und ein Label mit dem Attribut for des Labels und dem Attribut id des Kontrollkästchens verbunden .

    Hinweis: Es kann schwierig sein, auf ein kleines Kontrollkästchen zu klicken. Es wird empfohlen, ein Element um das Kontrollkästchen zu wickeln. Wenn wir auf das Etikett klicken, wird auch unser Kontrollkästchen aktiviert oder deaktiviert. Ich habe es unten nicht getan, aber Sie können es tun, um die UX besser zu machen .

    Unterschied zwischen Kontrollkästchen und Optionsfeld

    1. Das Kontrollkästchen kann eigenständig vorhanden sein , während Optionsfelder nur als Gruppe angezeigt werden können (mindestens 2 Optionsfelder sollten vorhanden sein).
    2. Das Aktivieren des Kontrollkästchens ist optional , das Auswählen eines der Optionsfelder ist jedoch obligatorisch .

    Das vollständige Formular

    Wir haben viele HTML-Formularelemente kennengelernt und das Wesentliche behandelt.

    Mach dir keine Sorgen, alles auswendig zu lernen. Fast kein professioneller Webentwickler kann jedes Attribut oder Element benennen. Was wichtiger als das Auswendiglernen ist, ist zu lernen, wie Sie Dinge in der Dokumentation nachschlagen, wenn Sie sie benötigen.

    Sie können versuchen, Ihr eigenes CSS hinzuzufügen, damit dieses Formular so aussieht, wie Sie es möchten.

    Weitere Informationen zu Formularen finden Sie unter dem unten angegebenen Link

    HTML-Formulare

    Dieses Modul enthält eine Reihe von Artikeln, mit denen Sie HTML-Formulare beherrschen können. HTML-Formulare sind ein sehr leistungsfähiges Werkzeug für… developer.mozilla.org

    Ich hoffe, Sie fanden diesen Beitrag informativ und hilfreich. Ich würde mich über Ihr Feedback freuen!

    Danke fürs Lesen!