Programmation Web Formulaires HTML Jrme CUTRONA jerome cutronaunivreims
Programmation Web : Formulaires HTML Jérôme CUTRONA jerome. cutrona@univ-reims. fr 02: 06: 36 Programmation Web 2012 -2013 1
Formulaires : principe § Ensemble de commandes, interface interactive n n n § § Cases à cocher Boutons radio Listes de choix Lignes de texte Boutons n n Zones de texte Champs cachés Lignes mot de passe Envoi de fichier Ensemble d'étiquettes associées Utilisateur fournit des données Données traitées au niveau du serveur Indépendant des plateformes utilisées 02: 06: 36 Programmation Web 2012 -2013 2
Formulaires : fonctionnement § Description des commandes de saisie en HTML n Chaque commande est nommée § Envoi des données au serveur n n encodage des données nom de chaque commande et valeur(s) associée(s) § Traitement des données sur le serveur n n n 02: 06: 37 Script CGI PHP ASP, … Programmation Web 2012 -2013 3
Formulaires : fonctionnement Réseau Client Navigateur nom=robert • HTML • Java. Script • CSS <HTML> <HEAD> Serveur <TITLE>Bonjour</TITLE> </HEAD> Serveur Web <BODY> Bonjour robert ! </BODY> </HTML> Module PHP 02: 06: 37 Programmation Web 2012 -2013 Bonjour Formulaire robert Bonjour Nom: robert ! Valider nom 4
Formulaires : mise en place <form name="…" action="URI" method="…"> commandes </form> § method= n n 02: 06: 38 GET POST Programmation Web 2012 -2013 5
Commandes disponibles § Ligne de texte <input type="text" name="…" value="…"> § Mot de passe <input type="password" name="…" value="…"> § Valeur cachée <input type="hidden" name="…" value="…"> § Case à cocher <input type="checkbox" name="…" value="…"> § Boutons radio <input type="radio" name="…" value="…" [checked]> 02: 06: 38 Programmation Web 2012 -2013 6
Commandes disponibles § Liste de choix <select name="…" [multiple]> <option value="…" [selected]>Txt[</option>] </select> § Liste de choix : groupes d’options <select name="…" [multiple]> <optgroup label="groupe 1"> <option value="…">Txt … </optgroup> </select> 02: 06: 39 Programmation Web 2012 -2013 7
Commandes disponibles § Zone de texte <textarea name="…">Valeur</textarea> § Bouton d’envoi <input type="submit" name="…" value="…"> § Bouton de remise à zéro <input type="reset" name="…" value="…"> § Fichier <input type="file" name="…"> 02: 06: 40 Programmation Web 2012 -2013 8
Étiquetage des commandes <input type="radio" name="t" value="1">Txt 1 <input type="radio" name="t" value="2">Txt 2 Zones actives <input type="radio" name="t" id="chk 1" value="1"> <label for="chk 1">Txt 1</label> <input type="radio" name="t" id="chk 2" value="2"> <label for="chk 2">Txt 2</label> 02: 06: 41 Programmation Web 2012 -2013 Zones actives 9
- Slides: 9