Mise en page de mon formulaire HTML

**roms95200** · 15/01/2015, 10h55

Bonjour,

Étant en deuxième année de BTS Informatique et réseaux pour l'industrie et les services techniques (IRIS), j'ai un projet à réaliser pour l'examen de fin d'année.

Pour ma part, je dois réaliser un site web d'achat de billets d'avion. Le site doit pouvoir proposer différentes destinations, avec différents horaires, avec différentes compagnies etc. Il serait équivalent aux sites tels que http://www.govoyages.com/ ou encore http://www.kayak.fr/.

J'ai commencer par faire le formulaire de recherche de vols mais je suis bloqué sur la structure de mon tableau.

Je m'expliquer avec les screenshots ci-dessous

Ce que j'ai :

Nom : EApkY4xooSj_avant.png
Affichages : 2288
Taille : 8,8 Ko

Nom : EApkY4xooSj_avant.png
Affichages : 2288
Taille : 8,8 Ko

Ce que je voudrais :

Nom : EApk0vE1wpN_apres.png
Affichages : 4706
Taille : 8,8 Ko

Vous pouvez donc constater que j'aimerais mettre "Classe" et "Adultes" dans la même colonne mais sur la même ligne.

Je voudrais par ailleurs aligner mon bouton "Recherche de vol" sur la colonne de droite et mon titre "Trouver un vol" sur la colonne de gauche.

Je n'ai pour l'instant pas fais de feuille css, le problème viendrait-il de cela ?

Si oui comment dois-je m'y prendre sachant que je suis débutant en language web

Voici mon code HTML :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<html>
    <head>
		<meta charset="utf-8"  
		<script type="text/javascript" src="calendrier.js"></script>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />       
        <title>Choise your fly !</h1></title>
 
	</head>
 
	<body>
 
			<!-- Formulaire pour trouver un vol -->
	<table width=400 height=200>
		<br>
        <caption><B> TROUVER UN VOL </B></caption>
		<br>
		<form method="post" action="traitement.php">
 
			<tr><td>
			<label>Départ</label> : <br><input type="text" name="depart" />
			</td>
			<td>
			<label>Arrivée</label> : <br><input type="text" name="arrive" />
			</tr></td>
 
			<tr><td>
			<!-- Tableau qui contiendra le calendrier ! -->
			<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
			<tr>
				<td id="ds_calclass"></td>
			</tr>
			</table>	 
 
			<tr><td>
			<label>Date de départ :<br></label><input type="text" name="date" onclick="ds_sh(this);" />
			</td>				
			<td><label">Date de retour :<br></label><input type="text" name="date" onclick="ds_sh(this);" />
			</tr></td>
 
			<tr>	
				<td><label for="classe">Classe :</label><br>
				<label for="adultes">Adulte(s) :</label><br></td>
				<td><label for="enfants">Enfant(s) :</label><br>
				<label for="bebe">Bébé(s) :</label><br></td>
			</tr>
			<tr>
				<td><select name="classe" id="classe">
				   <option value="economique">Economique</option>
				   <option value="affaire">Affaire</option>
				   <option value="premiere">Première</option>
				</select>
 
				<select name="adultes" id="adultes">
				   <option value="1">1</option>
				   <option value="2">2</option>
				   <option value="3">3</option>
				   <option value="4">4</option>
				   <option value="5">5</option>
				   <option value="6">6</option>
				   <option value="7">7</option>
				   <option value="8">8</option>
				   <option value="9">9</option>
				</select></td>
 
				<td><select name="enfants" id="enfants">
				   <option value="1">1</option>
				   <option value="2">2</option>
				   <option value="3">3</option>
				   <option value="4">4</option>
				   <option value="5">5</option>
				   <option value="6">6</option>
				   <option value="7">7</option>
				   <option value="8">8</option>
				</select>
 
				<select name="bebe" id="bebe">
				   <option value="1">1</option>
				   <option value="2">2</option>
				   <option value="3">3</option>
				   <option value="4">4</option>
				</select></td>
 
 
			</tr>
 
			<tr><td>
				<input type="submit" value="Rechercher un vol" />
			</tr></td>
		</table>
    </body>
</html>

Merci d'avance pour votre aide

Invité · 15/01/2015, 23h18

Bonjour,
c'est bien de mettre ton code HTML.
C'est mieux de mettre AUSSI le code CSS.

Quelques liens :

**roms95200** · 16/01/2015, 09h56

Bonjour,

Pour le moment comme vous le voyez sur les screenshots je n'ai pas fais de css concernant le formulaire.

J’essaie tout d'abord de faire le squelette de mon formulaire avant de m'occuper de l'apparence

Peut-être que le css pourrait résoudre mon problème ?

**black-hawk-down** · 16/01/2015, 10h25

Salut,

Voici plusieurs remarques :

Il n'y a pas de doctype html donc tu risques d'avoir des comportements anormaux pour l'affichage (notamment sur les différents navigateurs)

Les enfants de table sont uniquement : caption, thead, tbody, tfoot, tr. Pas de <br> ni de <form>.

Ensuite, il faut éviter l'utilisation de <table> pour la mise en page, préfère des <div> en jouant avec la propriété CSS display.

Enfin, si tu n'utilises pas du CSS à un moment donné, tu n'arriveras pas à avoir le rendu que tu souhaites.

**laurentSc** · 18/01/2015, 20h28

Il y a des soucis dans ton html :

- le form devrait être placé à l'extérieur de la table et il n'est pas refermé ;
- ligne 24, tu refermes une ligne (</tr>) alors que la cellule courante est ouverte et tu recommences ligne 34 (sauf que là, tu démarres une nouvelle ligne en plein milieu d'une cellule).

Tu utilises quand même du CSS (fichier design.css) et effectivement la mise en page sera définie par du CSS.

Mise en page de mon formulaire HTML

CSS

Discussions similaires

Partager

Partager