En HTML, c'est un élément important du formulaire HTML. L'attribut 'type' de l'élément d'entrée peut être de différents types, ce qui définit le champ d'information. Tel que donne une zone de texte.

Voici une liste de tous les types d’éléments HTML.

HTML5 a ajouté de nouveaux types sur l'élément. Voici la liste des types d’éléments HTML5

Voici la description des types d'éléments avec des exemples.

1. :

Les éléments de type « texte » sont utilisés pour définir un champ de texte de saisie sur une seule ligne.

Exemple:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Sortir:

Saisissez le type de « texte » :

Le 'texte' field définit un champ de texte de saisie sur une seule ligne.

Note: La longueur maximale par défaut des caractères est de 20.

2. :

L'élément de type « mot de passe » permet à un utilisateur de saisir le mot de passe en toute sécurité dans une page Web. Le texte saisi dans le champ mot de passe est converti en '*' ou '.', afin qu'il ne puisse pas être lu par un autre utilisateur.

Exemple:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Sortir:

Saisissez le type de « mot de passe » :

Le 'mot de passe' field définit un champ de mot de passe de saisie sur une seule ligne pour saisir le mot de passe en toute sécurité.

3. :

L'élément de type 'submit' définit un bouton de soumission pour soumettre le formulaire au serveur lorsque l'événement 'click' se produit.

Exemple:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Sortir:

Saisissez le type « soumettre » :

Après avoir cliqué sur le bouton Soumettre, cela soumettra le formulaire au serveur et redirigera la page vers action valeur. Nous en apprendrons plus sur l'attribut « action » dans les chapitres suivants.

4. :

Le type « réinitialisation » est également défini comme un bouton, mais lorsque l'utilisateur effectue un événement de clic, il réinitialise par défaut toutes les valeurs saisies.

Exemple:

 User id: Password: <br> <br> 

Sortir:

Saisissez le type de « réinitialisation » :

Essayez de modifier les valeurs d'entrée de l'identifiant utilisateur et du mot de passe, puis lorsque vous cliquez sur réinitialiser, les champs de saisie seront réinitialisés avec les valeurs par défaut.

5. :

Le type 'radio' définit les boutons radio, qui permettent de choisir une option parmi un ensemble d'options associées. À la fois, une seule option de bouton radio peut être sélectionnée à la fois.

Exemple:

Veuillez sélectionner votre couleur préférée

types de données Java

Sortir:

Type d'entrée 'radio'

Veuillez sélectionner votre couleur préférée

6. :

Le type « case à cocher » est affiché sous forme de cases carrées qui peuvent être cochées ou décochées pour sélectionner les choix parmi les options données.

Remarque : Les boutons « radio » sont similaires aux cases à cocher, mais il existe une différence importante entre les deux types : les boutons radio permettent à l'utilisateur de sélectionner une seule option à la fois, tandis que la case à cocher permet à l'utilisateur de sélectionner de zéro à plusieurs options à la fois. .

Exemple:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Sortir:

Saisissez le type de « case à cocher »

Formulaire d'inscription

Veuillez sélectionner vos sports préférés

7. :

Le type « bouton » définit un simple bouton-poussoir, qui peut être programmé pour contrôler fonctionnellement n'importe quel événement tel qu'un événement de clic.

Remarque : cela fonctionne principalement avec JavaScript.

Exemple:

Sortir:

Saisissez le type de « bouton ».

Cliquez sur le bouton pour voir le résultat :

Remarque : Dans l'exemple ci-dessus, nous avons utilisé « l'alerte » de JS, que vous apprendrez dans notre tutoriel JS. Il est utilisé pour afficher une fenêtre pop.

8. :

L'élément de type « fichier » est utilisé pour sélectionner un ou plusieurs fichiers dans le stockage de la machine utilisateur. Une fois que vous avez sélectionné le fichier et après l'avoir soumis, ce fichier peut être téléchargé sur le serveur à l'aide du code JS et de l'API de fichier.

Exemple:

 Select file to upload: 

Sortir:

