ajouter des inputs basiques dans un formulaires HTML- TutoForYou

Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre comment ajouter des inputs basiques dans un formulaires HTML.

accès rapide

La démo
Qu’est ce qu’un input
Syntaxe
Input : Text
Input : Password
Input : Tel
Input : Number
Input : Url
Input : Email
Input : search
Input : hidden

La démo

mettre ici la vidéo de la démonstration

Qu’est ce qu’un Input ?

Le tag<input> est un champs que nous pouvons insérer dans un formulaire HTML afin de recueillir les informations d’une entrée effectuée par l’utilisateur.

L’input est utilisé dans les cadres de l’élément <form>, en spécifiant les champs, où les utilisateurs peuvent saisir les données.

Syntaxe

Nous avons plusieurs inputs que nous pouvons insérer dans un formulaire HTML à savoir : le type texte, bouton radio, case à cocher, champ pour saisir un mot de passe, etc.).

Pour spécifier le type du champ que nous voulons ajouter, nous pouvons utiliser l’attribut TYPE.

<INPUT TYPE="…" NAME="…" >

Pour lier un texte à un élément spécifique, nous pouvons utiliser le tag <label>, qui définit une étiquette de texte pour celui-ci.

L’étiquette est un texte ordinaire, en cliquant sur lequel l’utilisateur peut sélectionner l’élément de formulaire. Cela facilite l’utilisation du formulaire, car il n’est pas toujours pratique d’entrer dans les éléments du formulaire avec le curseur.

<label>Message</label>

Input : Text

L’input de type Text c’est un champ à saisir dans le quels l’utilisateur est amener de saisir du texte dans une seule ligne.

Dans ce type d’input, nous pouvons trouver divers attribut à ajouter à savoir :

L’attribut name : permet de donner un nom au champ ; ce nom servira à récupérer la saisie du visiteur au cours du traitement.
L’attribut value : permet quant à lui de pré-remplir le champ avec un texte par défaut.
L’attribut placeholder : L’utilisateur voit un indice dans le champ de saisie. Il disparaît lorsque l’utilisateur commence à saisir des données ou lorsque le champ reçoit le focus.
L’attribut required: Indique que le champ de saisie doit être rempli avant de soumettre le formulaire.

Ci-dessous un exemple de formulaire contenant un input de type Text :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ma page web</title>
</head>
<body>
  <h1>Formulaire </h1>
  <form>
    <label>Nom:</label> 
    <input  type="text" name="fname" placeholder="Entrer votre nom"/>  </form>
</body>
</html>

Input : Password

Le type password est un champ “ crypté ” qu’on peut ajouter à un formulaire. C’est à dire , au cours de la saisie , les lettres sont remplacées par des étoiles ou des points. Ce type de champ est utile pour la saisie des mots de passe.

Ci-dessous un exemple de formulaire contenant un input de type password :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ma page web</title>
</head>
<body>
  <h1>Formulaire </h1>
  <form>
    <label>Mot de passe:</label> 
        <input  type="password" name="Mot de pass" placeholder="Entrer votre mot de pass"/>

  </form>
</body>
</html>

Input : Tel

Ce type d’input permet la saisie d’un texte indiquant que nous attendons la saisie d’un numéro de téléphone. Sur les navigateurs mobiles, un clavier adapté s’affiche lorsqu’on doit remplir ce champ .

Ci-dessous un exemple de formulaire contenant un input de type tel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ma page web</title>
</head>
<body>
  <h1>Formulaire </h1>
  <form>
    <label>Numéro de téléphone :</label> 
    <input  type="tel" name="Num tel" placeholder="Entrer votre numéro de téléphone"/>
  </form>
</body>
</html>

Input : Number

Ce type d’input permet de saisir une valeur numérique. Nous pouvons rajouter les attributs min et max qui permettent de spécifier une valeur minimale ou bien une valeur maximale pour un champ de type number .

Ci-dessous un exemple de formulaire contenant un input de type number :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ma page web</title>
</head>
<body>
  <h1>Formulaire </h1>
  <form>
    <label>Nombre :</label> 
    <input type="number"  value="0" min="0" max="60" >
  </form>
</body>
</html>

Input : Url

Avec le type url, on peut demander à l’utilisateur de saisir une adresse absolue (commençant généralement par http://)

Ci-dessous un exemple de formulaire contenant un input de type url :

<body>
  <h1>Formulaire </h1>
  <form>
    <label>adresse web :</label> 
    <input type="url"  name="url" placeholder="Entrer votre adresse web">
  </form>
</body>

Input : Email

Le champ ressemble au champ texte mais le navigateur sait désormais que l’utilisateur doit saisir une adresse e-mail. Il peut afficher une indication si l’adresse n’est pas un e-mail, c’est ce que fait Firefox par exemple en entourant le champ en rouge .

Ci-dessous un exemple de formulaire contenant un input de type email :

<body>
  <h1>Formulaire </h1>
  <form>
     <label>Email :</label> 
    <input type="email" name="email" placeholder="Entrer votre email">
  </form>
</body>

Input : Search

Cet input permet la saisie d’un texte indiquant au navigateur que l’on s’attends à saisir un texte pour une recherche.

Certains les navigateurs l’affiche avec une façon un peu différente d’un champ texte, notamment une icone de suppression du contenu et une forme arrondie .

Ci-dessous un exemple de formulaire contenant un input de type Search:

<body>
  <h1>Formulaire </h1>
  <form>
    <label>Rechercher :</label> 
    <input type="search" name="r" placeholder="html5">  
  </form>
</body>

Input : hidden

C’est un champ caché pour l’utilisateur, mais dont la valeur est validée par le formulaire. Il s’agit généralement d’une valeur issue d’un script côté serveur (ex php) ou côté client(javascript)

Ci-dessous un exemple de formulaire contenant un input de type hidden:

<body>
  <h1>Formulaire </h1>
  <form>
    <label>Inscription :</label> 
    <input type="hidden" value="inscription"> 
  </form>
</body>

Dans cette partie , nous avons appris comment ajouter des inputs basiques dans un formulaires HTML.

Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer créer insérer des inputs avancés dans un formulaire HTML.

<< tuto précédant

tuto Suivant >>

TutoForYou

Les inputs basiques