• 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
    Un jeu vidéo centré sur les chats aide les compagnons errants de la Nebraska Humane Society |

    Un jeu vidéo centré sur les chats aide les compagnons errants de la Nebraska Humane Society |

    10 meilleurs méchants du jeu vidéo Star Wars de tous les temps

    10 meilleurs méchants du jeu vidéo Star Wars de tous les temps

    Microsoft Xbox, Sony PlayStation, Nintendo : tour d’horizon des revenus des jeux vidéo

    Microsoft Xbox, Sony PlayStation, Nintendo : tour d’horizon des revenus des jeux vidéo

    10 meilleurs mondes de hub de jeux vidéo

    10 meilleurs mondes de hub de jeux vidéo

    Streaming : les meilleures adaptations cinématographiques de jeux vidéo | Films

    comment le jeu vidéo ‘Stray’ a transpercé les chats

    comment le jeu vidéo ‘Stray’ a transpercé les chats

    Le tournoi de jeux vidéo EVO revient à Las Vegas après deux ans d’absence

    Le tournoi de jeux vidéo EVO revient à Las Vegas après deux ans d’absence

    Venba, un jeu vidéo sur la résonance émotionnelle de la nourriture | Jeux

    Pine Technology Acquisition Corp. annonce le prix d’un premier appel public à l’épargne de 300 000 000 $

    Les dépenses des consommateurs américains en produits de jeux vidéo au deuxième trimestre 2022 ont diminué de 13 % pour atteindre 12,35 milliards de dollars

  • Developpement web
    • All
    • Language HTML5
    Pondichéry CM Rangasamy fait appel au Premier ministre Modi et cherche un crore de Rs 2k pour présenter son budget – The New Indian Express

    Pondichéry CM Rangasamy fait appel au Premier ministre Modi et cherche un crore de Rs 2k pour présenter son budget – The New Indian Express

    10 nouveaux membres Rejoindre CSS

    10 nouveaux membres Rejoindre CSS

    Netflix : les meilleures séries animées que vous devez regarder

    Netflix : les meilleures séries animées que vous devez regarder

    Déclarez le projet national ERCP, augmentez les aides pour le CSS: Gehlot dit au PM

    Déclarez le projet national ERCP, augmentez les aides pour le CSS: Gehlot dit au PM

    Comment utiliser localStorage en JavaScript

    Comment utiliser localStorage en JavaScript

    Travaillez avec le plus grand dévouement : Shailendra aux officiers

    Travaillez avec le plus grand dévouement : Shailendra aux officiers

    Groupe de réflexion établi avec mandat de fédéralisme coopératif : NITI Aayog

    Groupe de réflexion établi avec mandat de fédéralisme coopératif : NITI Aayog

    Le Premier ministre Modi et le président Murmu font l’éloge de Bajrang Punia pour avoir remporté l’or

    Le Premier ministre Modi et le président Murmu font l’éloge de Bajrang Punia pour avoir remporté l’or

    XSS dans AMP For Email de Gmail rapporte 5 000 $ au chercheur

    XSS dans AMP For Email de Gmail rapporte 5 000 $ au chercheur

  • Astuces
    Gutenberg 13.8 présente la prise en charge de la typographie fluide et le bloc de citation remanié – WP Tavern

    Gutenberg 13.8 présente la prise en charge de la typographie fluide et le bloc de citation remanié – WP Tavern

    Comment installer le serveur Web Apache sous Linux étape par étape

    Comment installer le serveur Web Apache sous Linux étape par étape

    Examen de la fureur du Forex 2022 • Benzinga

    Examen de la fureur du Forex 2022 • Benzinga

    Les contributeurs de l’équipe des thèmes WordPress obtiennent un retour sur la proposition d’amélioration de la visibilité des thèmes de blocs dans l’annuaire – WP Tavern

    Les contributeurs de l’équipe des thèmes WordPress obtiennent un retour sur la proposition d’amélioration de la visibilité des thèmes de blocs dans l’annuaire – WP Tavern

    20 idées de revenus passifs pour gagner plus d’argent en 2022

    20 idées de revenus passifs pour gagner plus d’argent en 2022

    Comment localiser un numéro de téléphone ?

    Souhaitez-vous localiser un numéro de téléphone ? Découvrez ici !

    WooCommerce contre Shopify : 6 différences clés

    WooCommerce contre Shopify : 6 différences clés

    Microsoft présente en avant-première la refonte de « WordPress sur App Service » sur Azure – Visual Studio Magazine

    Microsoft présente en avant-première la refonte de « WordPress sur App Service » sur Azure – Visual Studio Magazine

    Qu’est-ce que l’hébergement WordPress ?  |  Tech Radar

    Des milliers de sites WordPress sont mis à jour pour corriger une faille de sécurité dangereuse

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Astuces

