DAWDéveloppement Applications Web

Ouadfel Salima

Site du cours: http://salimaouadfel.e-monsite.com/

• Permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant par exemple un dialogue avec les internautes,.

• L’internaute saisit des informations en remplissant des champs ou en sélectionnant des choix, puis appuie sur un bouton de soumission (submit) pour l'envoyer .

Les formulaires

<form> </form> peut contenir les attributs suivants :

<form method= "post“ action=“script.php">

" get " fichier qui est chargé de traiter les données du formulaire côté serveur

• name : Un nom qui permet de distinguer les différents formulaires.

method : La méthode de transmission des valeurs par le formulaire

: get (par défaut) ou post.

action : L’URL du document chargé du traitement du formulaire (html, php,..)

détermine la méthode d’envoi des données vers le serveur

Déclaration du formulaire

Transport des données du formulaire• La méthode get: Les noms des éléments du formulaire et

leurs valeurs sélectionnées sont présentés au serveur selon la forme: url?nom-champ1=valeur & nom-champ2=valeur

4

Exemple

Transport des données du formulaire

Après soumission

? Séparation entre l’url et

les données& Séparation entre les

champs des données

= Séparation entre le

champ et sa donnée

Exemple

Transport des données du formulaire

• La méthode post: Les noms des éléments du formulaire et leurs valeurs sélectionnées sont présentés au serveur selon la forme: url(présente dans la partie action)

6

Exemple

Transport des données du formulaire

Après soumission

l’url

les formulaires/back_post.html

Exemple

L'internaute va saisir ses informations soit en remplissant

• des champs de saisie

– monoligne : nom, prénom (input).

– multilignes: commentaires( textarea)

• une liste déroulante (select).

• une case à cocher (radio, checkbox).

• Des boutons (submit, reset, button)

Contenu du formulaire

Contenu du formulaire

Les zones de saisie ont comme attributs essentiels:

• Name: nom de la zone

• Value: valeur initiale(par défaut)

valeur saisie par l’internaute.

champ de saisie multilignes: <textarea>

• L'élément <textarea> permet de définir une zone de saisie de texte qui s'étend sur plusieurs lignes.

• Attributs– rows="nombre" : nombre de lignes de la zone

– cols="nombre": nombre de colonnes de la zone.

– Name: nom de la zone

– Value: contenu de la zone

<textarea name=" commentaire" rows="3" cols="30>

value="Vous avez une zone de texte. Vous pouvez effacer

ce contenu ou y ajouter du texte ! "

</textarea>

10

Champ de saisie monoligne <input>

• Exemple :

<input type="text" name="nom" value="" size="5" />

• type définit la forme de la balise <input>, donc pour une zone de texte simple c'est "text".

• name est très important puisque c’est associé un nom à la zone de saisie.

• value définit le contenu du champ. Il sert aussi à initialiser le champ de saisie.

• size correspond à la largeur du champ.

Champ de saisie monoligne:<input>Attributs supplémentaires• maxlength indique la taille maximum de la zone ;• Placeholder: Donne une indication sur le contenu de la zone. Cette

indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.

• required: indique qu’un champ doit être rempli avant la soumission du formulaire.

Champ de saisie monoligne:<input>

• autofocus : permet de focaliser sur un champ dans la page.

• autocomplete (on /off): permet de compléter le champ à partir de valeurs passées. Par défaut elle est à on.

Attributs supplémentaires

Etiquette des champs de saisie: <label>

• Permet d'associer une étiquette à un champ de saisie.

• Le champ de saisie doit être nommé avec l'attribut id.

• L'attribut for spécifie l’id du champ de saisie auquel est associée l'étiquette.

• Si on clique sur l'étiquette, le champ de saisie prend le focus.

14

Optionnel. Un clic sur le label

sélectionne le champ de saisie

Les différents type de input

Input type = "text"

La valeur text va nous permettre de créer un

champ de saisie mono-ligne dans lequel

l’utilisateur entrera des données quelconques .

Les différents type de input

Input type = "password"

permet de créer un champ de saisie « sécurisé »

pour par exemple demander un mot de passe

aux utilisateurs.

Lorsque l’utilisateur écrit dans le champ, ce qu’il

écrit n’est pas affiché en clair mais est remplacé

par des astérisques ou des points.

Les différents type de input

Les différents type de input

Permet de saisir un numéro de tel mais aucun contrôle ne peut être fait.

On peut utiliser l’attribut pattern qui permet de donner une expression régulière validant l’entrée saisie.

Input type = " tel"

Un numéro de tel de la forme

031-45-23-00

Exemples de pattern

http://html5pattern.com/

