AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [HTML] Créer un formulaire

    Partagez
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Mer 17 Déc 2008 - 3:30

    Bonsoir les cocos.
    Je sais bien que ces quelques lignes ne serviront pas à grand monde... mais un jour peut-être vous en aurez besoin, et là je sais qu'elles vous serviront.
    Dans cette espoir je vous fais un petit topo sur la structuration d'un formulaire en HTML !! Je dis bien en HTML, le traitement en PHP c'est une autre histoire Razz

    Formulaire en HTML


    Je vais vous faire peur d'entrée... voici un code :

    Code:
    <form action="mailto:destinataire@hotmail.fr" method="post" enctype="text/plain">
    <input type="hidden" name="Riku Asakura" value="Formulaire" />
    Votre nom : <input type="text" name="nom" />
    <br />
    Votre Prénom : <input type="text" name="Prénom" /> 
    <br />
    Votre adresse : <input type="text" name="Adresse" size="80" /> 
    <br />
    <textarea name="texte" cols=35 rows=10></textarea>
    <br />
    Votre mot de passe : <input type="password" name="pass" size=9 maxlenght=10 />
    <br />
    Votre site : <input type="text" name="url" size=50 value="http://" />
    <br />
    <input type="submit" value="Envoyer le formulaire " name="submit" />
    <br />
    <input type="reset" value="Effacer " name="reset" />
     
    Ce qui donne:


    Votre nom :

    Votre Prénom :

    Votre adresse :



    Votre mot de passe :

    Votre site :





    Quelques explications :
    • action : Donne l'adresse du script qui va gérer les données envoyées. Si vous avez appris le php, vous saurez qu'on peut aussi utiliser une page de traitement. Ce formulaire là vous permet de faire envoyer un mail en passant par un logiciel de messagerie (outlook, live mail etc..).
    • disabled : créé une liste ou un champs grisé.
    • "hidden" : Contenu de type="" - Créé une liste ou un champs masqué.
    • "checkbox" : Contenu de type="" - Créé une case à cocher.
    • "radio" : Contenu dans type="" - Créé un bouton avec choix unique mais varié.
    • "button" : Contenu de type="" - Créé un bouton cliquable.
    • cols : Détermine le nombre maximum de caractères que peut contenir une ligne.
    • maxlenght : délimite le nombre de caractères maximum dans un champ.
    • method : Dans la balise form. C'est la méthode employée pour traiter les données. Il faut savoir qu'il en existe deux : POST et GET. L'un fait passer les données du formulaire via l'url (GET) l'autre via un traitement PHP plus précis (POST), je ne rentrerai pas dans les détails ici.
    • name : Nomme un champs du formulaire. Pour les boutons de type Radio il vous faudra le même
    • name pour créer un même groupe de bouton.(cf. exemple plus bas)
    • readonly : empêche les utilisateur de modifier le texte par défaut d'un champ.
    • rows : Représente le nombre de lignes définies pour la hauteur d'un champ textarea.
    • "password" : contenu de type="" - Créé un champ de saisie crypté.
    • value : Donne une valeur par défaut à un champ.
    • "reset" : Contenu dans type="" - Créé un bouton d'effacement (déconseillé)
    • "submit" : Bouton d'envoi de données.
    • type : Le fameux type="". Il est placé dans une balise < input >, il permet de faire un choix entre différents input (bouton, radio, chekbox, champs mdp, champs texte etc..)
    • size : définit la largeur d'un champ.


    Voici un autre bout de code qui vous permettra d'ajouter une liste déroulante à votre formulaire.
    Code:
    <form>
    N-U est :
    <select name="liste">
    <option value="excellent">Excellent</option>
    <option value="super">Super</option>
    <option value="pas mal">Pas mal</option>
    <option value="pas top">Pas top</option>
    <option value="nul">Nul</option>
    </select></form>
    Résultat :
    N-U est :



    - Créer un choix par défaut dans une liste déroulante
    Code:
    <form>
    Never-Utopia est :
    <select name="liste">
    <option value="excellent">Excellent</option>
    <option value="super" selected="selected">Super</option>
    <option value="pas mal">Pas mal</option>
    <option value="pas top">Pas top</option>
    <option value="nul">Nul</option>
    </select></form>
    Donnera :

    Never-Utopia est :


    Vous pouvez voir que pour créer ce choix par défaut j'ai rajouté l'attribut
    Code:
    selected="selected"
    dans l'option à sélectionner par défaut.

    On peut faire pareil avec un choix fait par défaut dans des boutons radio, ou checkbox.
    Radio
    Code:
    <form>
    Les tutos de N-U sont :
    <input type="radio" name="tuto" value="excellents" />Excellents<br />
    <input type="radio" name="tuto" value="bons"  checked="checked" />bons<br />
    <input type="radio" name="tuto" value="pas-mal" />Pas Mal<br />
    <input type="radio" name="tuto" value="bof" />bof<br />
    <input type="radio" name="tuto" value="nuls" />nuls</form>

    Les tutos de N-U sont :
    Excellents

    bons

    Pas Mal

    bof

    nul


    Sauf qu'ici on aura utilisé
    Code:
     checked="checked"
    pour présélectionner un choix.
    On peut faire de la même manière avec de véritables checkbox (donc plusieurs choix possibles).
    Checkbox
    Code:
    <form>Vous trouvez que je suis :
    <input type="checkbox" value="excellent" />Barbant<br />
    <input type="checkbox" value="bon" checked="checked" />Agréable<br />
    <input type="checkbox" value="pas-mal"  checked="checked" />Beau gosse<br />
    <input type="checkbox" value="bof" />Trop long<br />
    <input type="checkbox" value="nul" />Je sais pô...</form>
    Vous trouvez que je suis :
    Barbant

    Agréable

    Beau gosse

    Trop long

    Je sais pô...


    Ainsi ici on aura deux présélections, mais la possibilités de désélectionner ou d'avoir d'autres choix.
    Voilà... bon ne faites pas attention aux présélections, en fait je ne suis pas que beau gosse XD
    ptdr !

    Enjoy Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Periwink
    MasculinAge : 22Messages : 708

    le Mer 17 Déc 2008 - 13:26

    Merci bcp (c'est justement la partie qui m'embrouillait un peu.. ^^)!

    Mais faudrait pas le poster dans les astuces?

    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Mer 17 Déc 2008 - 14:10

    Justement pour moi les astuces sont plus destinées à ce qui touche vos forums.
    Or ici ça touche le codage de manière générale.
    On a beau pouvoir faire ça sur FA, il suffit de désactiver le HTML sur les forums pour le rendre inutile.

    Bref, je pense que ça a plus sa place ici ^^

    De toute manière le formulaire fera l'objet d'un cours lorsque j'aurais avancé un peu plus celui du site de N-U Razz

    Au plaisir Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Shinomix
    MasculinAge : 23Messages : 3445

    le Mer 17 Déc 2008 - 15:33

    Merci pour ce tuto Riku ^_^
    J'avais déjà la théorie sur ce procédé mais c'est sympa de faire un tuto avec une autre version que celle de mateo Wink
    Bref, très bonne iniative ^^



    Wasp
    FémininAge : 23Messages : 4459

    le Mer 17 Déc 2008 - 16:04

    • U_u' Waip', mais moi, ce qui m'intéresse c'est le traitement PHp juste après =X xD




      Grand merci à Lilith pour le kit =)
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Mer 17 Déc 2008 - 16:59

    MDR !!
    Ben si tu commences à toucher PHP mon MP est à ta disposition.
    Le traitement n'est pas compliqué au fond, il faut juste vérifier que chacun des champs contient une info, si c'est le cas on utilise la fonction mail() pour envoyer le message.

    Bref, je ferais peut-être un tuto là dessus... mais pas tant que j'aurais pas fini les bases HTML/CSS Razz
    Tchuuuss Wink




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Contenu sponsorisé

    Aujourd'hui à 19:08


      La date/heure actuelle est Jeu 8 Déc 2016 - 19:08