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).
<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.
<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.
<!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
Kadeisha Kean
(16 articles publiés)
Kadeisha Kean est un développeur de logiciels Full-Stack et un rédacteur technique/technologique. Elle a la capacité distincte de simplifier certains des concepts technologiques les plus complexes; produire du matériel qui peut être facilement compris par tout novice en technologie. Elle est passionnée par l’écriture, le développement de logiciels intéressants et les voyages à travers le monde (à travers des documentaires).
Plus de Kadeisha Kean