HTML-Formularsteuerelemente

HTML ist die Auszeichnungssprache für die Webseitenerstellung. Es definiert die Struktur und das Verhalten der Webseite. HTML besteht aus Tags und Elementen, die bei der Strukturierung der Webseiten helfen. Diese Elemente können in einem Formular gruppiert werden, um auf benutzerfreundliche Weise Daten von einem Benutzer zu sammeln. Beachten Sie jedoch, dass HTML ein zustandsloses Protokoll ist, das heißt, es kann nichts speichern und Sie verlieren die Daten bei einer Seitenaktualisierung.

HTML-Formularsteuerung

Es gibt verschiedene Arten der Formularsteuerung, die im HTML definiert sind; Diese Steuerelemente sind dafür verantwortlich, die Benutzereingaben in einer bestimmten Weise zu akzeptieren. Werfen wir einen Blick auf die verschiedenen Arten verfügbarer Formularsteuerelemente in HTML.

1) Eingabetextsteuerung

Eingabetextsteuerelemente werden verwendet, um Benutzerdaten als Freitext zu erfassen. Auf der Webseite wird ein rechteckiges Feld angezeigt, in das Benutzer die Daten eingeben können.

Es gibt verschiedene Arten von Eingabetextsteuerelementen, die in HTML-Formularen verwendet werden können. Werfen wir einen Blick auf die verschiedenen Arten von Eingabetextsteuerelementen.

• Einzeilige Eingabetextsteuerung

Dadurch kann der Benutzer nur eine einzige Datenzeile eingeben. Ein typisches Beispiel für solche Eingabetextsteuerelemente ist die Eingabe des Namens, des Suchfelds, der Stadt usw.

• Mehrzeilige Eingabetextsteuerung

Dieser Eingabesteuerungstyp ermöglicht es dem Benutzer, Daten mehrerer Zeilen einzugeben. Die typische Verwendung solcher Eingabesteuerelemente ist für Kommentare, Adressen, Beschreibungen usw.

 

Hier geben Zeilen die Anzahl der Zeilen im Textbereich an und Spalte gibt die Anzahl der Spalten an.

• Passwort-Eingabekontrolle

Wie der Name schon sagt, wird dies normalerweise für das Passwortfeld verwendet. Dies funktioniert auf die gleiche Weise wie das Eingabetextfeld, der Text wird jedoch aus Sicherheitsgründen maskiert.

2) Eingabetyp Senden

Wenn der Eingabetyp „Senden“ ist, führt es die in der Formularaktion definierte Aktion aus und sendet die Formulardaten an den Server.

Hier werden die Benutzernamen- und Passwortwerte beim Schaltflächenklickereignis der Schaltfläche „Senden“ an den Server übermittelt. Die Aktion im Formular ist die Servermethode, die die Eingabe akzeptiert.

3) Eingangstyp Radio

Optionsfelder werden verwendet, wenn Sie erwarten, dass Benutzer Daten als booleschen Wert eingeben, oder wenn Sie erwarten, dass von mehreren Optionen nur eine Eingabe wahr ist. Ein häufiger Anwendungsfall für Optionsfelder ist die Bestimmung des Geschlechts, des Mitarbeitertyps (regulär/befristet) usw.

4) Kontrollkästchen Eingabetyp

Über ein Kontrollkästchen kann der Benutzer auswählen, welche Informationen in seinem Fall wahr sind. Dies ist eine sehr bequeme Möglichkeit, die Daten zu übernehmen, wenn die mögliche Eingabe bereits bekannt ist.

Wenn Sie beispielsweise die Art der Versicherung erfassen möchten, die eine Person besitzt, können Sie dies einfach über die Kontrollkästchen tun, da die Optionen dann begrenzt wären.

5) Dropdown-Liste „Eingabetyp“

Die Dropdown-Liste ermöglicht es dem Benutzer, eine Option aus mehreren möglichen Optionen auszuwählen. Dies ist eine sehr benutzerfreundliche Möglichkeit, die Details vom Benutzer zu erfahren, da sie eine umfassende Liste möglicher Optionen bietet, die dem Benutzer dabei helfen, die für ihn am besten geeignete Option zu finden.

Zum Beispiel ein Dropdown-Menü, um die Stadt aufzulisten, zu der ein Mitarbeiter gehören kann

6) Eingabetyp Optgroup

Optgroup funktioniert auf ähnliche Weise wie bei der Dropdown-Liste; Der einzige Unterschied besteht darin, dass Sie mit der Optgroup bestimmte Optionen logisch unter einem Dach gruppieren können. Es hilft dem Benutzer, die relevante Option mithilfe des Optgroup-Labels schnell zu identifizieren.

Zum Beispiel Dropdown-Listen, um die Städte der verschiedenen Bundesstaaten in Indien nach Bundesstaaten gruppiert aufzulisten.

7) Fieldset

Fieldset is another useful tag in the Html form that lets the developer logically group certain controls under one legend; this helps the developer give the User clear instruction on what to expect in this section.

For example, the fieldset for the login page.

8) HTML output Tag

This output tag is introduced in HTML5. It let you display the output of a calculation instantly. This is quite useful when the user needs to do a calculation instantly and see the results. A typical example of such a cases is when the user wants to check the sum of all the items present in the cart.

In the example above, we have defined the item price range as 0 to 100 and can be changed on runtime, the other text box, which has a value of 12 in it is the tax levied on that item; it can also be changed on runtime. The output result 58 is the sum of both values.

Note: This tag is not supported on Edge 12 or Internet Explorer of an earlier version.

9) Input type Color

It is often required in the form to just show the color instead of any text. Input type color in HTML 5 will let you do that. It shows the color which you want to display in the form. Typical scenario’s where it is being used is to show the status of a project or a phase.

Note: color is not supported in certain versions of Internet Explorer and Edge.

10) Input type Date

Input type date is commonly used where the User expects a date type field as input; it could be anything like a Date of Birth, Hiring date, termination date, etc. It is introduced in HTML 5, and the date format varies a little with the change of browser.

Conclusion

• With the introduction of HTML 5, there has been a tremendous increase in the number of HTML controls being supported. These HTML form controls can be given various effects and colors with the help of CSS 3 and JavaScript / jQuery / Angular JS.
• In this article, we have covered all the commonly used HTML form controls. There are many controls such as hidden, reset, week, URL, time, email, file, DateTime-local, image, tel that has not been covered in this article. It is very important to check the browser compatibility of these controls before implementing this in the project as many browser version doesn’t support HTML 5 form controls.

Das obige ist der detaillierte Inhalt vonHTML-Formularsteuerelemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!