This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
2017_2018:s1:webdoc:td4 [2017/11/27 15:58] pourcelot [[TD4] Multimédia et autres balises] |
2017_2018:s1:webdoc:td4 [2017/11/28 17:50] (current) pourcelot [Les formulaires 2.0] |
||
---|---|---|---|
Line 5: | Line 5: | ||
Comme toujours, l'objectif est de vous donner le temps d'expérimenter ces différentes méthodes. | Comme toujours, l'objectif est de vous donner le temps d'expérimenter ces différentes méthodes. | ||
- | <note important>Par ailleurs, vous aurez [[2017_2018:s1:webdoc:projet|un projet]] à réaliser d'ici fin décembre, à savoir un site web démontrant toutes vos compétences en matière de web-développement. | + | <note important> |
+ | À partir de ce TD, le travail demandé n'est plus à rendre (il vous sert simplement de support pour que vous puissiez expérimenter). | ||
- | Vous devez donc commencer à réfléchir à votre [[2017_2018:s1:webdoc:projet|projet]]. | + | Ceci vous dégage du temps pour commencer à réfléchir en dehors des heures de TD sur votre [[2017_2018:s1:webdoc:projet|un projet]], à savoir un site web démontrant toutes vos compétences en matière de web-développement. |
+ | |||
+ | Ce projet sera à rendre d'ici fin décembre (les modalités exactes de rendu seront fixées par votre enseignant de TD). | ||
+ | |||
+ | Les consignes, à respecter impérativement, sont listées sur [[2017_2018:s1:webdoc:projet|la page du projet]]. | ||
Ainsi, **vous arriverez au prochain TD en ayant choisi votre thème et avec un plan sur papier de votre site** à présenter à votre enseignant (contenus, styles et mise en page prévus) pour qu'il puisse donner un premier avis. | Ainsi, **vous arriverez au prochain TD en ayant choisi votre thème et avec un plan sur papier de votre site** à présenter à votre enseignant (contenus, styles et mise en page prévus) pour qu'il puisse donner un premier avis. | ||
Line 137: | Line 142: | ||
* Mettre en forme ce formulaire avec du CSS dans l'objectif : | * Mettre en forme ce formulaire avec du CSS dans l'objectif : | ||
- | * D'obtenir quelque chose qui s'approche de ça : http://en.blog.files.wordpress.com/2010/11/grunion-form-builder.png | + | * D'obtenir quelque chose qui s'approche de ça : |
- | * D'obtenir quelque chose qui ne ressemble surtout pas à ça : http://wiki.lws-hosting.com/lib/exe/fetch.php/formail1.jpg | + | {{ :2017_2018:s1:webdoc:grunion-form-builder.png?300 |}} |
- | * Et c'est pas fini, veiller à : | + | |
+ | * D'obtenir quelque chose qui ne ressemble surtout pas à ça (pas de tableau pour la mise en page notamment !) : | ||
+ | {{ :2017_2018:s1:webdoc:formail1.jpg?300 |}} | ||
+ | * Et c'est pas fini : | ||
* Lorsqu'un champs est en train d'être modifié, appliquer "une mise en surbrillance" de ce dernier. | * Lorsqu'un champs est en train d'être modifié, appliquer "une mise en surbrillance" de ce dernier. | ||
* Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli. | * Les champs contenant du texte (excepté Mot de passe) doivent être pré-rempli. | ||
Line 149: | Line 157: | ||
<note tip>Un peu d'aide ? | <note tip>Un peu d'aide ? | ||
* Pseudos-formats : :required, :invalid, :focus | * Pseudos-formats : :required, :invalid, :focus | ||
+ | * [[https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire|Validation d'un formulaire]] en HTML5. | ||
* Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html) | * Type de champs HTML5 : email, tel, number, url, range, color, date, search (http://www.alsacreations.com/tuto/lire/1372-formulaires-html5-nouveaux-types-champs-input.html) | ||
</note> | </note> |