Améliorer le style des formulaire HTML

Résolu
gezaakk Messages postés 382 Date d'inscription   Statut Membre Dernière intervention   -  
gezaakk Messages postés 382 Date d'inscription   Statut Membre Dernière intervention   -
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

KingMob
 
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
 
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 382 Date d'inscription   Statut Membre Dernière intervention   34
 
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 382 Date d'inscription   Statut Membre Dernière intervention   34
 
comme ici aussi https://twitter.com/signup
0
Utilisateur anonyme
 
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   Statut Membre Dernière intervention   475
 
Alien41 je vois pas le rapport avec son problème...
0
gezaakk Messages postés 382 Date d'inscription   Statut Membre Dernière intervention   34
 
oui j'aime avoir un style pareil que https://twitter.com/signup
merci pour tout
0
Utilisateur anonyme
 
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   Statut Membre Dernière intervention   475
 
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 382 Date d'inscription   Statut Membre Dernière intervention   34
 
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
 
Ton problème c'est que tu ne connait pas le CSS et JavaScript surtout !
0
gezaakk Messages postés 382 Date d'inscription   Statut Membre Dernière intervention   34
 
je connais mais j'ai pas réussi crée une chose pareil ou presque
0
gezaakk Messages postés 382 Date d'inscription   Statut Membre Dernière intervention   34
 
je serai reconnaissant pour le personne qui m'aide :)
0
nocomplain
 
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
 
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 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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   Statut Membre Dernière intervention   475
 
0
Utilisateur anonyme
 
Merci arthezius, sa ne sera pas perdu pour tous le monde.
0
gezaakk Messages postés 382 Date d'inscription   Statut Membre Dernière intervention   34
 
merci pour vous tous
0
gezaakk Messages postés 382 Date d'inscription   Statut Membre Dernière intervention   34
 
merci pour vous tous :)
0