5568 sujets

Sémantique web et HTML

Lien/bouton de validation

Bonjour,

En me basant sur la solution proposée ici, je souhaite présenter des boutons pour valider un formulaire.

Mais la solution s'appuie sur des liens qui ne permettent pas de valider un formulaire sans JavaScript.

<style type="text/css">

a.ovalbutton{
background: transparent url('media/oval-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('media/oval-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.ovalbutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See:  http://www.quirksmode.org/css/clearing.html  */
width: 100%;
}

</style>



<h4>Single button:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a>
</div>

<h4>Side by Side:</h4>

<div class="buttonwrapper">
<a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="#" style="margin-left: 6px"><span>Reset</span></a>
</div>


Est-il possible d'adapter ce code pour permettre la validation d'un formulaire, par exemple en utilisant un élément button ou input de type img ? Pouvez-vous m'aider ?
Bonsoir,

utilises pour cela les éléments html qui vont bien comme <form>, et un <input> de type submit.

tu peux toujours styler ton formulaire ensuite en css, c'est pas les tutos qui manquent sur le net. Smiley cligne
FloydinBremen a écrit :
Bonsoir,

utilises pour cela les éléments html qui vont bien comme &lt;form&gt;, et un &lt;input&gt; de type submit.

tu peux toujours styler ton formulaire ensuite en css, c'est pas les tutos qui manquent sur le net. Smiley cligne

Je m'attendais à une réponse un peu plus précise... Smiley decu
Bonjour,

Les étapes à suivre sont:
1. Faire une formulaire HTML valide en utilisant au maximum les éléments fournis par HTML. Ne pas oublier les LABEL avec attribut @for.
2. Smiley optionnel Styler ce formulaire en CSS (mise en page, style visuel).
3. Gérer côté serveur la validation des données saisie, avec si besoin l'affichage d'écrans d'alerte, de confirmation, ou le réaffichage du formulaire avec des messages d'erreur (en réinjectant tout ou partie des données saisies).
4. Smiley optionnel Rajouter une surcouche JavaScript qui va a) surveiller des évènements tels que le focus ou le blur sur un champ de formulaire (pour donner une information immédiate sur la validité de la saisie dans ce champ), ou qui va b) surveiller l'évènement submit du formulaire pour réaliser une validation globale et afficher directement des messages d'erreur et des aides à la saisie.

Il me semble que l'option 4.b est redondante avec l'étape 3. Comme cette dernière est indispensable, et pour limiter les couts de développement je suggèrerais plutôt d'ignorer cette option, et de faire la validation côté serveur uniquement. On pourra éventuellement, pour améliorer l'ergonomie du formulaire, rajouter en surcouche l'option 4.a (feedback instantané sur la saisie, pour chaque champ).

Neuromancien a écrit :
Est-il possible d'adapter ce code pour permettre la validation d'un formulaire

Je ne comprends pas la question. Le code que tu donnes ne réalise pas la validation d'un formulaire. C'est juste un code HTML et CSS de bouton, réalisé (côté HTML) avec des liens plutôt qu'un élément INPUT ou BUTTON.
Pour ce qui est de styler des éléments BUTTON, quelques repères ici: http://fvsch.com/code/button-css/
Modérateur
fvsch a écrit :
Il me semble que l'option 4.b est redondante avec l'étape 3. Comme cette dernière est indispensable, et pour limiter les couts de développement je suggèrerais plutôt d'ignorer cette option, et de faire la validation côté serveur uniquement.

On peut effectivement se passer de validation javascript, elle apporte toutefois les avantages suivants:
* Rapidité et réactivité. La réponse est rapide, on peut imaginer de scroller jusqu'à l'erreur et toutes autres pratiques pour rendre la compréhension plus simple.
* Décharge le serveur, évite ainsi des soumissions au serveur pour des erreurs d’inattention, fréquentes ou redondantes.

Mais en effet, le second point est peu relevant dans la plupart des contextes, et le premier du «service ++++» qui a son coût!
Bonjour,

Je vois que vous n'avez pas compris ma question. Je sais ce qu'est un formulaire...

Ce que je veux c'est pouvoir afficher un bouton de validation un peu plus joli que le bouton gris par défaut.

Le code que j'ai trouvé permet de mettre en forme un lien pour le présenter comme un bouton.

Ma question est la suivante : Est-il possible d'adapter le code proposé (utilisable pour des liens) à un élément de type input Smiley submit ou button ? Je n'ai pas réussi à le faire. Je veux pouvoir afficher de la même façon un bouton de validation et un lien d'annulation.
<div class="buttonwrapper">
    <span class="btnsubmit"><button id="btnsubmit" type="submit">{'submit'|t}</button></span>
    <a class="ovalbutton" href="#" style="margin-left: 6px"><span>{'cancel'|t}</span></a>
  </div>


 
.btnsubmit{
    background: transparent url('../images/oval-green-left.gif') no-repeat top left;
    display: block;
    float: left;
    font: normal 13px Tahoma; /* Change 13px as desired */
    line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
    height: 24px; /* Height of button background height */
    padding-left: 11px; /* Width of left menu image */
}
 
#btnsubmit{
    background: transparent url('../images/oval-green-right.gif') no-repeat top right;
    display: block;
    padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}
Modérateur
Vu que tu t'accroches, Ta solution avec les images est vieille et pourrie. Tu peux obtenir le même résultat en plus solide avec css3… avec des border-radius, des bordures padding, box-shadow gradients css ou gradient image.

Avec la solution que tu as proposée, j'ai réussi très facilement à la faire planter de deux façons différentes:
upload/32231-boutons.png

En css ton code est plus propre, pas de risque de bugs, et dans le pire des cas, cela donnera un bouton normal sur les vieux navigateurs.
J'ai adapté la solution de Gothor. Le résultat est parfait. C'est effectivement plus propre et plus simple que l'image en deux parties. Merci à tous.
Neuromancien a écrit :
Ma question est la suivante : Est-il possible d'adapter le code proposé (utilisable pour des liens) à un élément de type input Smiley submit ou button ? Je n'ai pas réussi à le faire. Je veux pouvoir afficher de la même façon un bouton de validation et un lien d'annulation.

Oui, c'est possible, et le lien que je donnais à la fin de mon précédent message répondait à cette problématique. Pour rappel: http://fvsch.com/code/button-css/
Modifié par fvsch (05 Jun 2012 - 16:55)
Sujet clos
Aller à