Améliorer le style des formulaire HTML

Résolu/Fermé
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 - 17 sept. 2011 à 00:55
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 - 20 sept. 2011 à 21:10
Bonjour,
je veut crée un petit formulaire sur mon site mais je veut avoir un style moderne pour les composant du formulaire comme sur la page https://twitter.com/ les 3 champ de texte "Nom complet", "E-mail", "Mot de passe"

Cordialement
Merci d'avance


A voir également:

6 réponses

YO,
Faites des images, utilisez le CSS, html seul n'est plus suffisant pour la mise en page et le design(ce que vous appelez style moderne s'obtient assez facilement).
En fait quel est le problème?

Un clic droit sur la page => afficher la source peut vous donner une idée de comment la page du formulaire en exemple est mise en page.
0
Utilisateur anonyme
17 sept. 2011 à 02:51
Pour le même genre le CSS suffi :

<input type="text" name="Nom" style="width:250; height:35; font-face:Trebuchet MS; font-size:12pt; border: 1pt solid #000000; border-radius:5pt;">

(c'est juste un exemple)
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
17 sept. 2011 à 15:26
merci moi je veut realiser l'effet de lumiére sur les coté lorsque on clic sur la zone de texte

merci a vous tous
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
17 sept. 2011 à 15:28
comme ici aussi https://twitter.com/signup
0
Utilisateur anonyme
17 sept. 2011 à 19:41
Tu peut faire un menu avec transparence regarde ici le premier billet : http://www.gmoreau.user.fr
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
17 sept. 2011 à 21:12
Alien41 je vois pas le rapport avec son problème...
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
17 sept. 2011 à 21:22
oui j'aime avoir un style pareil que https://twitter.com/signup
merci pour tout
0
Le rapport c'est qu'il y a des codes partout sur google et qu'il a juste a rechercher des sites pour apprendre à se servir des styles et/ou Javascript et je lui est passé un exemple de menu qui apparaît avec de la transparence au touché de la souris qu'il peut ensuite adapter avec sont code en y mettant par exemple sont input à l'intérieur.

Lui il a vue ça sur twitter donc il veut ça ! Mais ont peut faire autrement en ayant un minimum d'idée donc de ressource.

De plus tous est expliqué dans cette source.
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
17 sept. 2011 à 21:39
Ce qu'il veut surtout c'est
realiser l'effet de lumiére sur les coté lorsque on clic sur la zone de texte 
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
17 sept. 2011 à 21:29
non mon problème c que je veut avoir le même style des 4 champ de texte dans https://twitter.com/signup
0
Utilisateur anonyme
17 sept. 2011 à 21:33
Ton problème c'est que tu ne connait pas le CSS et JavaScript surtout !
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
17 sept. 2011 à 21:45
je connais mais j'ai pas réussi crée une chose pareil ou presque
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
17 sept. 2011 à 22:25
je serai reconnaissant pour le personne qui m'aide :)
0
Salut,
L'effet de lumière comme vous l'appelez ce sont des images(deux) qui correspondent à un événement.
Le principe c'est que l'image de l'état initial est remplacé par une autre lorsque l'on clique dans le champ de saisie.
Vos mots sont donc mal choisit, ce sont pas des styles mais des images. Surtout que c'est le CSS qu'on nomme style dans le web et que vous pouvez facilement faire cela avec les styles css sur des boutons(technique la plus employée) pour donner les visuels différents pour l'état survol et enfoncé.

La programmation événementielle est un des avantages de javascript, il permet de gérer les événements(action provoquée par l'utilisateur comme cliquer ici, déplacez la souris vers la droite, recharger la page, l'heure change...etc). A travers le DOM(programmation orienté objets) de javascript vous pouvez simplement changer les valeurs des attributs et même ajouter/supprimer des balises dans la page.

>je serai reconnaissant pour le personne qui m'aide :)
Aides toi et le ciel t'aidera. Des réponses vous ont été apporté mais vous n'avez pas cherché à les comprendre, je vais les répéter: Apprenez le css et javascript ou laissez tomber.

La référence qui peut vous aider:
http://www.w3schools.com/css/css_pseudo_classes.asp

edit: je viens de voir votre commentaire
//je connais mais j'ai pas réussi crée une chose pareil ou presque

Regardez du côté de innerHtml (javascript DOM)pour changer l'attribut src de l'image ou utilisez les pseudo classes css.
0
Utilisateur anonyme
18 sept. 2011 à 00:00
Je suis pas sur nocomplain que c'est deux image qui change à l'évènement onclick avec un input sans bordure.

Enfin t'as solution est la plus simple mais apparemment sa serrais du jquery.

Sinon gezaak je vais regardé pour te faire un code.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 502
18 sept. 2011 à 00:06
Salut,

On peut réaliser ce que tu désires simplement en HTML/CSS, et sans image, grâce à certaines propriétés en CSS3 : box-shadow et transition.

Pour ce qui est du texte qui disparaît seulement lorsqu'on écrit, il s'agit d'un élément (div par exemple) qui superpose le champ texte.
On le fait apparaître/disparaître grâce à du Javascript.
Ou plus simple : l'attribut placeholder (pas d'animation, et le texte disparaît dés que le curseur est inséré dans le champ).
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
18 sept. 2011 à 14:51
0
Utilisateur anonyme
18 sept. 2011 à 15:02
Merci arthezius, sa ne sera pas perdu pour tous le monde.
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
20 sept. 2011 à 21:09
merci pour vous tous
0
gezaakk Messages postés 380 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 26 mai 2015 34
20 sept. 2011 à 21:10
merci pour vous tous :)
0