Forum : Vérification d'un formulaire Material Design

Bonjour, j'ai une question. J'ai commencé à programmer un formulaire en Material Design.
PS : c'est normal qu'il y ait une image de téléphone au lien d'un image d'envellope, j'avais pas trouvé l'icone.

Voici un screen du résultat :
Quand l'input est non séléctionné :

Quand l'input est séléctionné :

Je voudrais faire en gros que quand le résultat est bon on peut voir ce type de réponse :

Et quand il y a une erreur :

Voici ce que j'ai déjà programmé grâce au tutoriel sur le Material Design:

HTML : <form action="index.html"> <div class="formL"> <div class="ax"> <div class="ax-input"> <input type="email" id="email" name="email" class="ax-input-text"><img src="call.png"> </div> </div> </div> </form>

CSS: .formL{ background-color: #333333; width: 380px; height: auto; padding: 5px; position: relative; left: 150px; top: 150px; outline: none; } *{ padding: 0px; margin: 0px; } @font-face { font-family: Roboto; src: url(Roboto.tff); } .ax{ height: 72px; position: relative; padding: 16px 0px 8px 0px; left: 15px; width: 350px; outline: none; } .ax-input-text{ background: transparent; line-height: 8px 0; padding: 8px 0; border:none; -webkit-appearance:none; display: block; width: 100%; font-family: Roboto; font-size: 16px; outline: none; color: #717171; position: relative; border-bottom:solid #717171 2px; } .ax-input img{ bottom: 52px; position: absolute; height: 16px; right: 20px; outline: none; } .ax-input-text:focus{ border-bottom:solid skyblue 2px; outline: none; }

Merci d'avance.

PS : Pour ceux qui veulent voici le lien des icons Material Design :
[http://www.materialup.com/tools/icons]
Pour les règles de Material Design :
[http://www.google.com/design/spec/material-design/introduction.html]
Pour le tutoriel de Grafikart:
http://www.grafikart.fr/tutoriels/html-css/input-material-design-564

Vérification d'un formulaire Material Design

2 réponses