Création d'une zone de connexion horizontale

Bonjour,

Tout nouveau sur le forum d'alsacreations j'espère que vous serez gentil avec moi

Pour évoquer ma problématique, je travaille actuellement à la création d'un site internet sous Wordpress (pour l'instant en local) auquel je souhaiterais faire figurer une zone de connexion tout en haut de la page d'accueil (en "top bar").

Pour développer cette zone de connexion, je suppose qu'il convient de créer un formulaire.
Formulaire qui comporte des <input> à côté desquels j'aurais souhaité mettre de petits icônes (exemple un cadenas pour le champ mot de passe).

Toutefois (première question), est-ce que l'on peut directement insérer une image dans un <form> ?

<div class="top_connect">
<form class="top_form" action="http://www.monsite.fr" method="post">
<p>Connectez-vous...</p>
<p class="username_password">
	<img src=""  alt="" />
	<input type="text" name="login" value="Nom d'utilisateur"/>
</p>		
<p class="username_password">
	<img src=""  alt="" />
	<input type="password" name="password" value="Mot de passe"/>
</p>	
<p class="form_submit">
	<input type="submit" name="connexion" value="OK" >
</p>
</form>
</div>

Mais ce n'est pas tout, avec cette méthode c'est un peu le "bordel". Une affaire de .css sans doute ou peut-être que cela va au-delà de ça, mais mes <img> et <input> se confondent sous Chrome. Sous Firefox mais images se mettent à la droite des champs au lieu d'être à gauche comme je le souhaiterais.

Aussi (deuxième question), de façon à avoir une simple barre de connexion façon "en ligne", est-il préférable d'utiliser des listes dans le <form> qui viendraient en lieu et place des <p> ?

Je sais, c'est un peu du basique mais je me gratouille la tête avec l'envie de sortir quelque chose de propre et qui répond à la norme si je puis dire.

Merci par avance pour vos réponses.
Modifié par Poloooh (24 Jul 2013 - 23:38)

Salut et bienvenue,

Poloooh a écrit :
Toutefois (première question), est-ce que l'on peut directement insérer une image dans un form ?

Oui, pas de souci pour insérer des images, d'autant qu'ici elles sont en fait à l'intérieur de paragraphes.

Poloooh a écrit :
mes &lt;img&gt; et &lt;input&gt; se confondent sous Chrome. Sous Firefox mais images se mettent à la droite des champs au lieu d'être à gauche comme je le souhaiterais.

Oui, c'est très certainement un problème de CSS puisque si je reproduit ton code tel quel, tout s'affiche normalement (http://jsfiddle.net/knNqU/).
Je suppose que tu as du créer quelques règles CSS pour commencer à agencer tes éléments. Pourrais-tu isoler et nous fournir le code HTML et CSS concerné par ce formulaire ainsi que son conteneur ?

Poloooh a écrit :
est-il préférable d'utiliser des listes dans le form qui viendraient en lieu et place des p ?

Tu peux garder tes paragraphes ou utiliser une liste, peut importe. On pourrait même simplifier les choses et afficher les éléments (images et éléments de formulaires) les uns à la suite des autres à l'intérieur de la balise form. Ce qui est important ici, c'est surtout le positionnement de tes éléments les uns par rapport aux autres.

On attend donc d'en savoir un peu plus pour pouvoir se prononcer plus précisément