Comment créer un formulaire en HTML

La collecte de données auprès d’un utilisateur de site Web peut se faire de plusieurs manières différentes. Les formulaires sur les sites Web peuvent avoir une fonction simple, telle que l’inscription d’un utilisateur à une newsletter, ou un objectif plus complexe, comme servir de formulaire de demande d’emploi.

Cependant, une chose que tous ces formulaires simples à complexes ont en commun est le HTML et plus précisément le HTML étiqueter.

Utilisation de la balise de formulaire

le tag est un élément HTML utilisé comme conteneur pour enfermer d’autres éléments pouvant être considérés comme des blocs de construction pour les formulaires. Certains de ces éléments fondamentaux comprennent la étiquette, le étiquette, et le étiqueter.

le tag a un attribut important qui contribue à sa fonctionnalité. Cet attribut est appelé « action » et permet d’identifier le fichier vers lequel seront transmises les données saisies dans le formulaire.

Utilisation de l’exemple de balise

<!-– A form that will pass its data to a javascript document called process.js-->
<form action="process.js">
<!--close form tag-->
</form>

L’exemple ci-dessus montre comment utiliser la balise form dans vos projets. L’un des principaux points à retenir est que si vous ouvrez une balise de formulaire, vous devez vous rappeler de la fermer. Cela créera une structure de formulaire et garantira également que les données saisies dans le formulaire sont traitées correctement.

Utilisation de la balise

le La balise est utilisée pour décrire les données de chaque champ de saisie d’un formulaire. Cette balise a un pour attribut, qui est utilisé pour améliorer la fonctionnalité d’un formulaire.

En rapport: Les meilleurs éditeurs HTML en ligne gratuits pour tester votre code

Si l’identifiant qui est affecté au champ de saisie correspondant correspond au pour valeur dans le tag, alors ce champ de saisie sera automatiquement mis en surbrillance lorsque vous cliquez sur l’étiquette.

Utilisation de l’exemple de balise

<!—using the label tag-->
<label for="fname">First Name:</label>

Dans l’exemple ci-dessus, vous pouvez voir que le pour l’attribut reçoit la valeur fnom. Par conséquent, si vous créez un champ de saisie avec le fnom id, ce champ sera mis en surbrillance à chaque fois que vous cliquerez sur le D’abord Nom étiqueter.

Utilisation de la balise

Dans sa forme la plus basique, le La balise peut être vue comme une zone de texte. le La balise capture les données de l’utilisateur et l’une de ses caractéristiques les plus cruciales est la taper attribut. le taper L’attribut indique le type de données que cette zone de texte peut collecter.

En rapport: Comment créer un formulaire empilé en CSS

Il existe plusieurs valeurs différentes que vous pouvez affecter au taper attribut, mais certains des plus populaires sont les suivants.

• Texte

• Nombre

• E-mail

• Image

• Date

• Case à cocher

• Radio

• Mot de passe

Utilisation de la balise Exemple

<!—using the label and input tags-->
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname">

le tag dans le code ci-dessus a trois attributs différents qui ont chacun une fonction unique. le taper L’attribut se voit attribuer une valeur de texte, ce qui signifie que la zone de texte n’acceptera que des caractères.

le identifiant L’attribut est un identifiant unique pour la zone de texte, et il est important car il permet d’accéder à cet élément à partir d’un fichier CSS. le Nom l’attribut est également un identifiant unique ; cependant, l’attribut name est utilisé pour interagir avec un élément du côté serveur du développement.

le identifiant et Nom les attributs reçoivent généralement la même valeur car l’un donne accès à un élément du côté client et l’autre du côté serveur.

Utilisation de l’élément Checkbox

L’élément checkbox est très unique par rapport aux autres éléments que vous pouvez utiliser avec le étiqueter. Il permet à un utilisateur de sélectionner une ou plusieurs options dans une liste de choix connexes. Les cases à cocher sont facilement identifiables car elles sont représentées par de minuscules cases carrées qui contiennent une coche lorsqu’elles sont sélectionnées.

Utilisation de l’exemple d’élément de case à cocher

<!-using the checkbox value-->
<label for="Languages">Programming Languages:</label>
<input type="checkbox" name="languages" id="languages" value="Java"> Java
<input type="checkbox" name="languages" id="languages" value="JavaScript"> JavaScript
<input type="checkbox" name="languages" id="languages" value="Python"> Python

Dans l’exemple ci-dessus, chacun des éléments de case à cocher a un attribut de valeur, ce qui est important car il permet de distinguer chaque option de case à cocher de la collection. Par conséquent, si un utilisateur sélectionne “Java” parmi les options ci-dessus, les données le refléteront.

Utilisation de la balise et des éléments radio

le tag et les éléments radio sont similaires dans le sens où ils ne permettent à un utilisateur de sélectionner qu’une seule valeur à la fois ; par conséquent, on peut dire qu’ils ont la même fonction. Cependant, ils sont très différents en apparence.

L’élément radio est plus proche de l’élément case à cocher en apparence, cependant, avec l’élément radio, vous avez des cercles au lieu de carrés.

le La balise produit ce qui est essentiellement une zone de liste déroulante, qui permet à un utilisateur de sélectionner une seule valeur.

Utilisation de l’exemple de balise

et d’élément radio

<!-using the select tag-->
<label for="sex">Sex:</label>
<select name= "sex" id="sex">
<option value="male" selected>Male</option>
<option value="fmale">Female</option>
<option value="other">Other</option>
</select>
<!-using the radio element-->
<label for="positions">Positions Available:</label>
<input type="radio" name="positions" id="positions"
value="Junior Developer"> Junior Developer
<input type="radio" name="positions" id="positions"
value="Mid-level Developer"> Mid-level Developer
<input type="radio" name="positions" id="positions"
value="Senior Developer"> Senior Developer

