Customisation de forms

**vinczente** · 04/09/2008, 18h30

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

**12monkeys** · 04/09/2008, 18h49

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/.

**Jérémie A.** · 04/09/2008, 19h45

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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. ;-)

**vinczente** · 04/09/2008, 20h14

Merci, c'est tout a fait ce que je voulais !!

**Bisûnûrs** · 06/09/2008, 12h27

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.

**Jérémie A.** · 07/09/2008, 18h45

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.

Customisation de forms

CSS

Vue hybride

Discussions similaires

Partager

Partager