Remise en page du formulaire

view/input.php

@@ -176,8 +176,8 @@
 					</select></span>
 				</h5>
 
+				<h4 data-icon='a'>Type de relation</h4>
 				<h5 class='nobold color0'>
-						Type de relation: <br>
 						&nbsp&nbsp&nbsp<input type='radio' name='reltype' id='reltype0'><label for='reltype0'>père, mère ou équivalent</label><br>
 						&nbsp&nbsp&nbsp<input type='radio' name='reltype' id='reltype1'><label for='reltype1'>frère ou soeur</label><br>
 						&nbsp&nbsp&nbsp<input type='radio' name='reltype' id='reltype2'><label for='reltype2'>autre membre de la famille</label><br>
@@ -189,8 +189,8 @@
 						&nbsp&nbsp&nbsp<input type='radio' name='reltype' id='reltype8'><label for='reltype8'>autre : <input type='text' id='reltypeSpecial' placeholder='Type de relation'></label><br>
 				</h5>
 
+				<h4 data-icon='m'>Où habite t-elle/il ?</h4>
 				<h5 class='nobold color0'>
-					Où habite t-elle/il ?<br>
 					&nbsp&nbsp&nbsp<input type='radio' checked name='loc' data-name='loc' id='locA_0'><label for='locA_0'>- de 5 minutes</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='loc' data-name='loc' id='locB_0'><label for='locB_0'>de 5 à 15 minutes</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='loc' data-name='loc' id='locC_0'><label for='locC_0'>de 15 à 60 minutes</label><br>
@@ -203,9 +203,8 @@
 				</h5>
 
 
+				<h4 data-icon='d'>Contexte de rencontre</h4>
 				<h5 class='nobold color0'>
-					Contexte de rencontre :<br>
-
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte0'> <label for='contexte0'>De la même famille</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte1'> <label for='contexte1'>Grandi ensemble</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte2'> <label for='contexte2'>Par mon mari/ma femme/relation amoureuse</label><br>
@@ -216,78 +215,101 @@
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte7'> <label for='contexte7'>Par d’autres membres de la famille</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte8'> <label for='contexte8'>études</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte9'> <label for='contexte9'>Etudes supérieures</label><br>
+				</h5>
+
+				<h5 class='nobold color0'>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte10'><label for='contexte10'>Au travail</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte11'><label for='contexte11'>Internet (quel contexte ? préciser <input type='text' id='contexteSpecial1' placeholder='partage, youtube, ..'>)</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte12'><label for='contexte12'>Par une association (quel type : <input type='text' id='contexteSpecial2' placeholder='aide à la personne, ..'>)</label><br>
 					&nbsp&nbsp&nbsp<input type='radio' name='contexte' id='contexte13'><label for='contexte13'>Autre : <input type='text' id='contexteSpecial3' placeholder='Contexte de relation'></label><br>
 				</h5>
 
+				<h4 data-icon='b'>Avec quelle fréquence discutez-vous avec cette personne ?</h4>
 				<h5 class='nobold color0'>
-					Avec quelle fréquence discutez-vous avec cette personne ?
-
 					Face à face<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq0' id='freq01'><label for='freq01'>plusieurs fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq0' id='freq02'><label for='freq02'>1 fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq0' id='freq03'><label for='freq03'>1 fois par mois</label>
-					&nbsp&nbsp&nbsp<input type='radio' name='freq0' id='freq04'><label for='freq04'>1 fois par an ou moins</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='freq0' id='freq04'><label for='freq04'>1 fois par an ou moins</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					Téléphone ou skype et eqts<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq1' id='freq11'><label for='freq11'>plusieurs fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq1' id='freq12'><label for='freq12'>1 fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq1' id='freq13'><label for='freq13'>1 fois par mois</label>
-					&nbsp&nbsp&nbsp<input type='radio' name='freq1' id='freq14'><label for='freq14'>1 fois par an ou moins</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='freq1' id='freq14'><label for='freq14'>1 fois par an ou moins</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					SMS, et équivalents<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq2' id='freq21'><label for='freq21'>plusieurs fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq2' id='freq22'><label for='freq22'>1 fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq2' id='freq23'><label for='freq23'>1 fois par mois</label>
-					&nbsp&nbsp&nbsp<input type='radio' name='freq2' id='freq24'><label for='freq24'>1 fois par an ou moins</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='freq2' id='freq24'><label for='freq24'>1 fois par an ou moins</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					Courrier électronique<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq3' id='freq31'><label for='freq31'>plusieurs fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq3' id='freq32'><label for='freq32'>1 fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq3' id='freq33'><label for='freq33'>1 fois par mois</label>
-					&nbsp&nbsp&nbsp<input type='radio' name='freq3' id='freq34'><label for='freq34'>1 fois par an ou moins</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='freq3' id='freq34'><label for='freq34'>1 fois par an ou moins</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					Facebook ou autre réseau social<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq4' id='freq41'><label for='freq41'>plusieurs fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq4' id='freq42'><label for='freq42'>1 fois par semaine</label>
 						&nbsp&nbsp&nbsp<input type='radio' name='freq4' id='freq43'><label for='freq43'>1 fois par mois</label>