Utilisation de l’élément Date

L’élément date produit une petite zone de texte qui génère un calendrier lorsque vous cliquez dessus. Utilisant Date en tant que type de saisie dans vos formulaires, vous évitez qu’un utilisateur ne saisisse éventuellement une date incorrecte, ce qui peut potentiellement conduire à la collecte de données erronées.

Utilisation de l’exemple d’élément de date

<input type="date" name="dob" id="dob">

Utilisation de l’élément e-mail et mot de passe

Lorsqu’un développeur attribue les valeurs de l’e-mail ou du mot de passe à l’attribut type d’un tag, ils produisent chacun une zone de texte identique. Cependant, lorsque vous commencez à utiliser ces boîtes, les différences deviennent apparentes.

L’élément e-mail surveille les données saisies dans la zone de texte et garantit que chaque soumission répond à l’exigence standard d’une adresse e-mail ; ce qui signifie avoir une partie locale, suivie du symbole @, et se terminant par un domaine.

Utilisation de l’exemple d’élément de courrier électronique

<input type="email" name="email" id="email" placeholder= "Enter email address" >

Dans l’exemple ci-dessus, vous êtes présenté à un nouvel attribut appelé espace réservé, et cet attribut prend une valeur de texte qui s’affiche dans la zone de texte en gris délavé. Ce texte est utilisé pour indiquer les données qui doivent être placées dans la zone de texte comme on le voit dans l’exemple ci-dessus.

L’élément de mot de passe transforme les caractères en astérisques au fur et à mesure qu’ils sont entrés dans la zone de texte. Par conséquent, si l’écran de votre ordinateur est visible par d’autres personnes, elles ne verront pas le mot de passe que vous entrez.

Utilisation de l’exemple d’élément de mot de passe

<input type="password" name="pword" id="pword">

Utilisation de la balise Button

Dans un formulaire, il existe généralement deux types de boutons différents. Le premier est le bouton de soumission, qui soumet les données saisies dans le formulaire à la valeur attribuée à l’attribut d’action (qui se trouve dans le <formulaire> étiqueter).

Exemple de bouton Soumettre

<button class="btn" type="submit">Submit</button>

Le deuxième type de bouton généralement utilisé dans un formulaire est un bouton de réinitialisation, qui efface les données d’un formulaire afin que l’utilisateur puisse saisir de nouvelles données. le l’étiquette a un taper attribut, qui est utilisé pour indiquer la fonction du bouton. Dans l’exemple ci-dessus, le taper l’attribut est d’attribuer la valeur nous faire parvenir, par conséquent, un bouton qui a un taper valeur de réinitialiser est utilisé pour réinitialiser le formulaire.

Exemple de bouton de réinitialisation

<button class="btn" type="reset">Reset</button>

Création d’un formulaire

Pour créer un formulaire simple en HTML, vous devrez inclure tous les éléments mentionnés ci-dessus dans un étiqueter.

Création d’un exemple de formulaire

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forms</title>
</head>
<body>
<div id="container">
<h1>Application Form</h1>
<br>
<form action="process.js">
<div>
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname">
<label for="lname" >Last Name:</label>
<input type="text" name="lname" id="lname">
</div> <br>
<div>
<label for="dob">Date of birth:</label>
<input type="date" name="dob" id="dob">
<label for="age">Age:</label>
<input type="number" name="age" id="age">
</div> <br>
<div>
<label for="gender">Gender:</label>
<select name= "gender" id="gender">
<option value="male" selected>Male</option>
<option value="fmale">Female</option>
<option value="other">Other</option>
</select>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email" placeholder= "Enter email address" >
</div> <br>
<div>
<label for="positions">Positions Available:</label>
<input type="radio" name="positions" id="positions"
value="Junior Developer"> Junior Developer
<input type="radio" name="positions" id="positions"
value="Mid-level Developer"> Mid-level Developer
<input type="radio" name="positions" id="positions"
value="Senior Developer"> Senior Developer
</div> <br>
<div>
<label for="Languages">Programming Languages:</label>
<input type="checkbox" name="languages" id="languages" value="Java"> Java
<input type="checkbox" name="languages" id="languages" value="JavaScript"> JavaScript
<input type="checkbox" name="languages" id="languages" value="Python"> Python
</div> <br>
<div>
<label for="pword">Password:</label>
<input type="password" name="pword" id="pword">
<label for="cpword">Confirm Password:</label>
<input type="password" name="cpword" id="cpword">
</div> <br>
<button class="btn" type="submit">Submit</button>
<button class="btn" type="reset">Reset</button>
</form>
</div>
</body>
</html>

Le code ci-dessus produira le formulaire suivant :

Vous pouvez maintenant créer un formulaire simple en HTML

Cet article vous fournit tous les outils pour créer un formulaire HTML fonctionnel. Il identifie les différentes balises HTML utilisées dans la création de formulaires et explore les différents attributs pouvant être utilisés avec ces balises.

Cependant, la plupart des formulaires que vous voyez sur les sites Web ont un composant supplémentaire ; CSS, qui est utilisé pour donner vie à la forme et la rendre plus esthétique.

La feuille de triche des propriétés essentielles CSS3

Maîtrisez la syntaxe CSS essentielle avec notre aide-mémoire des propriétés CSS3.

Lire la suite

A propos de l’auteur