Cours n° 4 Le langage HTML Prof. : E. BAKKI وزارة التربية الوطنية والتعليم العالي وتكوين الأطر والبحث العلمي الأكاديمية الجهوية للتربية و التكوين لجهة وادي الذهب وأوسرد ثانوية للا خد يجة المرجعية Lycée Lala Khadija Référentiel Le langage HTML Prof. : E. BAKKI Année scolaire 2008/2009
Les formulaires La création d’une formulaire se fait avec la balise <FORM ACTION="URL d'un script" METHOD="POST ou GET"> // la description des différents éléments du formulaire </FORM> Avec ACTION on désigne le fichier qui devra être exécuté une fois que l’utilisateur aura cliqué sur le bouton qui valide le formulaire. Avec METHOD on précise le type de passage de paramètres : soit POST, soit GET (POST est plus souvent utilisé et conseillé, pour des raisons de sécurité).
Pour créer une zone de texte, on utilise la balise textarea Éléments de formulaire Zone de saisie : <INPUT NAME="identificateur de la zone" TYPE="Type de la zone"> Le TYPE peut être, notamment : text (type par défaut) = une ligne de saisie submit = le bouton de soumission du formulaire (validation) reset = le bouton d’annulation du formulaire (remise à zéro) radio = bouton radio (De 0 à N choix parmi N) checkbox = case à cocher (1 choix parmi N) Pour créer une zone de texte, on utilise la balise textarea
Les types d’éléments de formulaire
Exemple de formulaire text <HTML> <BODY> Envoi du contenu du formulaire dans un <strong>mail</strong> destiné à machine@caramail.fr <FORM ACTION="mailto:machine@caramail.fr" METHOD="POST" NAME="Envoi_Mail"> Taper votre message ici : <input type="text" size="20" name="Commentaire"> <input type="submit" name="Bouton_Envoyer" value="Cliquer ici pour Envoyer"> </FORM> </BODY> </HTML> Formulaire.html
Exemple de formulaire text <HTML> <BODY> <FORM> <PRE> Votre Nom : <INPUT TYPE="text" NAME="Nom" SIZE="50"> Votre Courriel :<INPUT TYPE="text" NAME="E-mail" SIZE="50"> Votre Adresse : <INPUT TYPE="text" NAME="Adresse" SIZE="30"> <INPUT TYPE="text" NAME="suite_adresse" SIZE="30"> Votre CP : <INPUT TYPE="text" NAME="code postal" SIZE="5" MAXLENGTH=5> Votre Ville : <INPUT TYPE="text" NAME="ville" SIZE="50"> </PRE> <INPUT TYPE=RESET VALUE="Tout effacer"> <INPUT TYPE=SUBMIT VALUE="OK, c'est parti"> </FORM> </BODY> </HTML> Formulaire2.html
Exemple de formulaire textarea <HTML> <BODY> <FORM METHOD=POST ACTION="fichier_destination.asp"> <TEXTAREA NAME="unNom" ROWS=5 COLS=40> Contenu ... </TEXTAREA> <INPUT TYPE=SUBMIT VALUE="Envoyer le formulaire"> </FORM> </BODY> </HTML> Formulaire_textarea.html
Exemple de formulaire radio <HTML> <BODY> <B>Votre mode de paiement</B> <FORM> <INPUT NAME="payer" TYPE="radio" VALUE="comptant">Comptant <INPUT NAME="payer" TYPE="radio" VALUE="cheque">Chèque <INPUT NAME="payer" TYPE="radio" VALUE="cc">Carte de crédit <BR> <INPUT TYPE="RADIO" NAME="monnaie" VALUE="Francs"> En Francs <INPUT TYPE="RADIO" NAME="monnaie" VALUE="Euros" CHECKED> En Euros </FORM> </BODY> </HTML> formulaire_radio.html
Exemple de formulaire option <HTML> <BODY> <FORM> <SELECT NAME="Club"> <OPTION VALUE="OM"> Marseille <OPTION VALUE="PSG"> Paris <OPTION VALUE="RC LENS"> Lens <OPTION SELECTED VALUE="LOSC"> Lille </SELECT> </FORM> </BODY> </HTML> formulaire_choix.html
Exemple de formulaire sélection multiple <HTML> <BODY> <FORM> Quel type de Voiture ? <SELECT MULTIPLE NAME="all"> <OPTION VALUE="Porsche"> Porsche <OPTION VALUE="BMW"> BMW <OPTION VALUE="FIAT"> FIAT <OPTION VALUE="LOTUS"> LOTUS <OPTION VALUE="autre"> Autre choix </SELECT> </FORM> </BODY> </HTML> formulaire_autre_choix.html
Exemple de formulaire cases à cocher <HTML> <BODY> Vous aimez : <FORM METHOD=GET ACTION="http://www.monsite.com"> <INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Fric" CHECKED> L'argent <INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Boire"> Bien Boire <INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Manger"> Bien manger <INPUT TYPE="CHECKBOX" NAME="aime" VALUE="TV"> La télévision <INPUT TYPE="CHECKBOX" NAME="aime" VALUE="Info"> L'actualité <HR> Vous n'aimez pas : <BR> <INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Fric"> L'argent <INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Foule"> La foule <INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Baston"> La violence <INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="TV"> La télévision <INPUT TYPE="CHECKBOX" NAME="aimepas" VALUE="Julien Lepers" CHECKED> Julien Lepers </FORM> </BODY> </HTML> cocher.html
Exemple de formulaire cases à cocher + image Même code que pour cocher.html avec cette ligne en plus avant le </FORM> : <INPUT TYPE=IMAGE NAME=image-valider SRC="envoyer.bmp"> cocher-image.html
Exemple de formulaire password <HTML> <BODY> <FORM METHOD=POST ACTION="verif.php"> Entrez votre login : <INPUT TYPE=Text NAME="login" SIZE=30> <BR> Entrez votre mot de passe : <INPUT TYPE=PASSWORD NAME="motdepasse" SIZE=30> <INPUT TYPE=reset Value="RAZ"> <INPUT TYPE=submit Value="VALIDER"> </FORM> </BODY> </HTML> password.html
Exemple de formulaire file <HTML> <BODY> <FORM METHOD=GET ACTION="http://www.monsite.com"> <INPUT TYPE=FILE NAME=Telechargement> </FORM> </BODY> </HTML> file.html
FIN du cours 4