Largeur d'entrée CSS
Les feuilles de style en cascade utilisent plusieurs propriétés pour styliser n'importe quel contenu HTML. L'un des effets de base utilisés est d'augmenter la dimension du contenu dans une direction spécifique uniquement (e.g., largeur et hauteur.) Cet article discutera de la propriété de largeur qui est le déplacement de la taille d'origine du contenu dans la direction horizontale.
Champ de saisie:
Lors de la création d'un formulaire dans la page Web, nous utilisons souvent différents champs de texte pour faire entrer les données dans ce champ par l'utilisateur. Ceci est fait par le type d'entrée du champ, «texte». Nous utiliserons la propriété de largeur pour améliorer la taille des champs d'entrée de HTML.
Exemple 1:
Cet exemple comprendra l'exemple d'implémentation d'une zone de texte qui est déclarée dans le corps HTML avec un CSS en ligne. CSS en ligne est le type de CSS déclaré à l'intérieur de l'étiquette HTML du corps. Tout d'abord, nous déclarerons une zone de texte simple en utilisant la propriété de largeur directement dans la balise de type d'entrée. Ce code aura une partie corporelle directement dans le code car il n'est pas nécessaire d'utiliser une section Head. À l'intérieur du corps, une couleur d'arrière-plan est appliquée.
Tout en remplissant un formulaire en ligne, vous devez avoir remarqué qu'un petit texte est écrit avec la zone de texte ou le champ de texte. Ce texte décrit le but de la zone de texte et le type de texte que l'utilisateur est censé entrer. Par exemple, le nom, l'âge et l'adresse sont les champs requis des informations du texte. Ces noms de tous les champs sont appelés étiquettes. Dans HTML, une balise d'étiquette spécifiée est utilisée pour déclarer l'étiquette pour chaque champ de texte, respectivement.
| 1 | < label for = "name"> Entrez une valeur: |
Cette balise utilise le nom du champ de texte à qui il appartient et apparaîtra avant que ce champ spécifié soit déclaré sur la page Web. Ensuite, le nom de l'étiquette est mentionné. Après cela, nous déclarerons le contenu de la zone de texte. Lorsque nous écrivons le texte, le champ de saisie est enregistré ou récupéré par le système. Le type d'entrée, en utilisant l'ID de celui-ci, sera un texte avec le nom du champ.
| 1 |
La troisième propriété de cette balise appartient au CSS. La propriété de largeur est ajoutée avec l'instruction de style pour ajouter la dimension horizontale de la zone de texte. Cela se fait à travers la largeur.
Enregistrez ce code dans l'éditeur de texte avec l'extension HTML pour afficher la page Web de ce code dans n'importe quel navigateur. Ouvrez ce code avec une option dans le navigateur.
Vous verrez qu'une simple zone de texte avec l'étiquette est formée. Une largeur spécifiée est donnée à la boîte, sinon il aurait une petite zone pour prendre en entrée.
Ce concept peut également être fait en utilisant un code de style séparé dans la partie tête pour rendre le code facilement compréhensible. Ce type de CSS dans lequel le style est ajouté séparément dans la section de tête est connu sous le nom de CSS interne. Ceci est accompli en utilisant des ID et des classes pour la balise spécifique sur laquelle nous voulons ajouter l'effet. Par exemple, la classe «HELO» est créée pour ajouter une largeur à la zone d'entrée.
| 1 2 3 4 5 6 7 8 9 |
Le nom de cette classe 'HELO' sera ajouté à la balise d'entrée comme référence pour ajouter toutes les propriétés à cette zone de texte de type d'entrée.
| 1 |
En exécution, la même zone de texte est créée.
Exemple 2: sélecteur CSS
Contrairement au concept précédent de déclarer la propriété de largeur à la zone de texte en tant que CSS en ligne et interne à travers le phénomène de classe, il existe une autre fonctionnalité qui est utilisée pour appliquer un effet au contenu HTML. Ceci est un sélecteur CSS. Ce sélecteur est différent pour chaque contenu HTML. La déclaration de sélecteur se fait également comme le CSS interne à l'intérieur de la balise de style dans la section Head.
| 1 2 3 4 5 | Entrée [type = "text"] Largeur: 200px; |
Cela se fait en utilisant la saisie du mot-clé dans les supports. Le type d'entrée est mentionné qui spécifie la déclaration d'un champ de texte. À l'intérieur de cette déclaration, la largeur du champ est appliquée.
À l'intérieur du corps, il n'est pas nécessaire d'ajouter un nom de classe ou plus de détails pour référence. Lorsque nous déclarons le type d'entrée pour la création de la zone de texte, il est automatiquement connecté à la balise de style à l'intérieur de la section Head.
Exemple 3:
Il existe un autre exemple d'application de la largeur à la zone de texte. Cela se fait en utilisant la balise de style à l'intérieur de la balise de contenu d'entrée HTML et en ajoutant davantage la marge et le rembourrage aux champs de texte pour améliorer la propriété de largeur. La propriété Largeur est appliquée à un champ de texte uniquement tandis que l'autre contient les paramètres par défaut. Cela montrera la différence dans la déclaration d'une boîte de type de boîte de réception de texte avec et sans style de largeur. Maintenant, commençons par le code corporel HTML pour élaborer le fonctionnement de la balise de style largeur.
Tout d'abord, à l'intérieur du corps, nous avons déclaré une rubrique. Ensuite, utilisez un conteneur div sur la page Web. La fonction principale de ce conteneur est d'y ajouter du contenu HTML avec un alignement spécifié pour les garder au bon endroit. À l'intérieur de la balise, utilisez la balise d'étiquette pour ajouter le nom. Ensuite, utilisez la balise d'entrée pour le champ de texte et ajoutez une taille de 10. La différence de taille et de largeur est que la largeur élargit la zone de texte en pixels. Tandis que la taille est également utilisée pour augmenter les dimensions de n'importe quel objet, mais il vaut pour les élargissements verticaux et horizontaux.
Faire une pause à travers le
étiqueter. Ensuite, utilisez à nouveau une autre zone de texte pour les données. Ajoutez le champ de saisie du type de données afin que l'utilisateur ne puisse ajouter que la date en fonction du format. Le symbole du calendrier sera également formé, ce qui est une fonctionnalité intégrée.
Dans la partie CSS, la police de l'étiquette est ajoutée. Et au champ de saisie, nous avons utilisé les propriétés de marge et de rembourrage.
| 1 2 3 4 5 6 7 | Saisir Marge: 7px; Rembourrage: 2px; |
En exécution, vous verrez que l'attribut de taille a élargi la taille globale de la zone de texte du nom. Tandis que la propriété de largeur a augmenté la taille horizontale.
Conclusion:
Une largeur d'entrée CSS est une fonctionnalité utilisée pour améliorer la taille des champs de type d'entrée, ces champs sont également des zones de texte, des zones de texte et des cases à cocher. Nous avons utilisé les zones de texte pour élaborer le fonctionnement de la propriété de largeur dans CSS en ligne et CSS interne. La différence entre la taille et la fonction de largeur est également expliquée. La propriété de largeur joue un rôle majeur dans l'alignement de la forme en gardant la valeur du rapport largeur de même pour tous les champs de texte.