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
VictorR
