Formulaire contact effet

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 !!

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:

---

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

---

Code:

---

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=""]).