• 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 jeu vidéo Call of Duty: Modern Warfare 2 obtient une date de sortie

    Le jeu vidéo Call of Duty: Modern Warfare 2 obtient une date de sortie

    La semaine de la ville du jeu vidéo : les arcades de Yakuza sont propres, étrangement studieuses et un délice

    La semaine de la ville du jeu vidéo : les arcades de Yakuza sont propres, étrangement studieuses et un délice

    Les employés d’Activision voteront pour le syndicat

    Les employés d’Activision voteront pour le syndicat

    Top 5 des meilleurs jeux vidéo PC en Inde mis à jour

    Top 5 des meilleurs jeux vidéo PC en Inde mis à jour

    16 meilleures offres: jeux vidéo, équipement de plein air et technologie

    16 meilleures offres: jeux vidéo, équipement de plein air et technologie

    Le jeu – 8 conseils pour les survivants

    Le jeu – 8 conseils pour les survivants

    Meilleures actions de jeux vidéo à acheter en mai

    Meilleures actions de jeux vidéo à acheter en mai

    APERÇU : Jeu vidéo Escape Academy

    APERÇU : Jeu vidéo Escape Academy

    Un général à la retraite quatre étoiles pense que les séquences de jeux vidéo sont le conflit Ukraine-Russie

    Un général à la retraite quatre étoiles pense que les séquences de jeux vidéo sont le conflit Ukraine-Russie

  • Developpement web
    • All
    • Language HTML5
    ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

    ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

    Chargé de cours en UI et UX Design à l’UNIVERSITY OF GREENWICH

    Chargé de cours en UI et UX Design à l’UNIVERSITY OF GREENWICH

    Revue Figma |  Bloc créatif

    Revue Figma | Bloc créatif

    Commerce de détail omnicanal – La combinaison parfaite pour le commerce de détail

    Commerce de détail omnicanal – La combinaison parfaite pour le commerce de détail

    ALE : Accord de libre-échange entre l’Inde et l’Australie : pourquoi l’ALE est différent, sans précédent

    ALE : Accord de libre-échange entre l’Inde et l’Australie : pourquoi l’ALE est différent, sans précédent

    Apprenez JavaScript sans expérience de codage pour seulement 40 $

    Apprenez JavaScript sans expérience de codage pour seulement 40 $

    Manipulation des couleurs avec JavaScript |  Bonus HTML

    Manipulation des couleurs avec JavaScript | Bonus HTML

    Début d’un parcours de développement frontend – La nouvelle pile

    Début d’un parcours de développement frontend – La nouvelle pile

    Un homme condamné à plus de 25 ans de prison pour avoir volé un magasin de téléphones portables à Gunpoint |  USAO-NDTX

    L’ancien shérif de Norfolk condamné pour corruption publique | USAO-EDVA

  • Astuces
    Comment utiliser WordPress : un guide pour les débutants

    Comment utiliser WordPress : un guide pour les débutants

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    WordPress.com Review 2022: Features, Pricing & More

    Comment installer WordPress sur le serveur Ubuntu 22.04 LTS

    Comment installer WordPress sur le serveur Ubuntu 22.04 LTS

    Jacob Nicotra, fondateur et PDG de Jacob Nicotra Web Development, a été présenté dans le magazine Authority

    Jacob Nicotra, fondateur et PDG de Jacob Nicotra Web Development, a été présenté dans le magazine Authority

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Which is Better in 2022?

    Set Up Your Store in 7 Steps

    Set Up Your Store in 7 Steps

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    SiteGround Review 2022 : fonctionnalités, prix et plus

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Revue Squarespace 2022 : fonctionnalités, prix et plus

    Comment commencer à tester votre code WordPress avec le framework de test PHP Pest – WP Tavern

    Comment commencer à tester votre code WordPress avec le framework de test PHP Pest – WP Tavern

  • 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
0
Comment créer un formulaire en HTML
333
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedin


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.

Example of the Title

Example description. Lorem Ipsum is simply dummy text of the printing and type..

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

  • 82.2k Followers
  • 113k 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

    3563 shares
    Share 1425 Tweet 891
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    897 shares
    Share 359 Tweet 224
  • Battle.net s’est remis d’une attaque DDoS, selon Blizzard

    495 shares
    Share 198 Tweet 124
  • Exposition de portraits un hommage intime au service, au sacrifice

    526 shares
    Share 210 Tweet 132
  • Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

    523 shares
    Share 209 Tweet 131

Follow Our Page

Ajouter votre lien ici

Example of the Title

Follow Us

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

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies

Recent News

ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

ATHENA GOLD CORPORATION acquiert un prospect de cuivre porphyrique, d’or et de molybdène dans le district de Crow Springs, dans le comté d’Esmeralda, au Nevada

mai 25, 2022
Portrait of a killer: ‘Bullied’ Call of Duty-loving Texas school gunman brawled repeatedly at school

Portrait of a killer: ‘Bullied’ Call of Duty-loving Texas school gunman brawled repeatedly at school

mai 25, 2022

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

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

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Sign In with Facebook
Sign In with Google
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.