Bene. Per poter allineare al meglio i vari elementi come fossero dentro una tabella, dovresti prima di tutto impostare la struttura HTML come se questa stessa fosse appunto una tabella, quindi righe e colonne. In particolare ogni tuo .form-group rappresenterebbe una riga, per cui all'interno di ciascuno sarebbe bene che ci sia lo stesso numero di elementi che costituiranno le colonne, in questo caso due. Ora, quel <label> di ciascuna "riga", rappresenta la colonna a sinistra mentre, a destra, gli elementi restanti andranno a costituire un'altra colonna. Dove c'è un unico elemento (le prime due righe) l'input stesso può costituire di per sè la colonna, mentre dove ci sono più elementi, sarebbe opportuno raggrupparli dentro un ulteriore elemento per creare quindi la colonna.
Prima però è meglio chiarire alcuni aspetti.
Tieni conto che l'uso del <label> ha sia un aspetto di impaginazione sia (e soprattutto) uno logico/funzionale. Generalmente ad un <label> corrisponde uno, e solo uno, elemento del form. Va da sé che non è corretto usare un <label>, come hai fatto, per "raggruppare" una serie di input (radio, checkbox o qualsiasi altro controllo del form), ma ne andrebbe usato uno per ogni singolo input. Questo perché, ripeto, il <label> di norma reagisce al click che attiva/seleziona il relativo elemento/controllo del form.
Per raggruppare una serie di controlli sotto un'unica voce (ad esempio il tuo "European citizen?") sarebbe più consono l'uso di <fieldset> e <legend>, mentre le etichette "YES" e "NO", possono essere più propriamente dei <label>.
Il fatto è che quei gruppi di input dovresti inserirli a loro volta in un ulteriore contenitore, così da creare la colonna di destra.
Occhio poi a questo, vedo un errore di "copiaincolla":
codice HTML:
<label for="name">Lastname</label><input type="text" placeholder="Insert your lastname" id="lastname" name="lastname">
il valore dell'attributo "for", nel <label>, dovrebbe corrispondere all'id del corrispettivo input, quindi "lastname".
Inoltre, per gestire meglio le dimensioni dei vari elementi, sarebbe utile applicare un cosiddetto "reset del boxmodel".
In sostanza basta questo:
codice:
* {box-sizing: border-box;}
Detto questo, potresti quindi impostare la tua "tabella" usando più propriamente <fieldset>, <legend> e <label>, e inserendo i gruppi di input in relativi contenitori.
Per praticità andrei ad usare un sistema di classi che definiscano righe e colonne, alla stregua dei framework più rinomati.
Chiaramente si potrebbe risolvere in svariati altri modi più o meno semplici.
Qui un esempio di come io lo imposterei:
codice HTML:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html5 forms</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: #ccc;
color: #000;
}
#main {
width: 650px;
margin: auto;
text-align: center;
}
#form_signup {
padding: 5px;
border: 1px solid #fff;
width: 100%;
}
h1 {
text-align: center;
}
.form-row {
display: flex;
align-items: center;
justify-content: center;
/* flex-wrap:wrap;*/
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
.form-col {
display: inline-block;
width: 50%;
}
.form-col + .form-col {
margin-left: 2px
}
.form-col > label:not(:first-child) {
margin-left: 20px
}
label.form-col,
legend.form-col {
border: 1px solid #fff;
display: inline-block;
background: #c0c0c0;
padding: 5px;
float: left;
}
.form-row input[type="text"] {
border: 1px solid #fff;
padding: 5px;
}
button,
input[type="submit"] {
border: 1px solid #dedede;
border-radius: 5px;
background: #ddaa11;
width: 200px;
height: 30px;
cursor: pointer;
}
button[type="reset"] {
background: #fff;
color: red;
}
.buttons {
margin-top: 20px;
padding: 5px;
}
input:disabled {
color: green;
}
</style>
</head>
<body>
<section id="main">
<form id="form_signup" action="#" method="POST">
<h1>PLEASE, REGISTER</h1>
<fieldset class="form-row">
<label class="form-col" for="name">Firstname</label>
<input class="form-col" type="text" name="name" id="name" title="insert your firstname" placeholder="Insert your name" maxlength="60" pattern="[a-zA-Z]+" required>
</fieldset>
<fieldset class="form-row">
<label class="form-col" for="lastname">Lastname</label>
<input class="form-col" type="text" name="lastname" id="lastname" placeholder="Insert your lastname">
</fieldset>
<fieldset class="form-row">
<legend class="form-col">European citizen?</legend>
<div class="form-col">
<label for="europeancitizen_y">YES</label> <input type="radio" name="europeancitizen" id="europeancitizen_y" value="Y" checked>
<label for="europeancitizen_n">NO</label> <input type="radio" name="europeancitizen" id="europeancitizen_n" value="N">
</div>
</fieldset>
<fieldset class="form-row">
<legend class="form-col">Hobbies</legend>
<div class="form-col">
<label for="hobbies_travel">Traveling</label> <input type="checkbox" name="hobbies[]" id="hobbies_travel" value="travel">
<label for="hobbies_guitar">Guitar</label> <input type="checkbox" name="hobbies[]" id="hobbies_guitar" value="guitar">
<label for="hobbies_computer">Computers</label> <input type="checkbox" name="hobbies[]" id="hobbies_computer" value="computer">
</div>
</fieldset>
<fieldset class="form-row buttons">
<button type="reset">Reset</button> <button>Send data</button>
</fieldset>
</form>
</section>
</body>
</html>
Vedi se può andare bene o essere comunque utile per capire come puoi impostare/correggere il problema da te.
Fai sapere 
Rispondi quotando
