Contrôles de formulaire HTML

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.

Hinweis: Dieses Tag wird auf Edge 12 oder Internet Explorer einer früheren Version nicht unterstützt.

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.

Hinweis: Farbe wird in bestimmten Versionen von Internet Explorer und Edge nicht unterstützt.

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!