• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Le sketch Mario SNL de Pedro Pascal est l’adaptation du jeu vidéo dont nous avons plus que jamais besoin

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    L’industrie écossaise du jeu vidéo renforce le potentiel des jeux

    Rencontrez les régulateurs : les normes de sécurité pour les enfants auront de nouveaux régulateurs à partir de 2023

    Wesfarmers supprime 100 emplois chez Catch

    Wesfarmers supprime 100 emplois chez Catch

    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

  • Astuces
    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Comment créer un formulaire en HTML

Caleb by Caleb
juin 27, 2021
in Language HTML5
0
0
Comment créer un formulaire en HTML
334
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


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 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 :

Formulaire HTML

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.


Capture d'écran d'exemples de propriétés CSS utilisées dans un extrait de code
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

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Un pas de plus…!

Veuillez confirmer votre adresse e-mail dans l’e-mail que nous venons de vous envoyer.

.



— to www.makeuseof.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5606 shares
    Share 2242 Tweet 1402
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1707 shares
    Share 683 Tweet 427
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    514 shares
    Share 206 Tweet 129
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    712 shares
    Share 285 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Exposition I Dream a World de la National Portrait Gallery

février 6, 2023
L’industrie écossaise du jeu vidéo renforce le potentiel des jeux

Rencontrez les régulateurs : les normes de sécurité pour les enfants auront de nouveaux régulateurs à partir de 2023

février 6, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.