Intégration d'un formulaire avec boutton

mattmax -  
 aurio -
Bonjour,
Je souhaiterais intégrer tout le code d'un formulaire au milieu d'une page html en appuyant sur un bouton de la barre de navigation mais je ne sais pas comment faire (utiliser du js, jQuery…?)
Aidez moi svp…
Merci d'avance

1 réponse

  1. cs_PaTaTe Messages postés 1471 Date d'inscription   Statut Contributeur Dernière intervention   503
     
    Bonjour,

    Tout dépend ...

    Tu peux faire pour que le bouton te redirige vers une autre page t'affichant le formulaire
    Tu peux aussi mettre ton formulaire en display:none et quand tu appuie sur le bouton ça le passe en display:block
    Ou carrément générer du HTML en JS à l'appui sur le bouton.

    Tout est possible

    Cordialement,
    0
    1. mattmax
       
      C la troisième option que tu propose que je souhaiterais faire mais je ne sais pas comment m'y prendre
      0
      1. aurio > mattmax
         
        Salut,
        un regard sur le manuel JavaScript et vous auriez trouvé par vous même:
        créer un élément dans le DOM
        https://www.w3schools.com/jsref/met_document_createelement.asp
        à utiliser avec une méthode du genre:

        https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild

        Mais c'est plus compliqué à mettre en place que simplement écrire le HTML (du moins quand on a pas l'habitude)à la main pour l'afficher comme par exemple:
        https://www.w3schools.com/jsref/prop_html_innerhtml.asp


        ce qui donne ceci:

        document.getElementByID('container_formulaire').innerHTML='<form method="" action="#">
        /*etc pour le reste du HTML*/
        </form>'
        


        Une autre façon de faire est d'afficher un container masqué auparavant via des règles CSS et de changer le CSS concerné, ou même d'utiliser une fenêtre modale contenant le formulaire.

        Et pour les boutons il vous faut utiliser un 'écouteur' d'événement(clic par exemple) avec addEventListener

        Vous parlez de JavaScript, JQuery et ...
        JQuery est une utilisation de JavaScript (plus précisément une librairies de 'fonctions' toutes faites à utiliser) qui est parfois plus rapide et pratique à écrire. Ici je donne le JavaScript car avant tout c'est le principe que vous devez comprendre(et savoir quelques sont les fonctions du langage à utiliser).

        En JQuery (mais je déconseille si vous n'êtes pas déjà à l'aise avec JavaScript et ne savez faire tout ce que vous voulez avec) vous aurez des méthodes(noms des fonctions interne à un modèle de programmation objet) comme .click() .hide() et bien d'autres qui font la même chose ou regroupe plusieurs fonctions JavaScript d base en une seule mais ça revient au même...et si vous n'avez pas l'utilisté réelle de JQuery un programme JavaScript sera plus rapide qu'un programme JQuery car il n'y aura pas les fichiers JQuery à charger(même si le poids est négligeable ça reste vrai, enfin tout dépends aussi de la façon dont vous développez bien sûr).
        0
      2. aurio > aurio
         
        et pour créer une fenêtre modale (par exemple):

        https://web.developpez.com/actu/81519/Des-fenetres-modales-natives-en-HTML5/
        0