Dans ce tuto en vidéo, nous allons réaliser un formulaire de contact qui aura la particularité d'avoir un label toujours visible.
Comprenez ici, que nous allons mettre en place un trompe l'oeil en créant une sorte de "faux placeholder" (cadre de champ) qui restera toujours visible même si le champ est rempli par l'utilisateur. L'effet escompté sera garanti.
Le travail que nous allons réaliser demande des compétences en HTML5 ainsi qu'en CSS3.
Si vous voulez devenir incollable dans ces deux langages, je mets à votre disposition un tuto complet de plus de 13H00 pour tout savoir sur HTML5 et CSS3.
Une fois ce tuto visualisé, vous pouvez si vous le souhaitez, enchaîner sur un autre cours que j'ai réalisé pour vous et qui va vous permettre de pouvoir recevoir le résultat d'un formulaire de contact par email. Cet apprentissage se fera à l'aide du Php, pas à pas de façon extrêmement claire et simple.
Je mets à votre disposition l'ensemble des codes de ce tuto.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Table des matières de cette formation CSS, HTML (durée : 28m07s)
-
- Présentation du travail gratuit 00:01:37
- Mise en place du code HTML 00:04:06
- Ecriture du CSS 1/3 00:08:04
- Ecriture du CSS 2/3 00:08:24
- Ecriture du CSS 3/3 00:03:33
- Test de notre travail 00:01:22
- Pour aller plus loin 00:01:01
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Excellent tuto mené de main de maître par Monsieur Carl Brison, bravo ! Carl Brison nous présente cette "surprenante" astuce qui me permettra de personnaliser mes formulaires et de les rendre plus attractifs. Merci d'avoir pris le temps de partager cette astuce qui est vraiment très originale !!!
-
Merci Carl - Encore une nouvelle façon de présenter nos formulaires, plus esthétique et agréable. :-)
-
Merci , celà m'a beaucoup plus. à bientôt.
-
Avec quelles versions de logiciels ce tuto est-il compatible ?CSS 3, HTML 5
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le code complet de ce tuto.
note moyenne
avis laissés