Une feuille de style en cascade est une partie importante de la création et de la conception d'une page Web. «Handicap» est un sélecteur en CSS et il est utilisé dans les étiquettes pour désactiver les éléments de HTML. Ce sélecteur est appliqué aux formulaires HTML, y compris les champs de texte, les boutons, les cases à cocher, etc. Dans cet article, nous verrons comment la fonctionnalité désactivée est appliquée aux différents éléments de HTML.
Champ de texte désactivé
Un champ de texte est une section dans laquelle l'utilisateur entre ses entrées qui doit être stockée sur le site Web. Ce champ de texte est développé comme un champ de texte activé pour obtenir la valeur de l'utilisateur. Mais dans certains cas, pour restreindre la contribution de l'utilisateur concernant toute étiquette ou les informations de l'utilisateur, nous devrons peut-être désactiver certains champs de texte. Dans cet exemple, nous verrons comment le champ de texte peut être désactivé via HTML et CSS.
Nous commençons le code avec la section Head. Le titre est donné à la page Web sur laquelle nous travaillons. Après cela, nous utilisons la balise de style pour ajouter toutes les propriétés de style au contenu que nous créons dans le corps HTML. En plus du champ de texte désactivé simple, nous utilisons également des éléments supplémentaires pour élaborer facilement le travail et la fonctionnalité des éléments désactivés et activés.
Dans la balise de style, nous avons d'abord le champ de texte d'entrée activé. Nous créons trois champs de texte dans la portion HTML-Two sont activés tandis que le troisième est désactivé. Le type d'entrée pour le champ est «Texte». Cela signifie qu'il n'acceptera qu'un texte. Nous utilisons donc les balises CSS pour les champs de texte activés.
1 | Entrée [type = texte]: activé |
Cela ne stylisera que les champs de texte qui sont définis pour être activés. Nous appliquons le gris clair comme couleur de fond sur les deux champs. De même, après le champ de texte activé, le CSS est déclaré pour le champ de texte désactivé. Pour discriminer le champ de texte handicapé de celui activé, la couleur d'arrière-plan est gris foncé et la couleur de la police est définie sur blanc.
Pour appliquer certains effets sur tous les champs, activés ou désactivés, nous utilisons uniquement le mot «entrée». Ce faisant, les styles sont appliqués aux trois champs de texte. Le premier effet est la marge-top. Cette fonction de «marge» est la zone dépassée de la forme. Par exemple, le champ de texte rectangulaire a la marge de 10 pixels de la direction supérieure. Cela signifie que dans la direction supérieure, le champ est à 10 pixels vers le haut.
1 2 3 | saisir marge: 10px; |
De même, après la marge, la bordure de la forme est également appliquée avec la taille de la bordure et de la couleur qui est définie comme marron. Pour la taille du texte qui est entrée dans le champ de texte, pour rendre le texte facilement lisible, nous définissons la taille de la police sur 16 pixels.
1 2 3 4 5 | Border: 1px brun massif; taille de police: 16px; |
Une autre caractéristique utilisée dans CSS est le contenu entier qui est créé dans le corps HTML pour apparaître au centre de la page Web. Nous utilisons simplement la balise pour le corps. En effet, le contenu est créé dans la section corporelle des balises HTML. Étant donné que tout le contenu est dans le type de texte, nous utilisons simplement l'alignement du texte au centre.
1 2 3 4 5 | Corps Texte-aligne: Centre; |
Dans le champ de texte, il y a une rubrique ou une étiquette qui est donnée pour démontrer l'objectif du champ de texte, ou que les données doivent être saisies dans le champ de texte. Cette étiquette est également stylée à travers CSS. Le poids d'une police est la propriété qui est appliquée au texte pour le rendre audacieux, italique, etc. Ici, nous avons sélectionné le poids comme audacieux.
1 | Police-poids: Bold; |
Maintenant, se dirigeant vers la section corporelle de HTML, le cap est donné en utilisant le
1 2 3 |
L'étiquette est donnée comme «l'âge». Le champ de texte est déclaré via le type d'entrée. La valeur est la section qui contient le nom ou l'espace réservé pour transporter tout mot affiché sur le champ texte. Le
La balise est pour la pause, qui passe à la ligne suivante. Maintenant, le champ de texte désactivé est déclaré en utilisant l'étiquette «Adresse». Après avoir fourni le texte d'entrée, nous déclarons «désactivé» pour rendre le champ de texte désactivé.
1 |
Après cela, le corps de forme est fermé. Les balises HTML sont également fermées.
Lorsque nous exécutons le fichier sur le navigateur, vous verrez que la sortie ressemble à l'image jointe. Les trois étiquettes ainsi que les champs de texte sont affichés. Deux d'entre eux sont activés, tandis que le troisième est désactivé. Tout le style CSS que nous avons fait est appliqué au contenu. Le champ handicapé est sombre pour faire la distinction entre le Activé et Désactivé.
Maintenant, nous verrons comment ce formulaire fonctionne. Nous pouvons saisir les valeurs des deux premiers champs car ils sont activés. Le nom et l'âge sont entrés dans les champs.
Maintenant, nous voyons le champ de texte handicapé. Vous verrez qu'il ne peut pas être modifié comme dans les champs précédents.
Zone de texte désactivée
Nous utiliserons une zone de texte pour la rendre désactivée comme sur le terrain. Tous les codes pour la tête et le corps du HTML sont appliqués de la même manière. Un nouveau bouton de fonctionnalité est stylé dans le corps. Cela comprend la couleur, la hauteur et la largeur du bouton.
À l'intérieur de la section corps du HTML, une zone de texte est créée. Nous définissons les lignes et les colonnes pour former un rectangle spécifié à des fins d'écriture. Le mot «handicapé» est ajouté à la balise pour désactiver le fonctionnement de la zone de texte.
1 |
En plus de cela, nous ajoutons un bouton à la page Web; il ne sera pas désactivé. Après cela, un formulaire est fermé après la balise.
Lorsque la page Web est exécutée sur le navigateur, une zone de texte est créée avec l'instruction par défaut qui a été fournie lorsque nous avons utilisé la balise de zone de texte à l'intérieur du corps HTML. Cela ne peut pas être modifié ou supprimé en raison du travail handicapé.
Conclusion
Les handicapés sont une fonctionnalité utilisée pour désactiver certains travaux du contenu HTML. Parlant de son exemple, il est appliqué au formulaire. Nous avons surtout vu qu'en remplissant n'importe quel formulaire sur le site Web, certains champs ne peuvent pas être modifiés en fonction des besoins de notre éligibilité. Cela se fait en rendant ce champ désactivé. Nous avons expliqué les deux éléments qui peuvent être désactivés dans les balises HTML et CSS qui sont les champs de texte et la zone de texte. Les deux éléments font partie de la balise de formulaire, donc la création du champ de texte et la zone de texte sont effectuées à l'intérieur de la balise de formulaire. Sinon, seul le texte apparaîtra sur la page Web.