Maison > interface Web > tutoriel HTML > le corps du texte

Contrôles de formulaire HTML

WBOY
Libérer: 2024-09-04 16:14:29
original
696 Les gens l'ont consulté

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ôles de formulaire HTML

Contrôles de formulaire HTML

  • 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.

Contrôles de formulaire HTML

Contrôles de formulaire HTML 

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é.

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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.

Contrôles de formulaire HTML

Contrôles de formulaire HTML

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!

Étiquettes associées:
source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal