Pr Bendahmane
25 September 2023 1
25 September 2023 2
1
25 September 2023 3
25 September 2023 4
2
Les formulaires-liste de sélection
25 September 2023 5
Les formulaires-liste de sélection
25 September 2023 6
3
25 September 2023 7
25 September 2023 8
4
25 September 2023 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.
25 September 2023 10
5
25 September 2023 11
25 September 2023 12
6
25 September 2023 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="[Link]
25 September 2023 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.
25 September 2023 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.
25 September 2023 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" >
25 September 2023 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="[Link]=[Link]*[Link]">
<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
25 September 2023 46
25 September 2023 48
18
25 September 2023 49
25 September 2023 51
19
25 September 2023 53
25 September 2023 57
20
25 September 2023 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%;
25 September 2023 60
21
25 September 2023 61
25 September 2023 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
25 September 2023 63
25 September 2023 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.
25 September 2023 65
25 September 2023 66
24
