HTML est le langage de balisage pour la création de pages Web. Il définit la structure et le comportement de la page Web. HTML se compose de balises et d’éléments qui aident à structurer les pages Web. Ces éléments peuvent être regroupés au sein d'un formulaire pour collecter les données d'un Utilisateur de manière conviviale. Cependant, notez que HTML est un protocole sans état, ce qui signifie qu'il ne peut rien stocker et que vous perdrez les données lors d'une actualisation de page.

Contr?le de formulaire HTML

Il existe différents types de contr?les de formulaire définis dans le code HTML?; ces contr?les sont chargés d’accepter la saisie de l’utilisateur d’une manière spécifiée. Jetons un coup d'?il aux différents types de contr?les de formulaire disponibles en HTML.

1) Contr?le du texte de saisie

Les contr?les de texte de saisie sont utilisés pour collecter les données utilisateur sous forme de texte libre. Sur la page Web, cela formera une bo?te rectangulaire dans laquelle les utilisateurs pourront saisir les données.

Il existe différents types de contr?les de texte de saisie qui peuvent être utilisés dans les formulaires HTML. Jetons un coup d'?il aux différents types de contr?les de texte de saisie.

• Contr?le de texte de saisie sur une seule ligne

Cela permet à l'utilisateur de saisir une seule ligne de données. Un exemple typique de tels contr?les de saisie de texte consiste à saisir le nom, le champ de recherche, la ville, etc.

• Contr?le de texte de saisie multiligne

Ce type de contr?le de saisie permet à l'utilisateur de saisir les données de plusieurs lignes. L'utilisation typique de ces contr?les de saisie concerne les commentaires, les adresses, les descriptions, etc.

?

Ici, les lignes indiquent le nombre de lignes dans la zone de texte, et col indique le nombre de colonnes.

• Contr?le de saisie du mot de passe

Comme son nom l'indique, ceci est généralement utilisé pour le champ du mot de passe. Cela fonctionne de la même manière que le champ de saisie de texte, mais le texte est masqué pour des raisons de sécurité.

2) Soumettre le type d'entrée

Lorsque le type d'entrée est de soumission, il exécute l'action définie dans l'action de formulaire et envoie les données du formulaire au serveur.

Ici, les valeurs du nom d'utilisateur et du mot de passe seront soumises au serveur lors de l'événement de clic sur le bouton Soumettre. L'action dans le formulaire est la méthode serveur qui accepte l'entrée.

3) Type d'entrée Radio

Les boutons radio sont utilisés lorsque vous vous attendez à ce que les utilisateurs remplissent les données sous forme de valeur booléenne, ou que vous attendez qu'une seule entrée soit vraie parmi plusieurs options. Un cas d'utilisation courant des boutons radio est la détermination du sexe, le type d'employé (régulier/temporaire), etc.

4) Case à cocher Type d'entrée

Une case à cocher permet à l'Utilisateur de sélectionner les informations qui sont vraies dans son cas. C'est un moyen très pratique d'accepter les données lorsque la saisie possible est déjà connue.

Par exemple, si vous souhaitez conna?tre le type d'assurance qu'un individu détient, vous pouvez facilement le faire avec les cases à cocher car les options seraient limitées.

5) Liste déroulante Type d'entrée

La liste déroulante permet à l'utilisateur de sélectionner une option parmi plusieurs options possibles. Il s'agit d'un moyen très convivial d'obtenir des détails auprès de l'utilisateur car il fournit une liste exhaustive des options possibles qui aident l'utilisateur à identifier l'option qui lui convient le mieux.

Par exemple, liste déroulante pour lister la ville à laquelle un employé peut appartenir

6) Groupe d'options de type d'entrée

Optgroup fonctionne de la même manière que la liste déroulante?; la seule différence est que optgroup vous permet de regrouper logiquement certaines options sous un même parapluie. Il aide l'utilisateur à identifier rapidement l'option pertinente à l'aide de l'étiquette optgroup.

Par exemple, des listes déroulantes pour lister les villes des différents états de l'Inde regroupées par états.

7) Feldsatz

Fieldset ist ein weiteres nützliches Tag im HTML-Formular, mit dem der Entwickler bestimmte Steuerelemente logisch unter einer Legende gruppieren kann. Dies hilft dem Entwickler, dem Benutzer klare Anweisungen zu geben, was ihn in diesem Abschnitt erwartet.

Zum Beispiel das Feldset für die Anmeldeseite.

8) HTML-Ausgabe-Tag

Dieses Ausgabe-Tag wird in HTML5 eingeführt. Damit k?nnen Sie die Ergebnisse einer Berechnung sofort anzeigen. Dies ist sehr nützlich, wenn der Benutzer sofort eine Berechnung durchführen und die Ergebnisse sehen muss. Ein typisches Beispiel für einen solchen Fall ist, wenn der Benutzer die Summe aller im Warenkorb vorhandenen Artikel überprüfen m?chte.

Im obigen Beispiel haben wir die Preisspanne des Artikels als 0 bis 100 definiert und k?nnen zur Laufzeit ge?ndert werden. Das andere Textfeld, das den Wert 12 enth?lt, ist die auf diesen Artikel erhobene Steuer; Es kann auch zur Laufzeit ge?ndert werden. Das Ausgabeergebnis 58 ist die Summe beider Werte.

9) Eingabetyp Farbe

Oft ist es im Formular erforderlich, nur die Farbe anstelle von Text anzuzeigen. Mit der Eingabetypfarbe in HTML 5 k?nnen Sie dies tun. Es zeigt die Farbe an, die Sie im Formular anzeigen m?chten. Typische Einsatzszenarien sind die Anzeige des Status eines Projekts oder einer Phase.

10) Eingabetyp Datum

Der Eingabetyp ?Datum“ wird h?ufig verwendet, wenn der Benutzer ein Feld vom Typ ?Datum“ als Eingabe erwartet. Es kann sich um ein Geburtsdatum, ein Einstellungsdatum, ein Kündigungsdatum usw. handeln. Es wird in HTML 5 eingeführt und das Datumsformat variiert ein wenig mit der ?nderung des Browsers.

Fazit

• Mit der Einführung von HTML 5 hat die Anzahl der unterstützten HTML-Steuerelemente enorm zugenommen. Diese HTML-Formularsteuerelemente k?nnen mithilfe von CSS 3 und JavaScript / jQuery / Angular JS mit verschiedenen Effekten und Farben versehen werden.
• In diesem Artikel haben wir alle h?ufig verwendeten HTML-Formularsteuerelemente behandelt. Es gibt viele Steuerelemente wie ?Ausblenden“, ?Zurücksetzen“, ?Woche“, ?URL“, ?Zeit“, ?E-Mail“, ?Datei“, ?DateTime-Local“, ?Bild“ und ?Tel“, die in diesem Artikel nicht behandelt wurden. Es ist sehr wichtig, die Browserkompatibilit?t dieser Steuerelemente zu überprüfen, bevor Sie sie in das Projekt implementieren, da viele Browserversionen HTML 5-Formularsteuerelemente nicht unterstützen.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!