Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
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
2
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é).
3
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
4
Les types d’éléments de formulaire
5
Exemple de formulaire text
<HTML> <BODY> Envoi du contenu du formulaire dans un <strong>mail</strong> destiné à <FORM 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
6
Exemple de formulaire text
<HTML> <BODY> <FORM> <PRE> Votre Nom : <INPUT TYPE="text" NAME="Nom" SIZE="50"> Votre Courriel :<INPUT TYPE="text" NAME=" " 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
7
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
8
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
9
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
10
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
11
Exemple de formulaire cases à cocher
<HTML> <BODY> Vous aimez : <FORM METHOD=GET ACTION=" <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
12
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
13
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
14
Exemple de formulaire file
<HTML> <BODY> <FORM METHOD=GET ACTION=" <INPUT TYPE=FILE NAME=Telechargement> </FORM> </BODY> </HTML> file.html
15
FIN du cours 4
Présentations similaires
