Partagez | 
 

 Créer un formulaire - Sans JavaScript!

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar
Bons Points (BP) : 1146

Voir le profil de l'utilisateur

MessageSujet: 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.
    ___________________


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

    avatar

    Miettes

    Pain perdu tout chaud

    Bons Points (BP) : 493

    Voir le profil de l'utilisateur

    MessageSujet: 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
     

    Créer un formulaire - Sans JavaScript!

    Voir le sujet précédent Voir le sujet suivant Revenir en haut 
    Page 1 sur 1
     Sujets similaires
    -
    » Créer un Accordéon
    » [résolu]Antivir me signale sans arrêt que j'ai un virus quand j'utilise firefox
    » [Résolu] Recherche d'un BON aspirateur de sites + formulaire informat
    » transferer SANS FIL la video d'un pc sur une tv
    » [Résolu] Clavier sans fil faisant des siennes...

    Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
    School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
    Sauter vers:  
    Espace Admin du site

    ©2008-2018 - School Of Progress - Toute reproduction totale ou partielle est interdite.
    Design réalisé par Mewyn - Forum hébergé par forumactif.com

    Les logos des SoPiens

    Nos correspondants