Qu’est-ce qu’un input html ?
Techniquement, un input HTML est un élément (champ) du formulaire qui permet à l’utilisateur d’entrer des données sur votre site web. Il est intégré dans la balise <form> pour collecter des informations à envoyer au serveur lors de la soumission du formulaire. Par exemple, un champ pour saisir le nom d’utilisateur, l’adresse e-mail ou le mot de passe.
L’utilisation de l’input est assez simple, il suffit de créer un élément <input> dans votre code HTML, en spécifiant le type d’input souhaité avec l’attribut « type ». Les types d’input les plus courants sont : text, password, email, number, tel, checkbox, radio, file, submit.. Chaque type d’input a une utilisation spécifique en fonction des données à collecter.
<form action="/submit" method="post"> <label for="username">Nom d'utilisateur :</label> <input type="text" id="username" name="username" required> <input type="submit" value="Envoyer"> </form>
Les différents types d’input html
Input type texte
Utilisé pour saisir du texte simple, comme un nom ou une adresse :
<label for="nom">Nom :</label> <input type="text" id="nom" name="nom" required>
Input type Password
Permet de saisir un mot de passe en masquant les caractères
<label for="motdepasse">Mot de passe :</label> <input type="password" id="motdepasse" name="motdepasse" required>
Input type Email
Conçu pour entrer une adresse e-mail valide
<label for="email">Adresse e-mail :</label> <input type="email" id="email" name="email" required>
Input type Number
Destiné à entrer un nombre entier ou décimal.
<label for="quantite">Quantité :</label> <input type="number" id="quantite" name="quantite" min="1" max="100">
Input type Tel
Sert à entrer un numéro de téléphone.
<label for="telephone">Téléphone :</label> <input type="tel" id="telephone" name="telephone">
Input type Checkbox
Permet de sélectionner plusieurs options à la fois
<label for="option1">Option 1</label> <input type="checkbox" id="option1" name="option1">
Input type Radio
Utilisé pour choisir une seule option parmi plusieur
<label for="choix1">Choix 1</label> <input type="radio" id="choix1" name="choix" value="1">
Input type File
Permet de télécharger un fichier depuis l’ordinateur de l’utilisateur
<label for="fichier">Fichier :</label> <input type="file" id="fichier" name="fichier">
Input type Submit
Sert à soumettre le formulaire.
<input type="submit" value="Envoyer">
Input type Range
Pour choisir une valeur numérique à partir d’une plage définie
<label for="volume">Volume :</label> <input type="range" id="volume" name="volume" min="0" max="100">
Input type Date
Permet de sélectionner une date dans un calendrier.
<label for="date">Date :</label> <input type="date" id="date" name="date">
Input type Datetime-local
Permet de saisir une date et une heure locales sans fuseau horaire.
<label for="rendezvous">Rendez-vous :</label> <input type="datetime-local" id="rendezvous" name="rendezvous">
Input type Time
Utilisé pour entrer une heure.
<label for="heure">Heure :</label> <input type="time" id="heure" name="heure">
Input type Week
Permet de sélectionner une semaine et une année.
<label for="semaine">Semaine :</label> <input type="week" id="semaine" name="semaine">
Input type Month
Utilisé pour choisir un mois et une année.
<label for="mois">Mois :</label> <input type="month" id="mois" name="mois">
Input type Color
Permet de sélectionner une couleur à l’aide d’un sélecteur de couleur.
<label for="couleur">Couleur :</label> <input type="color" id="couleur" name="couleur">
Input type Search
Conçu pour entrer une chaîne de recherche.
<label for="recherche">Recherche :</label> <input type="search" id="recherche" name="recherche">
Input type URL
Utilisé pour saisir une URL valide.
<label for="site">Site :</label> <input type="url" id="site" name="site">
Input type Hidden
Un champ caché utilisé pour stocker des données qui ne doivent pas être modifiées par l’utilisateur.
<input type="hidden" id="id" name="id" value="123">
Input type Button
Un bouton générique qui peut être utilisé avec des scripts JavaScript pour déclencher des actions.
<button type="button" onclick="maFonction()">Cliquez-moi</button>
Input type Image
Un bouton graphique qui peut être utilisé pour soumettre un formulaire.
<input type="image" src="submit.png" alt="Soumettre" width="64" height="64">
Input type Reset
Un bouton qui réinitialise tous les champs d’un formulaire à leurs valeurs par défaut.
<input type="reset" value="Réinitialiser">
Ces types d’input sont moins fréquemment utilisés, mais peuvent être utiles dans certaines situations spécifiques.
Sécuriser un input html pour protéger les données
Valider les données côté client
Utilisez JavaScript et l’attribut « pattern » pour valider les données saisies par l’utilisateur avant de les soumettre. Cela permet de vérifier si les données correspondent au format attendu et d’empêcher la soumission de données incorrectes, ce qui pourrait éviter l’injection d’un Shell. Exemple :
<label for="email">Email :</label>
<input type="email" id="email" name="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
Valider et nettoyer les données côté serveur
Même si vous avez validé les données côté client, il est crucial de les valider et de les nettoyer côté serveur également. Les utilisateurs malveillants peuvent contourner la validation côté client. Utilisez des fonctions de filtrage et de validation côté serveur pour vous assurer que les données sont correctes avant de les traiter. En PHP, vous pouvez utiliser des fonctions comme filter_var() ou preg_match() pour valider les données, et htmlspecialchars() ou strip_tags() pour nettoyer les données.
Utiliser les attributs « maxlength » et « minlength »
Définissez les attributs « maxlength » et « minlength » pour limiter la longueur des données saisies. Cela peut aider à éviter les tentatives d’exploitation de vulnérabilités liées à la longueur des chaînes. Exemple :
<label for="pseudo">Pseudo :</label> <input type="text" id="pseudo" name="pseudo" minlength="3" maxlength="20" required>
Utiliser l’attribut « autocomplete »
L’attribut « autocomplete » peut être utilisé pour désactiver la fonction d’autocomplétion du navigateur pour les champs sensibles, tels que les mots de passe.
<label for="password">Mot de passe :</label> <input type="password" id="password" name="password" autocomplete="off" required>
Utiliser des jetons CSRF (Cross-Site Request Forgery)
Les jetons CSRF sont des jetons uniques générés côté serveur qui sont ajoutés aux formulaires. Lors de la soumission du formulaire, le jeton est également soumis et vérifié côté serveur pour garantir que la demande provient d’une source légitime.
Utiliser HTTPS et installer un certificat SSL
Servez votre site et vos formulaires via HTTPS pour garantir que les données soumises sont cryptées et sécurisées lors de leur transmission entre le navigateur de l’utilisateur et votre serveur.