EXEMPLE

Les différents type de input

Input type = "email"

Permettre de créer un champ de formulaire

devant recevoir une adresse email.

Ainsi, certains navigateurs récents vont tester la

valeur rentrée dans le champ par l’utilisateur afin

de s’assurer que celle-ci a bien la forme d’un

email (présence d’un @).

Les différents type de input

Si erreur dans la saisie

Les différents type de inputInput type = "url"

permettre de créer une zone de saisie

acceptant une URL par le protocole http:// ou

ftp:// ou mailto:.

Les différents type de input

Input type = " number"

La valeur number de l'attribut type va nous

permettre de créer une zone de saisie

n’acceptant que les nombres.

Selon le navigateur utilisé, une barre de

défilement de nombres va apparaître à droite du

champ créé.

Les différents type de input

Nombre

Les différents type de input

• Une autre manière pour les nombres

Input type = "range"

Par défaut la valeur min=0 et la valeur max=100

Les différents type de input

• Dans ce type les nombre saisies ne sont pas visibles pour l’internaute.

• On peut utiliser oninput et output pour les visualiser.

Input type = "range"

Nom du champ résultat

C’est le nom du champ à partir duquel le

résulat est calculé

Le calcul de la valeur du champ x

Exemple

Les différents type de input

Exemple

• Le type color permet de saisir une couleur à partir d’une palette présentée par le navigateur

input type=“color”

Les différents type de input

Champ de saisie en lecture seulementOn ajoute au champ l’un de ces attributs:

• readonly : le champs est en lecture uniquement (ne peut pas être modifié). – Son contenu valeur est specié dans l'attribut value.

• disabled : le champ est desactivé (couleur grise par défaut).– Le champ parait mais on ne peut pas y saisir des donnée.

– Son contenu valeur est specfié dans l'attribut value.

Les différents type de input

• Définit un champs caché. L'usager ne le voit pas mais il existe dans le code HTML.

• On l'utilise pour stocker des valeurs que le serveur envoie au navigateur

<input type="hidden" name="Identifiant" value="AOB12345" />

Input type=hidden

Exemple

Les différents type de input

Input type = " checkbox"

Les différents type de inputLes différents type de input

Exemple

Les différents type de input

• Une case peut être cochée par défaut au chargement de la page avec l'attribut checked :

Les différents type de input

Une case peut être cochée par défaut avec l'attribut checked

Input type = "radio"

Les listes déroulantes

Une option peut être sélectionnée par défaut, avec l'attribut selected

Plusieurs options peuvent être sélectionnées avec l’attribut multiple

select

Exemple

Les listes déroulantes• Optgroup: regrouper sémantiquement des options

Les listes déroulantes

datalist: réfère à une liste (avec l'élément <datalist>) qui présente une liste de choix.

<form action="traitement.php" >

Choisissez un des OS: <input list="systeme">

<datalist id="systeme">

<option value="Windows 8">

<option value="Windows 7">

<option value="Linux">

</datalist>

</form>

Les boutons

Bouton button

• L'élément HTML <button> est utilisé afin de créer un contrôle interactif ayant la forme d'un bouton.

• Avant html5 <input type=« button »>

Exemple :

Les boutons

Bouton Envoyer

• Une fois que votre visiteur a fini de remplir le formulaire, il faut qu'il puisse vous l'envoyer. Pour cela il lui faudra cliquer sur un bouton dont la balise correspondante est

<INPUT TYPE="submit"> dont l'attribut VALUE a pour valeur le texte affiché sur le bouton.

• Syntaxe :

• <INPUT TYPE="submit" VALUE="texte_à_afficher">

• Exemple :

• <INPUT TYPE="submit" VALUE="Envoyer">

Les boutons

Bouton Effacer

• L'internaute pourra aussi vouloir effacer toutes les réponses qu'il aura donné. L'utilisation de la balise <INPUT TYPE="reset"> fera apparaître un bouton qui permet d'initialiser le formulaire.

• Syntaxe :

• <INPUT TYPE="reset" VALUE="texte_à_afficher" />

• Exemple :

• <INPUT TYPE="reset" VALUE="Effacer" />

Regrouper les éléments du formulaire: fieldset et legend

Mettre en forme un formulaire grâce au CSS

Notions de réseaux

Formulaire et CSSLa pseudo-classe :invalid cible tout

élément <input> pour lequel la validation du

contenu échoue par rapport au type de donnée

attendu.

Ceci permet de mettre en forme les champs non

valides pour aider l'utilisateur à identifier et à

corriger les erreurs.

input:invalid { background-color: #ffdddd; }

input:valid { background-color: #ddffdd; }