Discussion :

[zup17]

Bonjour,

J'ai créé un formulaire de contact et je cherche à faire l'effet quand on clique dans l'input le texte remonte,
voici l'exemple comme dans le formulaire de ce site : napf.
Cet effet se fait en javascript, html5 !!

Merci de votre aide !!

[SylvainPV]

clic droit sur un des champs, inspecter l'élément, et les outils développeur de ton navigateur te diront tout ce que tu veux savoir :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="field"> <input type="text" id="contact-lastname" name="contact-lastname" required="required"> <label for="contact-lastname" class="">Nom</label></div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
input[type=text], input[type=email], input[type=submit], input[type=checkbox], input[type=radio], select, textarea {	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	box-shadow: none;
	border-radius: 0;
	background: 0 0;
}
 
 
.field {
	position: relative;
	border-bottom: 2px solid #BAB6BA;
	z-index: 1;
}
 
 
.field input, .field select, .field textarea {
	width: 100%;
	padding: .66667rem;
	font-size: 16px;
	font-size: 1.06667rem;
	color: #7E747E;
}
 
 
.field input:focus, .field textarea:focus {
	outline: 0;
}
 
 
.field label {
	position: absolute;
	-webkit-transition: -webkit-transform .3s;
	transition: transform .3s;
	width: 100%;
	padding: .66667rem;
	top: 0;
	left: 0;
	text-align: left;
	pointer-events: none;
	font-size: 16px;
	font-size: 1.06667rem;
	color: #BAB6BA;
}
 
 
.field:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2px;
	height: 10px;
	background-color: #BAB6BA;
}
 
 
.field input.filled+label,
.field input:focus+label,
.field textarea.filled+label,
.field textarea:focus+label {
	-webkit-transform: translate3d(-10px,-80%,0);
	transform: translate3d(-10px,-80%,0);
}

Le seul bout de JavaScript requis semble être pour ajouter la classe .filled à l'input une fois que sa valeur est remplie, pour garder le label en haut. D'ailleurs, sur le site de la NAPF on voit qu'ils ne l'ont pas fait ! Si tu remplis un champ et que tu quittes le focus, le label revient à sa place par-dessus le texte saisi. Beurk :p Ne fais pas la même erreur qu'eux !

D'ailleurs, il n'y a peut-être même pas besoin de JavaScript. Tu devrais pouvoir remplacer cette classe filled par un sélecteur input[value]:not([value=""]).