Parfois, lors de la mise en page d'une page Web, il est nécessaire de masquer certains des éléments qui y sont placés. Par exemple, si vous souhaitez que le visiteur ne voie pas les boutons d'envoi du formulaire tant que tous les champs requis ne sont pas remplis. Ou si le bouton n'est pas du tout destiné à être utilisé par le visiteur, mais que le script placé sur cette page doit "cliquer" dessus.
Instructions
Étape 1
Utilisez la propriété display des feuilles de style en cascade (CSS) pour activer ou désactiver l'affichage des éléments de page souhaités. Selon les normes internationales, cette propriété peut se voir attribuer plus d'une douzaine de valeurs qui spécifient différentes méthodes d'affichage. Cependant, seuls quatre sont multi-navigateurs (c'est-à-dire qu'ils fonctionnent dans tous les principaux navigateurs). Parmi ces quatre, il y a la valeur none dont vous avez besoin, qui vous permet de masquer l'élément de page souhaité.
Étape 2
Créez l'ensemble requis de directives CSS. Dans sa forme la plus simple, cela peut ressembler à ceci: button {display: none;} Dans ce cas, la page n'affichera pas tous les boutons utilisant la balise….
Étape 3
Ajoutez une indication au nom de la classe dans les instructions si vous souhaitez masquer un seul bouton ou un groupe spécifique de boutons. Par exemple, nommez une telle classe HideBtns et ajoutez ce nom à l'instruction CSS: button. HideBtns {display: none;} Ajoutez l'attribut class au bouton souhaité dans le code HTML de la page et affectez-lui la valeur HideBtns: hidden button
Étape 4
Appliquez la propriété display avec la valeur none à l'élément parent si vous souhaitez, par exemple, masquer non seulement le bouton, mais également d'autres éléments du formulaire Web. Le formulaire est considéré comme le « parent » de tous les éléments placés entre les balises et. Par exemple:
Ici, un champ de texte et un bouton pour soumettre la valeur saisie sont placés à l'intérieur du formulaire. Le formulaire est affecté à une classe nommée HideForm, donc pour masquer à la fois le champ de saisie et le bouton, vous devez modifier l'instruction CSS comme ceci: form. HideForm {display: none;}
Étape 5
Placez le code préparé dans l'exemple ci-dessus dans l'en-tête du document Web (entre les balises et). Pour indiquer au navigateur du visiteur qu'il s'agit d'un code CSS, il doit être placé entre les balises de style HTML d'ouverture et de fermeture:
button. HideBtns {afficher: aucun;}
