Pr Bendahmane
2 February 2025 1
2 February 2025 2
1
2 February 2025 3
2 February 2025 4
2
Les formulaires-liste de sélection
2 February 2025 5
Les formulaires-liste de sélection
2 February 2025 6
3
2 February 2025 7
2 February 2025 8
4
2 February 2025 9
<form action="#" method="GET">
<fieldset>
<legend>Infos utilisateur</legend>
Prénom : <input type="text" name="prenom">
<input type="submit">
</fieldset>
</form>
L'élément <fieldset> est utilisé pour regrouper les données du formulaires.
2 February 2025 10
5
2 February 2025 11
2 February 2025 12
6
2 February 2025 13
Les formulaires sont délimités par la balise <FORM> ... </FORM>, une
balise qui permet de regrouper plusieurs éléments de formulaire
(boutons,champs de saisie,...) et qui possède les attributs obligatoires
suivants :
METHOD indique sous quelle forme seront envoyées les réponses
« POST » est la valeur qui correspond à un envoi de données stockées
dans le corps de la requête, tandis que « GET » correspond à un envoi des
données codées dans l'URL, et séparées de l'adresse du script par un
point d'interrogation
ACTION indique l'adresse d'envoi .
<FORM METHOD=GET ACTION="http://www.menara.ma">
2 February 2025 14
7
La méthode GET est la valeur de méthode par défaut. On l'utilise de
préférence sauf si on ne veut pas que les paramètres soient ajoutés à
l'URL. Elle permet de récupérer les données passées à la page avec du
code JavaScript.
La méthode POST est indispensable pour des données de taille
importante. Si l'on utilise POST, on doit intégrer du code PHP (ou autre
langage) dans la page ou les données seront utilisées.
2 February 2025 15
GET est préférable pour les données non sécurisées, comme les chaînes de requête dans
Google
Toujours utiliser POST si les données de formulaire contiennent des informations sensibles
ou personnelles.
2 February 2025 16
8
<input type="button"> <input type="image">
<input type="checkbox"> <input type="number">
<input type="color"> <input type="password">
<input type="date"> <input type="radio">
<input type="email"> <input type="range">
<input type="file"> <input type="reset">
<input type="hidden" > <input type="search" >
2 February 2025 17
ATTRIBUT AUTOFOCUS
Permet de mettre le focus sur un champ particulier d’un formulaire, sitôt la
page chargée entièrement dans le navigateur.
<form action="">
Nom:<input type="text" name="nom" autofocus="autofocus"/>
Prénom: <input type="text" name="pre"/>
<input type="submit"/>
</form>
9
LES NOUVEAUX CHAMPS <INPUT>
De nombreux nouveaux types de champs <input> ont été introduits, tous ne
sont pas encore supportés, même par les versions les plus récentes des
navigateurs
color, date, datetime, datetime-local, email, month, number, range, search,
tel, time, url, week
Nous allons voir des exemples de quelques un de ces champs
LE CHAMP COLOR
Choisissez une couleur: <input type="color" name="favcolor" />
10
LE CHAMP DATE
Anniversaire: <input type="date" name="bday" />
adapte le clavier sur mobiles
Solution de repli : lib javascript jQuery UI, Dojo, etc.
LE CHAMP DATETIME-LOCAL
Permet de choisir la date et l’heure
Support idem type=date
Anniversaire : <input type="datetime-local" name="bdaytime" />
11
LE CHAMP WEEK
Choisissez la semaine : <input type="week" name=“no_semaine" />
LE CHAMP MONTH
<input type="month" name="bdaymonth" />
Idem date mais permet de choisir juste le mois
12
LE CHAMP EMAIL
E-mail: <input type="email" name="useremail" />
Intérêt : propose un clavier contextualisé sur mobile ou tablette
Attributs implicites “required”, “invalid” etc.
Possibilité de styler la saisie
LE CHAMP NUMBER
<input type="number" name="quantity" min="1" max="5" />
Attributs possibles : max, min, step, value (valeur par défaut)
Clavier contextuel sur mobiles, validations idem type=email
13
LE CHAMP RANGE
<input type="range" name=“n" min="1" max="10" />
Attributs : idem que ceux de type=number
Propose un clavier contextuel sur mobile
LE CHAMP TELEPHONE
Telephone: <input type="tel" name="usrtel" />
Intérêt principal : tablettes, smartphones !
14
LE CHAMP OUTPUT
<form oninput="o.value=a.value*b.value">
<input name="a" value="2" type="number"> x <input name="b"
value="3" type="number"> = <output name="o">6</output>
</form>
Sitôt qu’on a saisi les deux premières valeurs le champ <output> est mis à jour,
pas besoin de JavaScript !
LE CHAMP DATALIST
Cette balise sert à créer une liste de suggestions associée à un champ
(comme dans Google Suggest).
L'id du tag <datalist> doit être identique à la valeur de l’attribut "list " du
champ <input> associé.
15
LE CHAMP DATALIST : EXEMPLE
<form action="" method="">
<input list="browsers" name="browser" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" />
</form>
Le champs de saisie va proposer une liste avec de l’auto-complétion :
PRÉSENTATION HTML DES IINPUTS
Après les nouveau Type, on trouver de nouveaux attributs qui s’appliquent à
tous les champs, et permet aussi de sortir des champs des formulaires lui
même tout en y étant rattachés.
Cela permet plus de souplesse pour la création de l’interface utilisateur.
16
ATTRIBUT MULTIPLE
Attribut qui permet de saisir plusieurs information de la même nature et
même nom dans le même champ du formulaire.
Peut-être utilisé aussi avec les types file et email
<form action="demo_form.asp">
Select images: <input type="file"
name="img" multiple="multiple" />
<input type="submit" />
</form>
ATTRIBUT AUTOFOCUS
Permet de mettre le focus sur un champ particulier d’un formulaire, sitôt la
page chargée entièrement dans le navigateur.
<form action="demo_form.php">
Nom:<input type="text" name="nom"
autofocus="autofocus"/><br />
Prénom: <input type="text" name="pre"/><br />
<input type="submit"/>
</form>
17
2 February 2025 46
2 February 2025 48
18
2 February 2025 49
2 February 2025 51
19
2 February 2025 53
2 February 2025 57
20
2 February 2025 59
Attention! <FRAMESET></FRAMESET> remplace
<BODY></BODY>
L'attribut ROWS="hauteur1,hauteur2,...,hauteurN"
définit la hauteur des différentes fenêtres en cas de
division horizontale.
La hauteur s'exprime en pixels ou en %. Dans ce cas,
on veillera à ce que le total soit égal à100%;
2 February 2025 60
21
2 February 2025 61
2 February 2025 62
22
<FRAME SRC="url_à_mettre_dans_la_zone"
▪ NAME="donne_un_nom_à_cette_fenêtre"
▪ MARGINWIDTH="marges_gauches_et_droites_en_pixels"
▪ MARGINHEIGHT="marges_hautes_et_basses_en_pixels"
▪ SCROLLING="yes" si on veut (yes)(ou non(no), ou automatique(auto))
l'échelle
▪ NORESIZE > empêche l'utilisateur de bouger les positions des zones
2 February 2025 63
2 February 2025 64
23
Réaliser le "frameset" illustré par la copie d'écran ci-dessous :la zone de
"pied de page" doit avoir 30 pixels de haut et ne doit pas être modifiable.
la zone de "navigation" doit avoir 160 pixels de large, et cette largeur doit
pouvoir être modifiable
les zones de "navigation" et de page proprement dite doivent avoir des
ascenseurs si nécessaire
les bordures entre frames doivent avoir 2 pixels de large
donnez des couleurs de fond différentes à chacun de ces frames
lorsque l'on clique sur "111" ou "222" dans le frame de navigation, la page
correspondante doit s'afficher dans la zone de page ; par contre lorsque
l'on clique sur "back" la page correspondante doit remplir toute la
fenêtre.
2 February 2025 65
2 February 2025 66
24
