Formulaire HTML pour site d'enquête
Traduit par
ScribdTranslationsFormulaire HTML pour site d'enquête
Traduit par
ScribdTranslationsCOS10005 - Développement Web Laboratoire 03
Lab 3–Formulaire HTML et conception de site Web
Objectifs :
Représenter un formulaire en utilisant des éléments HTML
Acquérir les compétences et les connaissances nécessaires pour compléter la Tâche 1.
Tâche 1 : Création d'un site web d'enquête en utilisant des formulaires (10 points)
Étape 1 :
1.1 Concevez une mise en page de page Web qui convient à un site Web d'enquête. La figure 1 présente un exemple.
Utilisez approprié
types de formulaire
Un soumettre éléments.
bouton pour
chaque formulaire.
Ce lien
dirige l'utilisateur
Ce lien dirige
retour au utilisateur au suivant
enquête précédente
page web d'enquête.
page web.
Figure 1. Un exemple de mise en page pour le site web du sondage
Le site web de l'enquête comportera cinq pages web, commençant par une brève page d'introduction sur l'enquête et un
page web sur l'utilisateur, suivie de trois pages de questions d'enquête. Chaque page de question contiendra :
Au maximum deux questions d'enquête;
Liens vers les pages de la question précédente et suivante ; et
Un bouton de soumission.
Les informations et questions de l'enquête proposée sont disponibles dans le fichier texte [Link] fichier '[Link]' ne contient pas de texte à traduire..
Pour aider à tester les formulaires dans ce laboratoire, un script serveur a été créé qui vous permet de tester si les données des formulaires sont
correctement passé au serveur lorsque le bouton « Soumettre » est cliqué.
Remarque : Nous devons avoir un bouton de soumission pour chaque page de question. La raison est que nous n'avons pas appris
Comment collecter des données à partir de plusieurs formulaires sur différentes pages web et les envoyer toutes au serveur en une seule requête HTTP.
demande. Mais nous y reviendrons dans des cours et des laboratoires ultérieurs.
Page 1
COS10005 - Développement Web Laboratoire 03
Étape 2 :
2.1 En utilisant NotePad++ (ou Sublime Text pour les utilisateurs de Mac), créez les pages HTML pour le site web du sondage qui
contient les éléments HTML 5 suivants. Le formulaire d'enquête sera placé entre le<corps>...</body>
étiquettes.
<!DOCTYPE html>
<htmllang="fr">
<tête>
<metacharset="utf-8"/>
description
mots-clés
<metaname="auteur" mettez votre nom ici
Enquête sur le développement web
</head>
<body>
<!-- Contenu de l'enquête -->
</body>
</html>
Étape 3 :
3.1 Créer les formulaires et les éléments de formulaire pour collecter les réponses des utilisateurs en utilisant les balises HTML discutées dans le cours.
3, par exemple,
Forme :<form>…</form>
Éléments de formulaire :<label>…</label>,<input
…/>,<select>…</select>,<text
zone>…</zone>,<fieldset>…</fieldset>et…
3.2 Créez d'autres éléments HTML selon vos besoins, par exemple,
Titre<h#>…</h#>, paragraphe<p>…</p>, règle horizontale<hr />
Liste<ol>...</ol>ou<ul>…</ul>, table<table>…</table>, image<img …/>et lien<a …
>…</a>
Caractères spéciaux
Par exemple, la première page de question pour le nom et le sexe peut être marquée à l'aide du code HTML5 suivant :
<form id="survey" method="post">
action="[Link]
<p><label>Nom complet (facultatif)
<input type="text" name="fname" size="20"/>
</label></p>
<p>Genre<br />
<label>Homme
<input type="radio" name="gender" value="M"/></label>
<label>Femme
<input type="radio" name="gender" value="F"/></label>
</p>
<p><input type="submit" value="Tester"/>
réinitialiser
</p>
</form>
Pour vous permettre de tester si votre formulaire peut correctement transmettre les données saisies au serveur, la valeur de "action"
attribut dans<form>l'action est vers l'URL d'un simple script PHP qui a été mis en place sur le serveur :
[Link]
Remarque : Voir les autres questions d'enquête dans [Link]. Veuillez vous assurer que les éléments de formulaire corrects sont
utilisé pour chaque question d'enquête. Par exemple, des cases à cocher doivent être utilisées pour les questions qui permettent plusieurs
les réponses, tandis que les boutons radio sont utilisés pour des questions à choix unique.
Page 2
COS10005 - Développement Web Lab 03
Étape 4 :
4.1 En utilisant WinSCP (ou FileZilla pour les utilisateurs de Mac), créez un nouveau dossier ‘lab03’ dans le dossier de l'unité sur le mercure
serveur ~/<votre code d'unité>/s<votre ID Swinburne>/www/htdocs.
4.2 Faites glisser et déposez tous les fichiers HTML5 de l'enquête depuis votre machine locale vers le dossier htdocs/lab03. Vous pouvez
nommer les fichiers HTML de l'enquête en utilisant le «sondage##.htmlformat où ## représente un nombre à 2 chiffres. Pour
exemple, la première page peut être nommée [Link] ainsi de suite.
Étape 5 : Tester et afficher les pages web.
Pour afficher les pages via http, utilisez un navigateur Web et tapez l'adresse suivante,
[Link] d'unité>/s<votre identifiant Swinburne>/<dossier>/<nom de fichier>
Veuillez vous référer aux exemples suivants pour identifier les URL de vos pages web.
Dossier ou Fichier sur le Serveur Web Mercury URL
~/cos10005/www/htdocs/[Link] [Link]
~/cos60002/www/htdocs/lab03/enquê[Link]://[Link]/cos10005/s1234567/lab03/enquê[Link]
Remarque : Vous pouvez copier les URL dans le tableau, mais n'oubliez pas de remplacer les codes d'unité, l'identifiant étudiant, le dossier
nom et nom de fichier dans les exemples ci-dessus avec le vôtre pour obtenir les URL de vos pages web sur Mercury.
[IMPORTANT] Lorsque la boîte de dialogue de demande d'autorisation du navigateur apparaît, utilisez votre nom d'utilisateur SIMS et
mot de passe pour confirmer l'accès, PAS votre nom d'utilisateur et mot de passe mercury.
Étape 6 : Validez la ou les pages et corrigez les erreurs affichées puis revalidez
Pour valider un fichier HTML en utilisant l'un des éléments suivants :
1[Link]
2. Le module complémentaire Web Developer pour Firefox;
3. L'extension Développeur Web pour Chrome.
Page 3