Alignement avec un form

**Mut** · 07/02/2014, 10h22

Bonjour,

Je rencontre un problème d'alignement de bouton image lorsqu'ils doivent être alignés avec un bouton présent dans un formulaire :

Code html :

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
 
<HTML>
<HEAD>
<TITLE>test</TITLE>
</HEAD>
<BODY>
 
<div id="form">
<input type="image" src="images/img1.jpg" onclick="javascript:location.href=\'test2.php\';" style=" margin:40px; height:40px; border-radius:10px; box-shadow:0 0 15px 2px;"/>
<input type="image" src="images/img2.jpg" onclick="javascript:location.href=\'test1.php\';" style=" margin:40px; height:40px; border-radius:10px; box-shadow:0 0 15px 2px;" />
<form name="myForm" method="post" action="test.php" >
<input type="image" src="images/img3.jpg" onclick="javascript:this.form.submit();" style=" margin:40px; height:40px; border-radius:10px; box-shadow:0 0 15px 2px;" />
</form>
 
</div>
 
 
</body> 
</html>

Les deux boutons images qui n'appartiennent pas au formulaire sont correctement alignés mais pas celui du formulaire qui se retrouve en dessous...

Si quelqu'un saurait comment faire..

Merci

**Bisûnûrs** · 07/02/2014, 10h34

C'est parce que l'élément form est de type de rendu block et non inline, donc va à la ligne automatiquement.

Au passage :
- Manque le DOCTYPE ;
- Des inputs en dehors d'un form c'est une ineptie sémantique ;
- Inutile de surcharger les évènements Javascript par javascript:, tu es déjà en train d'exécuter du Javascript, ça fait redondant ;
- Un input image est de type submit, donc pas besoin de rajouter du Javascript pour soumettre le formulaire ;
- ...

**Bovino** · 07/02/2014, 10h42

Des inputs en dehors d'un form c'est une ineptie sémantique ;

Si ta remarque est juste dans le contexte de la question, elle est fausse en HTML5 où un champ peut se trouver en-dehors d'un formulaire tout en y étant associé grâce à l'attribut form.

**Mut** · 07/02/2014, 12h47

Un grand merci pour toutes ces précisions !

- Ok pour le doctype
- J'ai remplacé les deux inputs hors du form par des <img>. Est ce que cela est correcte ? Pour moi tout fonctionne hormis la "petite main" qui signifie que l'on est sur un élément cliquable qui ne s'affiche plus.
- J'ai supprimé tout les 'javascript :'
- Le display inline a bien résolu le problème d'alignement.

Merci beaucoup !

Alignement avec un form

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager