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.

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.

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!