Customisation de forms

Version imprimable

04/09/2008, 18h30
vinczente

1 pièce(s) jointe(s)

Customisation de forms

Bonjour, je suis a la recherche d'un moyen pour faire des zones originales pour mes forms.
J'ai trouve comment je voulais que elle soit mais je n'arrive pas a l'implementer dans mon code HTML.
Peut etre pouriez vous maider. Je met en copie a quoi j'aimerais que ma form ressemble. Merci d'avance
04/09/2008, 18h49
12monkeys

Bonjour

Avec ton image et tes explications ce n'est pas très claire ! Tu veut changer tes forms ? Mais quels éléments de ton formulaire ? input, textarea...

Voici un peu de lecture en attendant les précisions : http://a-pellegrini.developpez.com/t...ss/formulaire/ et http://j-willette.developpez.com/tut...ss/formulaire/.

CSS :

Code:

1
2
3
4
5
6
7
8
9
input
{
     background-image: url('urldetonimageexemple.jpg');
     background-repeat: no-repeat;
     width: largeurDeTonImage px;
     height: hauteurDeTonImage px;
     border: 0; /* cache les bords bleus par défaut des input */
     display: block; /* pour pouvoir lui donner une hauteur et une largeur */
}

Je ne l'ai pas testé, mais en théorie cela devrait fonctionner.

(Tiens je ne connais pas les tutos que tu cites 12monkeys, ils semblent intéressants quoique j'ai l'impression que l'auteur se complique la tâche dans certains de ces exemples après un rapide survol).

Edit:
Exemple vite fait et fonctionnel après test:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <style type="text/css">
            .graphicalinput
	    {
                background-image: url('Picture2.png');
                background-repeat: no-repeat;
                width: 305px;
                height: 26px;
		 font-size: 20px;
		 padding: 10px;
                border: 0; /* cache les bords bleus par défaut des input */
                display: block; /* pour pouvoir lui donner une hauteur et une largeur */
            }
        </style>
    </head>
    <body>
        <form method="post" action="#">
            <input type="text" name="exemple" class="graphicalinput" />
        </form>
    </body>
</html>

J'ai ajouté un padding et augmenté la taille du texte car sinon oui tu as bien ton image en arrière fond, mais avec un petit texte qui colle en haut à gauche ce qui n'est pas très esthétique. ;-)

04/09/2008, 20h14
vinczente

Merci, c'est tout a fait ce que je voulais !! :D
06/09/2008, 12h27
Bisûnûrs

Citation:

Envoyé par Jérémie A.

j'ai l'impression que l'auteur se complique la tâche dans certains de ces exemples après un rapide survol[/SIZE]

C'est surtout que le code implémenté dans ces exemples suivent le changement de taille du texte dans le navigateur.

Prends ton exemple et fais un Ctrl+molette, ton image ne s'agrandit pas et ton texte sort de la zone imagée.
07/09/2008, 18h45
Jérémie A.

Citation:

Envoyé par Bisûnûrs

C'est surtout que le code implémenté dans ces exemples suivent le changement de taille du texte dans le navigateur.

Prends ton exemple et fais un Ctrl+molette, ton image ne s'agrandit pas et ton texte sort de la zone imagée.

En effet, niveau "accessibilité", ma méthode "simple" est discutable. Ceci dit, tout dépend du public cible, ...
En pratique, je ne prend en compte la gestion de l'agrandissement des polices par le navigateur que dans des cas spécifiquement dédiés à des personnes malvoyantes.
Hors, je pense que facilement 95% des utilisateurs n'utilisent pas cette option des navigateurs, du coup, dans un contexte poussant à aller toujours plus vite dans les développements, cette accessibilité passe la plus part du temps au second plan. Ceci dit, cela pourrait ouvrir un débat beaucoup plus vaste sur l'idéal, la valeur ajoutée de l'accessibilité, la gestion des délais,... Ce qui n'était pas le sujet de ce topic. ;)