Améliorer le style des formulaire HTML

Résolu
gezaakk Messages postés 443 Statut Membre -  
gezaakk Messages postés 443 Statut Membre -
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

6 réponses

  1. 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
    1. 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
  2. gezaakk Messages postés 443 Statut Membre 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
  3. gezaakk Messages postés 443 Statut Membre 34
     
    comme ici aussi https://twitter.com/signup
    0
    2. arthezius Messages postés 3756 Statut Membre 475
       
      Alien41 je vois pas le rapport avec son problème...
      0
    3. gezaakk Messages postés 443 Statut Membre 34
       
      oui j'aime avoir un style pareil que https://twitter.com/signup
      merci pour tout
      0
    4. 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
    5. arthezius Messages postés 3756 Statut Membre 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
  4. gezaakk Messages postés 443 Statut Membre 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
    1. Utilisateur anonyme
       
      Ton problème c'est que tu ne connait pas le CSS et JavaScript surtout !
      0
    2. gezaakk Messages postés 443 Statut Membre 34
       
      je connais mais j'ai pas réussi crée une chose pareil ou presque
      0
    3. gezaakk Messages postés 443 Statut Membre 34
       
      je serai reconnaissant pour le personne qui m'aide :)
      0
    4. 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
    5. 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

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

    Posez votre question
  6. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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
    2. Utilisateur anonyme
       
      Merci arthezius, sa ne sera pas perdu pour tous le monde.
      0
    3. gezaakk Messages postés 443 Statut Membre 34
       
      merci pour vous tous
      0
  7. gezaakk Messages postés 443 Statut Membre 34
     
    merci pour vous tous :)
    0

Discussions similaires

Problème avec Google Chrome
loup_blanc14 -
bicker -

6 réponses
problème envoi formulaire
mathieu_n -
jordane45 -

5 réponses