Sur les sites Web, les formulaires et les rapports, aident les utilisateurs à accomplir leurs tâches rapidement et efficacement. Les données de résumé sont présentées dans les rapports, tandis que les formulaires sont utilisés pour diverses tâches, y compris la collecte de données, la présentation des résultats de la requête, le calcul, etc. Un formulaire fournit au client une manière systématique de saisir des informations dans la base de données et de modifier directement les données dans les structures de base de données comme des tables.

Cet article consiste à créer et à coiffer des formulaires en utilisant HTML et CSS.

Comment créer une forme dans HTML?

Pour créer une forme dans HTML, utilisez d'abord le «”Élément dans HTML puis ajouter et éléments.

Pour des implications pratiques, suivez les instructions données.

Étape 1: Ajouter un en-tête
Dans le but d'insérer une rubrique dans un document HTML, utilisez n'importe quelle étiquette d'en-tête de «

" pour "

". Dans ce scénario, nous avons utilisé le

étiqueter.

Étape 2: Créer une forme
Ensuite, créez une forme avec l'aide du «”Element et ajoutez les composants de la forme.

Étape 3: Ajouter l'étiquette sous forme
Après cela, insérez le «”Tag à l'intérieur du formulaire qui représente une légende pour un élément dans une interface utilisateur. De plus, ajoutez le «pour«Attribut à l'intérieur du««Qui est utilisé pour se référer à l'ID de l'élément associé à cette étiquette. Pour ce faire, la valeur de l'attribut «for» dans la balise d'étiquette et la valeur de l'attribut «ID» de ««Devrait être le même.

Étape 4: Faire le champ de saisie
Pour ajouter le champ de saisie dans le formulaire, utilisez le «" élément. Cet élément représente un champ de données tapé, généralement avec un contrôle de formulaire pour permettre à l'utilisateur de modifier les données. À l'intérieur de la balise d'entrée, ajoutez les attributs suivants répertoriés ci-dessous:

• Le "taper»L'attribut est utilisé pour contrôler le type de données (et le contrôle associé) de l'élément. Il existe plusieurs valeurs possibles pour cet attribut, y compris «texte","nombre","date","mot de passe", et beaucoup plus.
• "identifiant»Attribut / propriété décrit un ID unique pour un élément HTML.

Étape 5: Faire un bouton
Pour ajouter le bouton sur le formulaire, utilisez le HTML "”Élément et intégrer du texte à afficher sur le bouton:

Remplissez ce formulaire

Prénom



Nom de famille



Votre DOB



Catégorie de travail



Votre pays



Soumettre

On peut voir que le formulaire a été créé avec succès dans le HTML:

Passez à la section suivante si vous souhaitez coiffer le formulaire.

Comment coiffer une forme en utilisant les propriétés CSS?

Pour styliser le formulaire, il existe différentes propriétés CSS disponibles. Pour ce faire, accédez au formulaire et stylisez-le comme souhaité.

Étape 1: Style la forme
Accédez au formulaire dans CSS et appliquez les propriétés suivantes:

former
Border: Green en pointillé 3px;
marge: 30px 80px;
rembourrage: 20px;
Texte-aligne: Centre;
Color en arrière-plan: RVB (194, 241, 194);

Ici:

• "frontière»La propriété CSS alloue une frontière autour de l'élément défini.
• "marge»Définit un espace à l'extérieur de la bordure.
• "rembourrage»Détermine l'espace vide autour de l'élément à l'intérieur de la limite définie.
• "alignement de texte«La propriété est utilisée pour définir l'alignement du texte comme«centre".
• "Couleur de l'arrière plan»Définit la couleur de l'arrière de la frontière.

Sortir

Étape 2: Appliquer le style sur «étiquette»
Maintenant, accédez au «étiqueter»Et appliquez les propriétés CSS mentionnées:

étiqueter
Couleur bleue;
Style de police: italique;

Selon l'extrait de code ci-dessus:

• "couleur»La propriété définit la couleur du texte. À cette fin, la valeur de la propriété spécifiée est définie comme «bleu".
• "le style de police»La propriété spécifie une police particulière pour les données d'étiquette.

Sortir

Étape 3: Élément de style «entrée»
Maintenant, accédez au «saisir”Élément avec le":flotter”Pseudo Sélecteur:

Entrée: Hover
Color en arrière-plan: RVB (247, 202, 143);
la couleur verte;

Après cela, postulez "Couleur de l'arrière plan«Pour régler la couleur à l'arrière du champ de saisie et«couleur»Propriété pour définir la couleur du texte sur le terrain.

Sortir

Il s'agit de créer et de styliser la forme dans HTML / CSS.

Conclusion

Pour créer et styliser la forme, tout d'abord, utilisez le «»Élément dans le but de créer une forme en HTML. Ensuite, utilisez "" et "»Éléments pour insérer des étiquettes et des champs d'entrée à l'intérieur du formulaire. Après cela, accédez au formulaire et appliquez le style à l'aide des propriétés CSS, y compris «Couleur de l'arrière plan","marge"," Border ", et bien d'autres, selon votre choix. Cet article a expliqué la méthode de création et de stylisation de la forme dans HTML et CSS.