Comment créer un formulaire Web avec HTML

Caleb by Caleb
octobre 16, 2021
in Astuces
0 0
0
Comment créer un formulaire Web avec HTML
341
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedin


Partie 1 : éléments de formulaire, d’entrée et d’étiquette

Les formulaires Web HTML ont gagné en popularité au cours des dernières années, car le World-Wide-Web est devenu de plus en plus interactif. Les formulaires HTML sont utilisés pour collecter les entrées des utilisateurs. L’entrée utilisateur est le plus souvent envoyée à un serveur pour traitement. JavaScript côté client est parfois également utilisé pour améliorer l’expérience utilisateur. Dans cette courte série sur les formulaires HTML, nous allons nous familiariser avec les contrôles de formulaire en en créant un qui accepte les coordonnées de l’utilisateur pour un abonnement à une newsletter ou une adhésion à un site. Dans cet article, nous allons apprendre à utiliser les éléments Form, Input et Label. Dans la partie 2, nous couvrirons les contrôles Select, Checkbox et Button. À partir de là, nous apprendrons à utiliser CSS et JavaScript pour améliorer notre formulaire.

Le rôle de CSS et JavaScript dans les formulaires Web

Dans ce tutoriel, nous travaillerons principalement avec HTML, qui détermine les blocs de construction bruts du formulaire, ce qui n’est qu’une pièce du puzzle. En outre, CSS peut être utilisé pour améliorer l’apparence de la forme. Pour illustrer, voici le formulaire que nous allons construire tel qu’il apparaît sans style CSS :

Style CSS dans les formulaires Web

Comparez cela avec la forme stylisée !

Exemple de formulaire de style CSS

JavaScript joue également un rôle pour effectuer des actions telles que validation d’entrée, modifiez les données en réponse aux sélections de l’utilisateur, et bien plus encore.

Lire: Introduction aux formulaires HTML5.

Comment utiliser l’élément

en HTML

Le HTML Les balises sont utilisées pour délimiter un formulaire HTML pour la saisie de l’utilisateur. Bien qu’il ne soit pas strictement nécessaire d’utiliser des contrôles de formulaire, il permet de définir quels contrôles doivent être soumis lorsqu’un bouton Soumettre est cliqué. Par conséquent, vous pouvez penser à la élément en tant que conteneur pour un groupe connexe d’éléments d’entrée, tels que : champs de texte, cases à cocher, boutons radio, boutons d’envoi, etc.

Voici notre conteneur de formulaire :

<form class="content">
 <!-- form contents -->
</form>

L’attribut class identifie l’élément

aux fins du style CSS.

Les éléments et

Le HTML element est l’élément de formulaire le plus utilisé. C’est peut-être parce qu’il peut définir plusieurs types de contrôle, selon le taper attribut. Par exemple, pour afficher un champ de saisie de texte sur une seule ligne, nous pouvons définir le type sur « texte ». C’est aussi la valeur par défaut, si aucun type n’est fourni.

Le premier champ de notre formulaire est une saisie de texte :

<div class="form-group">
  <div class="form-input js-form-input">
  	<label class="form-input__label">Name</label>
  	<input class="form-input__input" type="text" value="John Doe">
  </div>
</div>

Il y a beaucoup de balises supplémentaires pour le style CSS ; sans tout cela, vous avez essentiellement une étiquette et la saisie de texte :

<label>Name</label>
<input type="text" value="John Doe">

Les La balise définit un identifiant pour les contrôles de formulaire. En plus d’informer les utilisateurs voyants des données auxquelles se rapporte le contrôle, les étiquettes sont également lues par les lecteurs d’écran lorsque l’élément d’entrée associé reçoit le focus. Fonctionnellement, les éléments label deviennent partie intégrante de l’élément qu’ils identifient en répondant aux clics de la même manière que leur contrôle associé. Par exemple, en cliquant sur le texte dans le élément à côté d’un bouton radio/case à cocher bascule le contrôle.

