Header
Partagez | 

Créer un formulaire - Sans JavaScript!

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Xjujuxleo

Doyen
Bons Points (BP) : 1136
Voir le profil de l'utilisateur

Message Sujet: Créer un formulaire - Sans JavaScript!   Mar 23 Avr - 18:06

Le formulaire - Sans JavaScript!



Bonjour,

Donc aujourd'hui, je vais tenter de vous expliquer le fonctionnement du formulaire.

  • Nous allons donc voir les composant du code étape par étape.


  • ●Donc, la première partie du code sera:

    Code:
    <form action="/posting.forum" method="post" name="post"></form>

    Cette partie est l'une des parties les plus importantes, elle délimite ce que le formulaire prendra dans son envoi. Rien à modifier sur cette partie.

    ●La deuxième partie sera:

    *Pour une seule ligne
    Code:
    <input type="text" size="16" class="post" name="message" maxlength="12" value="Tape ta réponse ici!"/>

    Donc, il faut un peu d'explication sur cette partie je pense.
    -"type="text"" = la forme sous lequel le texte s'affichera dans la barre, si vous remplacez "text" par "password", le texte s'affichera sous sorte de petits "●".
    -"size="16""= Cette partie sera la longueur de votre barre de tape, pour agrandir ou diminuer, changez le chiffre 16.
    -"maxlength="12"" = Cette partie sert à limiter le nombre de caractères dans votre formulaire, là, vous pourez mettre 12 lettres maximum, pour ne mettre aucune limite, retirez cette partie Wink.
    -"value="Tape ta réponse ici!"" = Ceci est le texte défini dans le membre arrive devant le formulaire.

    Pour le moment ça donne:

    *Pour un multi-lignes:
    Code:
    <textarea cols="40" rows="4" class="post" name="message" ></textarea>
    Donc, j'explique un peu les composants:
    -"cols="40"" = Cette partie définit la largeur de la barre de tape, pour le changer, modifiez la valeur "40".
    -"rows="4"" = Pour cette partie, on définit la hauteur que fera le formulaire.

    Ce qui donne:

    ●La troisième partie du code est:

    Code:
    <input type="hidden" name="t" value="2334"/><input type="hidden" name="mode" value="reply" />
    Donc cette partie est la partie qui sert à envoyer vos messages, vous ne pouvez modifier qu'une des chose et qui d'ailleurs est à changer obligatoirement, vous devrez changer:

    -"value="2334"" = Le topic dans lequel sera posté votre message, vous avez ces 4 chiffres de cette façon:
    Citation :
    http://www.school-of-progress.fr/concours-jeux-f37/mon-concours-sera-t3960.htm
    Vous placerez donc ces 4 chiffres (il se peut que vous n'en n'ayez que 1, 2, 3 ou plus), à la place du 2334.

    ●La 4éme et dernière partie du code est:

    Code:
    <br><input type="submit" name="post" class="mainoption" value="Envoyer" />
    Dans cette partie du code, euh, il ne vous est possible que de changer le nom du bouton, en changeant:
    -"value="Envoyer"" = Vous changez le mot "envoyer" par le mot que vous voulez.

    Ce qui donne comme code:
    *Pour le simple:
    Spoiler:
     

    *Pour le multi-lignes:
    Spoiler:
     

    Ce qui donne au complet:

    *Pour le simple:



    *Pour le multi-lignes:



    Voilà, vous savez toutes les bases Smile

    Le formulaire - Sans JavaScript! - Mise en page


    Nous voilà dans la deuxième partie du tuto, nous allons voir ensemble la mise en page.
    Pour les maniaques qui veulent mettre ça en plus présentable ^^

    Donc, un seul moyen de mettre en page les cases:

    Code:
    style='border:2px solid #C6B38E;background-image:url(http://img267.imageshack.us/img267/6506/wallrep.jpg);cursor:pointer;font-size:9pt;font-family:arial;font-weight:bold;color:'#694F29'
    Donc, je vous explique le code:
    -"border:2px" = le 2 détermine la taille de bordure du cadre.
    -"solid #C6B38E" = Ceci détermine la couleur du bord du cadre, pour changer la couleur, changer le #C6B38E par votre code couleur (vous pouvez trouver les codes couleurs [ICI])
    -"background-image:url(http://img267.imageshack.us/img267/6506/wallrep.jpg)" = ici, c'est l'image de fond, ici, j'ai mis le fond de SoP, il y a un moyen de mettre une couleur en faisant: background-color:'#694F29', et comme pour le précédent, vous changez le '#694F29' par la couleur voulue.
    -"cursor:pointer" = Ceci est la forme du curseur quand on le passe dans la case du formulaire. Pas moyen de mettre une image.
    -"font-size:9pt" = La taille de l'écriture dans le formulaire, changez le 9 pour agrandir/réduire la taille du texte.
    -"font-family:arial" = La police de l'écriture dans le formulaire, changez le "Arial" pour avoir une autre police.
    -"font-weight:bold" = Ça met le texte en gras, vous pouvez le retirer, ce qui retirera la mise en gras du texte.
    -"color:'#694F29'" = Ici, on met la couleur du texte, vous pouvez donc changer la couleur du texte en changeant le #694F29 par votre code couleur (vous pouvez trouver les codes couleurs [ICI]).

    Ce qui donne comme code:
    *Pour le simple:
    Spoiler:
     

    *Pour le multi-lignes:
    Spoiler:
     

    Et l'exemple:

    *Pour le simple:



    *Pour le multi-lignes:



    A vous de mettre en page à vos souhaits maintenant!

    Vous allez devenir le meilleur. :p

    Xjujuxleo




    Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

    Idea N'oubliez pas de lire et de suivre les [règles de la section].

    Je soussigné(e), Dr.Sacha,  accepte qu'un directeur reposte le tutoriel "Créer un formulaire - Sans JS" tel que je l'ai rédigé dans le cas où mon compte serait suprimer.
    Revenir en haut Aller en bas


    “The future belongs to those who believe in the beauty of their dreams.” © Eleanor Roosevelt

    avatar

    Mes clubs


    En savoir plus
    Mes clubs extra-scolaires:

    Miettes

    Doyenne
    Bons Points (BP) : 113
    Voir le profil de l'utilisateur

    Message Sujet: Re: Créer un formulaire - Sans JavaScript!   Dim 15 Sep - 8:29

    Questions fréquentes



    Ce message apparaît lorsque j'utilise le formulaire. Que faire ?



    Miettes a écrit:
    Alors juste une erreur de config des paramètres de sécurité de FA :
    PA >> Général >> sécurité >> Interdire les formulaires non officiels à poster des messages et messages privés sur le forum : non

    Peut-on faire un formulaire pour un message personnel (MP) ?



    Miettes a écrit:
    Code:
    <center>
      <form action="/privmsg" method="post" name="post">
          <input type="text" size="18" class="post" name="message" maxlength="12" value="Tape ta réponse      ici!"/>
          <input class="post" type="hidden" type="text" id="username" name="username[]" value="P" size="25"  tabindex="1" />
          <input class="post" type="hidden" type="text" name="subject" value="S">
          <input type="hidden" name="mode" value="post" />
          <br />
          <input type="submit" name="post" class="mainoption" value="Envoyer" />
      </form>
    </center>
    Il faut que tu remplaces le "p" ici par le pseudo du membre qui va recevoir le MP
    Code:
    value="P"
    Et le S ici par le nom(sujet) du mp
    Code:
    value="S"

    Comment faire en sorte que le formulaire ouvre un nouveau topic ?



    voici le code
    Code:
    <center>
       <form action="/post?mode=newtopic" method="post" name="post">
          <textarea cols="40" rows="4" class="post" name="message" ></textarea>
          <input type="hidden" name="f" value="22"/>
          <input type="hidden" name="subject" value="titre du sujet" /><br>
          <input type="submit" name="post" class="mainoption" value="Envoyer" />
       </form>
    </center>
    Changer value="22" par le numéro du forum ou doit etre posté le sujet
    changer value="titre du sujet" par le titre du sujet en question Smile
    Revenir en haut Aller en bas
    Créer un formulaire - Sans JavaScript!
    Page 1 sur 1
    Réponse rapide

    School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+