Case a cocher
Fermé
noelic12
Messages postés
1
Date d'inscription
mardi 17 mars 2020
Statut
Membre
Dernière intervention
17 mars 2020
-
17 mars 2020 à 17:03
Ackbar - 18 mars 2020 à 03:57
Ackbar - 18 mars 2020 à 03:57
1 réponse
Bonjour,
'avec mon code si je coche ou décoche la case rien ne se passe!!! '
Normal une case à cocher est une valeur(cochée ou pas cochée/vrai faux) qui sera envoyée par le formulaire lorsque l'on clique sur le bouton envoyer(qui n'est pas présent).
référence d'écriture basique d'un formulaire, voir le 2ème exemple où il y a un bouton pour envoyer ,et comme indiqué dans l'exemple le formulaire ne permet que l'envoi mais ne détaille pas ce qui sera fait et à qui doivent être envoyées les informations(données) saisies dans le formulaire:
https://www.w3schools.com/html/html_forms.asp
pour ajouter une action lors d'un événement(clic, chargement de la page, survol à la souris, âge du capitaine etc...) vous pouvez(devez) utiliser JavaScript.
Un formulaire en HTML c'est un moyen d'envoyer des informations. Je ne vois nulle part où il doit apparaître ni où il est ce formulaire qui doit apparaître.
Dans l'état vous avez un formulaire HTML donc qui sera envoyé (nulle part puisque votre balise entrante form n'indique pas où il doit être envoyé voir les attributs method et action) ni de bouton d'envoi(un submit par exemple).
L'action étant interne à la page ce n'est pas la peine vous pouvez simplement passer par la programmation événementielle.
Une case à cocher indique un choix d'un formulaire.
Ce que vous voulez faire est une action/fonctionnalité et non une valeur à transmettre puisque c'est le formulaire qui contient les données envoyées.
Une case à cocher n'est donc pas adapté, le fait d'ouvrir une formulaire n'étant pas une donnée je pencherait plutôt pour un bouton...que vous li donnez la forme d'une case à cocher n'en fait pas une case à cocher indiquant une donnée transmise(à quoi?qui?).
Un exemple en JavaScript d'événement lié à un clic sur un bouton:
Description de la fonction JavaScript addEventListener
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
Une fois compris comment marche un événement vous avez plusieurs possibilités(comme souvent dans le développement informatique) pour remplacer le message d'alerte de mon exemple précédent par l'action à faire.
Par mi ces possibilités 2 sont assez fréquentes:
1)soit vous faites afficher un formulaire masqué auparavant, soit vous ajoutez le contenu en le créant , par exemple il suffit de changer la propriété CSS de l'élément display préalablement fixée à none
https://www.w3schools.com/CSSref/pr_class_display.asp
2)soit vous écrivez le formulaire et l'ajouter lors du clic
exemple 1:
https://www.w3schools.com/jsref/met_element_setattribute.asp
On peut aussi écrire comme ceci(sans setAttribute ce sont des méthodes objets dite d'accès raccourcie)
document.getElementById('formulaire').style.display='block';
explications et liste ici:
https://www.w3schools.com/jsref/dom_obj_style.asp
2)En ajoutant le formulaire lorsque que l'on en a besoin.
Il y a 2 façons de faire qui ont avantage et inconvénient: écrire le texte directement, passer par document.createElement;
Ici je présente la façon d'écrire en texte car plus rapide (mais moins 'propre').
Avec [ELEMENT].innerHTML on modifie un texte HTML
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
Bien sûr tout ceci est à adapter à vos besoins que je n'ai pas tout à fait compris(s'agit t'il d'entrées facultatives à ajouter dans un formulaire existant ou d'un formulaire complet à afficher comme j'ai fait dans mes exemples ou autre chose...) et la / les méthodes ici ne sont que génériques. Ce qi est bien c'est que si vous avez compris vous pourrez quasiment tout faire pour rendre votre page interactive avec ces exemples.
Vous pouvez remarquer que votre question n'a rien à voir avec les formulaires mais plutôt 'interactivité et que vous n'avez pas compris ni le rôle ni la façon d'utiliser un formulaire. Comme pour un formulaire en version papier s'il n'est envoyé à personne un formulaire ne sert à rien. C'est le bouton submit(envoyer) qui sert à cela; un formulaire sert souvent à envoyer des données au serveur voire les passer à une base de données ou un service d'envoi de mail. Sinon vous pouvez traiter les données uniquement sur l'ordinateur de l'utilisateur mais rien ne sera retenu et une fois quittée la page il n'y aura aucune persistance des données du formulaire.
Alors plutôt simple et puissant JavaScript n'est ce pas?
Son rôle essentiel est bien de modifier à volonté tout le contenu HTML et CSS comme expliqué dans les exemples, donc avant tout il faut connaître sur le bout des doigts HTML et CSS qui ont 2 rôles distincts:
_ HTML indique les éléments de la page, leur ordre, nature , importance et désignation(cette dernière étant ensuite indexé par les moteurs de recherche et permet ainsi de savoir quels contenus sont sur vos pages).
_CSS sert à la mise en page, présentation, couleurs etc...des contenus listés et désignés(en tant que paragraphe texte, image, formulaire, titre etc...) par HTML
JavaScript: programmer ce qui permet de tester, valider, vérifier des valeurs(variables ou données) mais aussi et surtout de modifier à l'envie le contenu textuel de la page(HTML et CSS, leurs valeurs et contenus) et permettre ainsi l'interactivité. Son paradigme le plus commun est bien sûr l'interactivité soit réagir à des événements déclenchés.
'avec mon code si je coche ou décoche la case rien ne se passe!!! '
Normal une case à cocher est une valeur(cochée ou pas cochée/vrai faux) qui sera envoyée par le formulaire lorsque l'on clique sur le bouton envoyer(qui n'est pas présent).
référence d'écriture basique d'un formulaire, voir le 2ème exemple où il y a un bouton pour envoyer ,et comme indiqué dans l'exemple le formulaire ne permet que l'envoi mais ne détaille pas ce qui sera fait et à qui doivent être envoyées les informations(données) saisies dans le formulaire:
https://www.w3schools.com/html/html_forms.asp
pour ajouter une action lors d'un événement(clic, chargement de la page, survol à la souris, âge du capitaine etc...) vous pouvez(devez) utiliser JavaScript.
Un formulaire en HTML c'est un moyen d'envoyer des informations. Je ne vois nulle part où il doit apparaître ni où il est ce formulaire qui doit apparaître.
Dans l'état vous avez un formulaire HTML donc qui sera envoyé (nulle part puisque votre balise entrante form n'indique pas où il doit être envoyé voir les attributs method et action) ni de bouton d'envoi(un submit par exemple).
L'action étant interne à la page ce n'est pas la peine vous pouvez simplement passer par la programmation événementielle.
Une case à cocher indique un choix d'un formulaire.
Ce que vous voulez faire est une action/fonctionnalité et non une valeur à transmettre puisque c'est le formulaire qui contient les données envoyées.
Une case à cocher n'est donc pas adapté, le fait d'ouvrir une formulaire n'étant pas une donnée je pencherait plutôt pour un bouton...que vous li donnez la forme d'une case à cocher n'en fait pas une case à cocher indiquant une donnée transmise(à quoi?qui?).
Un exemple en JavaScript d'événement lié à un clic sur un bouton:
<button id='ouvreformulaire'>
ouvrir le formulaire
</button>
<script>
document.getElementById('ouvreformulaire').addEventListener('click',
function(){
alert('remplacer le message d'alerte par l'affichage d'un formulaire');
}
)
</script>
Description de la fonction JavaScript addEventListener
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
Une fois compris comment marche un événement vous avez plusieurs possibilités(comme souvent dans le développement informatique) pour remplacer le message d'alerte de mon exemple précédent par l'action à faire.
Par mi ces possibilités 2 sont assez fréquentes:
1)soit vous faites afficher un formulaire masqué auparavant, soit vous ajoutez le contenu en le créant , par exemple il suffit de changer la propriété CSS de l'élément display préalablement fixée à none
display:none;signifiant que l'élément n'est pas affiché à une valeur visible(block/inline/inline-block).
https://www.w3schools.com/CSSref/pr_class_display.asp
2)soit vous écrivez le formulaire et l'ajouter lors du clic
exemple 1:
<style rel='stylesheet' text='style/css'>
formulaire{
display:none;
}
</style>
<button id='ouvreformulaire'>
ouvrir le formulaire
</button>
<form ID='formulaire' action='#' method='POST'>
<--! contenu du formulaire ici-->
</form>
<script>
document.getElementById('ouvreformulaire').addEventListener('click',
function(){
document.getElementById('formulaire').setAttribute('style','display:block');/* indique de régler l'attribut 'style' du form reperé par ID='formulaire'' à la nouvelle valeur(second paramètre de la méthode setAttribute*/
}
)
</script>
https://www.w3schools.com/jsref/met_element_setattribute.asp
On peut aussi écrire comme ceci(sans setAttribute ce sont des méthodes objets dite d'accès raccourcie)
document.getElementById('formulaire').style.display='block';
explications et liste ici:
https://www.w3schools.com/jsref/dom_obj_style.asp
2)En ajoutant le formulaire lorsque que l'on en a besoin.
Il y a 2 façons de faire qui ont avantage et inconvénient: écrire le texte directement, passer par document.createElement;
Ici je présente la façon d'écrire en texte car plus rapide (mais moins 'propre').
Avec [ELEMENT].innerHTML on modifie un texte HTML
<article>
<h1></h1><!-- article et H1pour écrire un HTML5 qui respecte les normes-->
<div id='containerform'>élément vide qui va contenir le formulaire</div>
</article>
<button id='ajoutformulaire'>
afficher formulaire
</button>
<script>
document.getElementByd('ajouterformulaire').addEventListener('click', function(){
document.getElementbyId('containerform').innerHTML='<form action="#" method="GET">
ajouter ici le contenu du formulaire à afficher <br/><p style='font-weigth:bold;'> sans OUBLIER LE BOUTON ENVOYER(submit) PUISQUE UN FORMULAIRE SERT A ENVOYER DES DONNEES, ET BIEN SUR INDIQUER OU SERONT ENVOYEES LES DONNEES AVEC LES ATTIBUTS DE LA BALISE FORM action (la cible)& method(la méthode d\'envoi employée) </p></form>';
});
</script>
https://www.w3schools.com/jsref/prop_html_innerhtml.asp
Bien sûr tout ceci est à adapter à vos besoins que je n'ai pas tout à fait compris(s'agit t'il d'entrées facultatives à ajouter dans un formulaire existant ou d'un formulaire complet à afficher comme j'ai fait dans mes exemples ou autre chose...) et la / les méthodes ici ne sont que génériques. Ce qi est bien c'est que si vous avez compris vous pourrez quasiment tout faire pour rendre votre page interactive avec ces exemples.
Vous pouvez remarquer que votre question n'a rien à voir avec les formulaires mais plutôt 'interactivité et que vous n'avez pas compris ni le rôle ni la façon d'utiliser un formulaire. Comme pour un formulaire en version papier s'il n'est envoyé à personne un formulaire ne sert à rien. C'est le bouton submit(envoyer) qui sert à cela; un formulaire sert souvent à envoyer des données au serveur voire les passer à une base de données ou un service d'envoi de mail. Sinon vous pouvez traiter les données uniquement sur l'ordinateur de l'utilisateur mais rien ne sera retenu et une fois quittée la page il n'y aura aucune persistance des données du formulaire.
Alors plutôt simple et puissant JavaScript n'est ce pas?
Son rôle essentiel est bien de modifier à volonté tout le contenu HTML et CSS comme expliqué dans les exemples, donc avant tout il faut connaître sur le bout des doigts HTML et CSS qui ont 2 rôles distincts:
_ HTML indique les éléments de la page, leur ordre, nature , importance et désignation(cette dernière étant ensuite indexé par les moteurs de recherche et permet ainsi de savoir quels contenus sont sur vos pages).
_CSS sert à la mise en page, présentation, couleurs etc...des contenus listés et désignés(en tant que paragraphe texte, image, formulaire, titre etc...) par HTML
JavaScript: programmer ce qui permet de tester, valider, vérifier des valeurs(variables ou données) mais aussi et surtout de modifier à l'envie le contenu textuel de la page(HTML et CSS, leurs valeurs et contenus) et permettre ainsi l'interactivité. Son paradigme le plus commun est bien sûr l'interactivité soit réagir à des événements déclenchés.