Saisissez le type de « fichier ».

Nous pouvons choisir n'importe quel type de fichier jusqu'à ce que nous ne le précisions pas ! Le fichier sélectionné apparaîtra à côté de l'option « Choisir un fichier »

9. :

Le type 'image' est utilisé pour représenter un bouton de soumission sous forme d'image.

Exemple:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

Élément de types HTML5 nouvellement ajouté

1. :

Le type 'couleur' ​​permet de définir un champ de saisie qui contient une couleur. Il permet à un utilisateur de spécifier la couleur via l'interface visuelle des couleurs d'un navigateur.

Remarque : Le type « couleur » prend uniquement en charge la valeur de couleur au format hexadécimal et la valeur par défaut est #000000 (noir).

Exemple:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Sortir:

Types de « couleur » d’entrée :

Note: La valeur par défaut du type « couleur » est #000000 (noir). Il ne prend en charge que la valeur de couleur au format hexadécimal.

2. :

L'élément de type 'date' génère un champ de saisie, qui permet à un utilisateur de saisir la date dans un format donné. Un utilisateur peut saisir la date par champ de texte ou par interface de sélecteur de date.

Exemple:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Sortir:

Saisissez le type « date »

3. :

L'élément de type « datetime-local » crée un champ d'entrée qui permet à un utilisateur de sélectionner la date ainsi que l'heure locale en heures et minutes sans informations de fuseau horaire.

Exemple:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Sortir:

Saisissez le type « datetime-local »

4. :

Le type « email » crée un champ d'entrée qui permet à un utilisateur de saisir l'adresse e-mail avec validation de modèle. Les multiples attributs permettent à un utilisateur de saisir plusieurs adresses e-mail.

Exemple:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Sortir:

Saisissez le type « e-mail »

Note: L'utilisateur peut également saisir plusieurs adresses e-mail séparées par des virgules ou des espaces comme suit :

5. :

Le type « mois » crée un champ de saisie qui permet à un utilisateur de saisir facilement le mois et l'année au format « MM, AAAA », où MM définit la valeur du mois et AAAA définit la valeur de l'année. Nouveau

Exemple:

 Enter your Birth Month-year: 

Sortir:

Saisissez le type de « mois » :

6. :

Le numéro de type d'élément crée un champ d'entrée qui permet à un utilisateur de saisir la valeur numérique. Vous pouvez également restreindre la saisie d'une valeur minimale et maximale à l'aide des attributs min et max.

Exemple:

 Enter your age: 

Sortir:

Saisissez le type de « numéro »

Note: Cela permettra de saisir un nombre compris entre 50 et 80. Si vous souhaitez saisir un nombre autre qu'une plage, une erreur s'affichera.

7. :

L'élément de type 'url' crée un champ d'entrée qui permet à l'utilisateur de saisir l'URL.

Exemple:

 Enter your website URL: <br> 

Sortir:

Saisissez le type « URL »

8. :

Le type semaine crée un champ de saisie qui permet à un utilisateur de sélectionner une semaine et une année dans le calendrier déroulant sans fuseau horaire.

Exemple:

 <b>Select your best week of year:</b> <br> <br> 

Sortir:

Saisissez le type de « semaine »

9. :

Le type « recherche » crée un champ d'entrée qui permet à un utilisateur de saisir une chaîne de recherche. Ceux-ci sont fonctionnellement symétriques au type de saisie de texte, mais peuvent être stylisés différemment.

Exemple:

 Search here: 

Sortir:

Saisissez le type de « recherche »

dix. :

L'élément de type ?tel? crée un champ de saisie pour saisir le numéro de téléphone. Le type « tel » n'a pas de validation par défaut telle que l'e-mail, car le modèle de numéro de téléphone peut varier dans le monde entier.

Exemple:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Sortir:

Saisissez le type de « tél »

Note: Ici, nous utilisons deux attributs qui sont « modèle » et « obligatoire » qui permettront à l'utilisateur de saisir le numéro dans un format donné et il est obligatoire de saisir le numéro dans le champ de saisie.