Introduction
Technologie
à l’informatique
Web
Pr. Oumaima STITINI
2024/2025
Chapitre 1: Introduction générale
aux technologies du web
Partie 3: Création de formulaire
Les zones de saisie
Objectifs
● Apprendre les notions de bases pour créer les zones de saisie .
● Savoir comment construire les zones d’options.
● Se familiariser avec les cases à cocher.
● Etre capable de mener à bien la construction d’un site via
l’utilisation d’un formulaire.
5
Les zones de texte
● Il y a deux différents types de zones de texte:
○ La zone de texte monoligne: on ne peut y écrire qu'une seule
ligne. Elle sert à saisir des textes courts.
■ Syntaxe: <input type="text" />
○ La zone de texte multiligne: cette zone de texte permet d'écrire
une quantité importante de texte sur plusieurs lignes.
■ Syntaxe:
■ <textarea rows="10" cols="50"> une valeur par défaut
</textarea>
● rows: indique le nombre de lignes de texte qui peuvent
être affichées simultanément.
● cols: indique le nombre de colonnes.
Les zones de texte:
Date
● La zone de date doit avoir pour type date <input type=
"date" / >
○ date: pour la date (05/08/1985 par exemple)
○ time: pour l'heure (13:37 par exemple)
○ week: pour la semaine.
○ month: pour le mois.
○ datetime: pour la date et l'heure (avec gestion du
décalage horaire).
○ datetime-local: pour la date et l'heure (sans gestion du
décalage horaire).
Les zones de texte:
formulaire
● La zone de mot de passe: <input type= "password " />
● La zone d’ E-mail: <input type="email " />
● La zone de numéro de téléphone: <input type= "tel" />
○ placeholder="[Link].15"
○ pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required
Les zones de texte:
formulaire
● La zone d’un URL: <input type="url" />
● La zone de nombre: <input type= "number " />
○ min=La valeur minimale.
○ max=La valeur maximale.
● La zone de recherche: <input type="search " />
Les zones de texte:
formulaire
● La zone de saisie de couleur: <input type="color " />
○ value="#ff0000"
Quelques attributs supplémentaires
● Exemple: <input type="text" name="prenom" id="prenom"
placeholder="Ex:Oumaima" size="30" maxlength="10" />
○ name: pour donner un nom au champ .
○ id: pour donner un identifiant au champ.
○ size: pour agrandir le champ.
○ maxlength: pour limiter le nombre de caractères à saisir.
○ value: pour pré-remplir le champ avec une valeur par défaut.
○ placeholder: pour donner une indication (exemple) sur le
contenu du champ. Il disparaîtra dès que le visiteur aura cliqué à
l'intérieur du champ.
Les zones d’option
Les boutons radios
● Les boutons radio: sélectionner un seul choix parmi plusieurs.
● Les attributs:
○ type="radio": spécifie qu’il s’agit d’un bouton radio et qu’il faut
cocher une seule proposition.
○ value: spécifie ce qui sera envoyé si l'utilisateur sélectionne un
certain bouton. Seulement une valeur sera envoyée.
○ name: décide à quel ensemble de boutons appartient le bouton
sélectionné.
Les boutons radios: Exemple
<p> Veuillez indiquer la tranche d'âge dans laquelle vous vous situez: <br />
<input type="radio " name="age" value="moins18 " id="moins18"/> <label
for="moins18">Moins de 18 ans</label><br />
<input type="radio " name="age" value="medium18-25 " id="medium18-25"
/><label for="medium18-25">18-25 ans</label><br />
<input type="radio " name="age" value="medium25-30 " id="medium25-30"
/> <label for="medium25-40">25-30 ans</label> <br />
<input type="radio " name="age" value="plus30 " id="plus30" />
<label for="plus30">Encore plus vieux que ça ?!</label>
</p>
Les boutons radios: Exemple
Les cases à cocher
Les boutons radios: Exemple
● Les cases à cocher permet aux utilisateurs de choisir une, deux ou
plus, variantes de réponses.
● Les attributs name et value sont utilisés de la même manière que
pour le bouton radio.
<p> Cochez les modules que vous aimerez apprendre :<br />
<input type="checkbox " name="java " id="java" checked /><label for=" java
"> Java </label> <br/>
<input type="checkbox " name="ihm" id=" ihm " /><label for=" ihm "> IHM
</label><br />
<input type="checkbox " name="c++" id="c++" /><label for="c++"
>C++</label>
</p>
Les boutons radios: Exemple
Les listes déroulantes
Les listes déroulantes
● La balise <SELECT></SELECT> indique au browser l'usage d'une liste
déroulante.
● Les éléments de la liste sont introduits par la balise
<OPTION></OPTION>.
● Exemple:
<select name="pays" id="pays">
<option value="Maroc" selected>Maroc</option>
<option value=« Algérie">Algérie</option>
<option value=« Tunisie">Tunisie</option>
</select>
Les listes déroulantes
● Sélectionner une option par défaut:
○ <option value="canada" selected >Canada</option>
● Multiple sélections:
<select name="pays" size="3" multiple >
<option>New York </option>
<option>Bucharest</option>
<option>Madrid</option>
</select>
Les listes déroulantes
● Pour grouper les options on utilise la balise <optgroup> </optgroup>
<select name="pays" id="pays">
<optgroup label="Amérique">
<option value="canada">Canada</option>
<option value="etats-unis">Etats-Unis</option>
</optgroup>
<optgroup label="Asie">
<option value="chine">Chine</option>
<option value="japon">Japon</option>
</optgroup>
</select >
Types de bouton d'envoi
Les types de bouton
● Envoyer un formulaire:
<input type="submit " value="Submit" />
<button type="submit " form="nameform " >Submit</button>
● Remise à zéro du formulaire:
<input type="reset " value="Annuler" />
Les types de bouton
● Équivalent du bouton submit sous forme d'image :
○ type="image"
○ src="img_submit.gif"
○ alt="Submit"
○ width="48"
○ height="48">
● bouton géré en JavaScript pour exécuter des actions sur la page:
<input type= "button" value="ok" onclick="Valider()" />
Les formulaires
Les formulaires
● Syntaxe:
<form> <!– ici on insère les champs --> </form>
● Avec les attributs:
○ method: cet attribut indique par quel moyen les données vont
être envoyées (method=get ou post )
○ action: c'est l'adresse de la page ou du programme qui va traiter les
informations.
● Exemple:
○ <form method="post" action="[Link]"></form>
Les formulaires
● Champs cachés:
○ <input type="hidden " />
● Champ obligatoire:
○ <input type="text" name="prenom" id="prenom" required />
● Placer automatiquement le curseur dans un champ:
○ <input type="text" name="prenom" id="prenom" autofocus />
Les formulaires