-					&nbsp&nbsp&nbsp<input type='radio' name='freq4' id='freq44'><label for='freq44'>1 fois par an ou moins</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='freq4' id='freq44'><label for='freq44'>1 fois par an ou moins</label>
+				</h5>
+
+
+				<h4 data-icon='r'>Comment êtes-vous « connecté » à cette personne ?</h4>
+				<h5 class='nobold color0'>
+					Ses coordonnées sont dans votre carnet d’adresse<br>
+						&nbsp&nbsp&nbsp<input type='radio' name='connect1' id='connect11'><label for='connect11'>Oui</label>
+						&nbsp&nbsp&nbsp<input type='radio' name='connect1' id='connect12'><label for='connect12'>Non</label>
 				</h5>
 
 				<h5 class='nobold color0'>
-					Comment êtes-vous « connecté » à cette personne ?<br><br>
-
-					Ses coordonnées sont dans votre carnet d’adresse<br>
-						&nbsp&nbsp&nbsp<input type='radio' name='connect1' id='connect11'><label for='connect11'>Oui</label>
-						&nbsp&nbsp&nbsp<input type='radio' name='connect1' id='connect12'><label for='connect12'>Non</label><br><br>
-
 					Son numéro de mobile est enregistré sur votre mobile (ou vous-mêmes êtes sur le sien)<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='connect2' id='connect21'><label for='connect21'>Oui</label>
-						&nbsp&nbsp&nbsp<input type='radio' name='connect2' id='connect22'><label for='connect22'>Non</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='connect2' id='connect22'><label for='connect22'>Non</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					Elle figure parmi vos amis facebook<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='connect3' id='connect31'><label for='connect31'>Oui</label>
-						&nbsp&nbsp&nbsp<input type='radio' name='connect3' id='connect32'><label for='connect32'>Non</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='connect3' id='connect32'><label for='connect32'>Non</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					Elle figure parmi vos amis facebook et vous interagissez avec elle sur ce dispositif régulièrement<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='connect4' id='connect41'><label for='connect41'>Oui</label>
-						&nbsp&nbsp&nbsp<input type='radio' name='connect4' id='connect42'><label for='connect42'>Non</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='connect4' id='connect42'><label for='connect42'>Non</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					Vous le suivez sur Twitter<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='connect5' id='connect51'><label for='connect51'>Oui</label>
-						&nbsp&nbsp&nbsp<input type='radio' name='connect5' id='connect52'><label for='connect52'>Non</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='connect5' id='connect52'><label for='connect52'>Non</label>
+				</h5>
 
+				<h5 class='nobold color0'>
 					Vous communiquez avec cette personne sur Twitter<br>
 						&nbsp&nbsp&nbsp<input type='radio' name='connect6' id='connect61'><label for='connect61'>Oui</label>
-						&nbsp&nbsp&nbsp<input type='radio' name='connect6' id='connect62'><label for='connect62'>Non</label><br><br>
+						&nbsp&nbsp&nbsp<input type='radio' name='connect6' id='connect62'><label for='connect62'>Non</label>
+				</h5>
 
-					Vous communiquez dans autre réseau : <input type='text' name='connectSpecial1'><br><br>
+				<h5 class='nobold color0'>
+					Vous communiquez dans autre réseau : <input type='text' name='connectSpecial1'>
+				</h5>
 
-					Vous communiquez dans un autre dispositif (blogs, jeu vidéo ou autre) : <input type='text' name='connectSpecial2'><br><br>
+				<h5 class='nobold color0'>
-
+					Vous communiquez dans un autre dispositif (blogs, jeu vidéo ou autre) : <input type='text' name='connectSpecial2'>
-				<h5>
+				</h5>
 
 			</article>