La Cle Des Champs (2011) Bande AnnonceLa Clé des champs est un film réalisé par Claude Nuridsany et Marie Pérennou avec Simon Delagnes, Lindsey Henocque. Synopsis : Une mare abandonnée. Deux enfants. Le site La Clé des langues a été créé dans le cadre d'une convention signée entre la Direction Générale de l'Enseignement Scolaire et l'ENS de Lyon. L’Hôtel La Clé des Champs de Montmélian est idéalement situé au coeur de la Combe de Savoie, à deux pas du centre de la vieille ville Montmélian et à 15. Formulaires HTML5 : prenez la clé des champs. Par. Inayaili de León. Les formulaires sont souvent considérés comme ces trucs pénibles qu’il faut baliser et styler. Discothèque La Clé Des Chants Les Curtils - Route de Mâcon 01340 Montrevel-en-Bresse Tél : 04 74 25 41 92. Formulaires HTML5 : prenez la clé des champs. Par Inayaili de León. Les formulaires sont souvent considérés comme ces trucs pénibles qu’il faut baliser et styler. Désolée, mais je suis d’un tout autre avis : les formulaires, c’est ce que je préfère (tout comme les tableaux !). Nous allons voir ici comment styler un beau formulaire HTML5, grâce aux CSS avancées et aux techniques CSS3 les plus récentes. Je vous promets qu’après avoir lu cet article, vous voudrez absolument fabriquer vos propres formulaires. Voici ce que nous allons créer : Le projet initial. Les icônes proviennent de Chalkwork Payments. On donne du sens aux balises. Nous allons appliquer du style à un simple formulaire de paiement. Il y a trois grandes sections dans ce formulaire : les informations sur la personne ; les informations sur l’adresse ; les informations sur la carte de crédit. Nous allons aussi utiliser quelques- uns des nouveaux attributs et types d’entrée du HTML5 pour créer des champs qui aient du sens, et éviter d’utiliser trop de class et de id inutiles : email, pour le champ email ; tel, pour le champ téléphone ; number, pour le numéro de carte et le code de sécurité ; required, pour les champs à saisie obligatoire ; placeholder, pour donner des indications à l’intérieur de certains champs ; autofocus, pour permettre une focalisation sur le premier champ de saisie lorsque la page est chargée. Il y a des milliers d’autres nouveaux attributs et types d’entrée en HTML5, et vous auriez tout intérêt à aller voir les nouveautés sur le site du W3. C. J’espère que cela vous convaincra que le balisage des formulaires peut devenir beaucoup plus sympa qu’avant. On pose des fondations solides. Chaque section du formulaire sera insérée dans son propre fieldset. En ce qui concerne les boutons radio qui permettent de choisir le type de carte de crédit, nous placerons ces options dans un autre fieldset imbriqué. Nous allons également utiliser une liste ordonnée pour regrouper chaque couple label / input (étiquette du champ / données à y entrer). Cela nous fournira une sorte de point d’accroche pour appliquer un style de façon sémantique, tout en rendant le formulaire plus lisible s’il est affiché alors que les feuilles de styles ne sont pas appliquées : Voici donc le balisage avec lequel nous allons travailler : < form id=paiement>. Votre identité< /legend>. Nom< /label>. Prénom et nom" required autofocus>. Email< /label>. Téléphone< /label>. Adresse de livraison< /legend>. Adresse< /label>. Code postal< /label>. Pays< /label>. Informations CB< /legend>. Type de carte bancaire< /legend>. VISA< /label>. Am. Ex< /label>. Mastercard< /label>. N° de carte< /label>. Code sécurité< /label>. Nom du porteur< /label>. Même nom que sur la carte" required>. J'achète !< /button>. Code source de cet exemple. On améliore l’aspect. Commençons par le commencement : il faut d’abord donner un cadre par défaut, en remettant à zéro les marges et les espacements des éléments, et en indiquant une police par défaut pour la page : html, body, h. Georgia, "Times New Roman", Times, serif. Puis on va appliquer un style à l’élément form qui entoure nos champs de saisie : form#paiement {. Nous allons aussi enlever la bordure de l’élément fieldset, puis ajouter de la marge en bas. Grâce à la pseudo- classe : last- of- type, nous enlevons la marge en bas du dernier fieldset, car nous n’en avons pas besoin. Puis nous allons passer les legend en grand et en gras, et nous allons également appliquer un text- shadow vert clair pour obtenir un petit effet sympa supplémentaire : form#paiement legend {. Nos legend ont maintenant très bel aspect, mais ce serait encore mieux si elles indiquaient très clairement le nombre d’étapes à suivre dans notre formulaire. Au lieu de l’ajouter manuellement à chaque legend, nous pouvons utiliser des compteurs générés automatiquement. Pour ajouter un compteur à un élément, il faut utiliser l’un des pseudo- éléments : before ou : after pour ajouter du contenu via les feuilles de style. Voici comment faire : créer un compteur en utilisant la propriété counter- reset sur l’élément form ; appeler le compteur avec la propriété content (en gardant le nom que nous avons créé auparavant) ; avec la propriété counter- increment, indiquer qu’à chaque élément qui correspond à notre sélecteur, ce compteur sera augmenté de 1. Enfin, il faudra changer le style de la balise legend qui appartient au groupe de boutons radio, pour lui donner l’aspect d’un label : form#paiement fieldset fieldset legend {. On donne du style aux listes. Pour nos éléments de liste, nous allons nous contenter d’ajouter de jolis coins arrondis, avec bordure et fond semi- transparents. Puisque nous utilisons des couleurs RGBa, il faut fournir une solution pour les navigateurs qui ne les gèrent pas (à placer avant la couleur RGBa). Pour les listes imbriquées, mieux vaut retirer ces propriétés pour éviter qu’elles se recoupent : form#paiement ol li {. On contrôle les formulaires. Il ne nous reste plus qu’à styler nos label (étiquettes de champ de saisie), nos input (les entrées à saisir) et l’élément button. Tous nos label auront le même aspect, à l’exception de celui utilisé pour les éléments radio. Nous les laisserons flotter à gauche, et nous leur attribuerons une largeur. Pour les label de la partie carte de crédit, nous allons ajouter une icône en image de fond, et éliminer certaines propriétés inutiles. Nous utiliserons le sélecteur d’attribut pour définir l’image de fond de chaque label ; dans le cas présent, c’est l’attribut for qui sera employé pour chaque label. Encore un détail pour améliorer l’ergonomie : nous allons ajouter un curseur de type pointeur (cursor: pointer) aux label de type bouton radio lorsqu’ils sont survolés (état hover), afin que l’utilisateur sache qu’il n’a qu’à cliquer pour sélectionner cette option. On touche à la fin ! Passons maintenant aux éléments input. Nous voulons que tous les champs input soient identiques, sauf pour les boutons radio et la zone de texte textarea. Grâce à elle, nous allons cibler tous les éléments input à l’exception de ceux qui possèdent le type radio. Il ne faudra pas non plus oublier d’ajouter des styles de focus, ainsi que de styler correctement les input de type radio. Georgia, "Times New Roman", Times, serif. Pour finir, nous voici arrivés au button, le bouton permettant de soumettre le formulaire. Nous allons juste y ajouter une jolie police et un effet de text- shadow, puis l’aligner au centre du formulaire et lui donner différentes couleurs de fond pour chaque état possible : form#paiement button {. Georgia, "Times New Roman", Times, serif. Voilà, c’est fini ! Regardez le formulaire terminé. Ce formulaire n’aura pas le même aspect dans tous les navigateurs, bien évidemment. Internet Explorer et Opera n’interpètent pas border- radius (du moins pas aujourd’hui). Les nouveaux types d’input sont simplement rendus comme des input ordinaires dans certains navigateurs ; et une partie des CSS les plus avancées comme le compteur ou bien : last- of- type ou encore text- shadow ne sont pas interprétées par certains navigateurs. Mais cela ne vous empêche pas de les utiliser dès maintenant afin de simplifier votre processus de développement. Voilà, j’espère que mon cadeau vous a plu !
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2016
Categories |