Pour ce faire, le pour attribut de la l’étiquette doit être égale à la identifiant attribut de la élément pour les lier ensemble, comme ceci :

<input type="checkbox" id="check1">
<label for="check1" style="background-color: yellow">Click me to toggle the checkbox</label>

Essayez-le ci-dessous!


Vous pouvez également envelopper le balises autour du contrôle tant que cela ne vous dérange pas qu’il apparaisse avant le contrôle :

<label for="check2" style="background-color: yellow">Click me to toggle the checkbox
  <input type="checkbox" id="check2">
<label/>

Voici à quoi cela ressemble :

Saisies de texte spécialisées dans les formulaires HTML

Comme les formulaires HTML sont devenus de plus en plus sophistiqués, des contrôles de formulaires plus récents et plus spécialisés ont été ajoutés à la spécification HTML. Exemple concret, le type d’e-mail. Comme tout développeur Web expérimenté en attestera, la validation des adresses e-mail est un défi ! Champs de saisie définis avec type=”e-mail” sont validés automatiquement lors de la soumission du formulaire. Un champ e-mail peut également autoriser plusieurs adresses e-mail en incluant l’attribut « multiple ». Voici un exemple de message que vous verriez lorsque vous essayez d’envoyer une adresse e-mail au format incorrect :

Validation des e-mails dans les formulaires Web

Le deuxième champ de notre formulaire est un champ de courrier électronique. Voici le balisage pour cela:

<div class="form-group">
  <div class="form-input js-form-input">
  	<label class="form-input__label">E-mail</label>
  	<input class="form-input__input" type="email" value="[email protected]">
  </div>
</div>

Et encore une fois sans tous les DIVS et classes de style supplémentaires :

<label>E-mail</label>
<input type="email" value="[email protected]">

Un autre type spécialisé de saisie de texte valide les numéros de téléphone. Comme les adresses e-mail, les numéros de téléphone présentent des variations pratiquement illimitées. Pour les couvrir, le tél type accepte un attribut de modèle pour définir un format de numéro de téléphone valide. Le modèle est essentiellement une expression régulière qui définit quels chiffres sont acceptables ainsi que combien peuvent être regroupés. Voici un exemple :

<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> 

Comme le type d’e-mail, les champs avec type=”tel” sont validés lors de la soumission du formulaire. Voici un exemple de message de validation :

Validation des e-mails en HTML

Le troisième champ de notre formulaire accepte le numéro de téléphone de l’utilisateur :

<div class="form-group">
  <div class="form-input js-form-input">
    <label class="form-input__label">Mobile phone</label>
    <input class="form-input__input js-mask-phone" type="tel">
  </div>
</div>

Voici le balisage de base du champ :

<label>Mobile phone</label>
<input type="tel">

Lire: Comment créer un formulaire dynamique dans WordPress.

Aller de l’avant

Si vous regardez le formulaire rempli sur codepen.io, vous remarquerez qu’il existe des divergences entre celui-ci et votre formulaire HTML de base. C’est à cause des améliorations CSS et JavaScript. Pour l’instant, essayez-le et explorez tout le code source. À la fin de cette série, vous saurez exactement ce qui fait quoi.

— to www.htmlgoodies.com

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

Unsubscribe
Caleb

Caleb

Stay Connected

  • 86.7k 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

    4447 shares
    Share 1779 Tweet 1112
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1167 shares
    Share 467 Tweet 292
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    513 shares
    Share 205 Tweet 128
  • Comment créer un graphique avec Chart.js

    448 shares
    Share 179 Tweet 112
  • 2 façons d’installer le serveur LAMP sur Ubuntu 22.04 | 20.04

    488 shares
    Share 195 Tweet 122

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

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
  • Featured
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

La technologie Blockchain dans le secteur bancaire – comment pouvons-nous nous connecter ?

La technologie Blockchain dans le secteur bancaire – comment pouvons-nous nous connecter ?

août 10, 2022
Pondichéry CM Rangasamy fait appel au Premier ministre Modi et cherche un crore de Rs 2k pour présenter son budget – The New Indian Express

Pondichéry CM Rangasamy fait appel au Premier ministre Modi et cherche un crore de Rs 2k pour présenter son budget – The New Indian Express

août 10, 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.