
Comment réaliser un champ de formulaire avec label toujours visible ?

Dans ce tuto vidéo, je vous propose de réaliser un formulaire de contact tendance et design que vous pourrez utiliser pour vos clients, pour vous-même ou bien en guise de book de présentation.
Pour cela, nous allons utiliser le langage CSS afin de mettre en forme le code HTML qui constituera notre formulaire.
Ici, l'idée sera de jouer avec les opacités afin de faire apparaître de la transparence au niveau de notre formulaire.
Notre écran sera coupé en deux couleurs dans le sens de la hauteur (voila une petite prouesse technique intéressante à découvrir !)
Notre page web sera 100% responsive. Cela signifie qu'elle s'adaptera automatiquement à la largeur de l'écran qui viendra la visiter.
Au niveau des champs de formulaires ainsi que du textarea, nous jouerons d'une petite astuce CSS qui nous permettra de mettre en place un trompe l'oeil, ceci dans le but d'améliorer l'expérience utilisateur.
Je propose un autre cours sur le design de formulaire et un autre pour devenir incollable sur Flexbox
Que contient le fichier source ?
Quel est le niveau requis pour suivre ce tuto ?
Les apprenants qui suivent cette formation s'intéressent aussi à :

Comment réaliser un champ de formulaire avec label toujours visible ?

Créer un formulaire d'inscription design

Création d'un formulaire Design en CSS

Créer un Formulaire Moderne avec l’Effet Floating Label (100% HTML/CSS)

Effet sur champs de formulaire sans programmation

JS moderne EXO #20 - Manipuler le label d'un champ de formulaire


Bundle 10 exercices 100% frontend HTML, CSS et JS

Dev Fron tEnd #6 : Icônes dans les champs d'un formulaire

Avis des apprenants