Allineamento caselle di testo tramite HTML

Question

Ecco il mio codice:

Classroom name:    <input type="text" name="txtClassroomName" size="20"><br> 
School name:     <input type="text" name="txtSchoolName" size="20"><br> 
School contact email address: <input type="text" name="txtSchoolEmail" size="20"><br> 
School address:    <input type="text" name="txtSchoolAddress" size="20"><br> 
School telephone number:  <input type="text" name="txtTelephoneNumber" size="20"><br> 

Come si può intuire, questo codice visualizza un testo e poi ha alcune caselle di testo dopo questo testo.

La mia domanda è questa: sto volendo allineare tutte le texbox in modo che siano allineate. Ho aggiunto degli spazi dopo il testo, tuttavia le caselle di testo appaiono subito dopo il testo, ignorando gli spazi che ho inserito. Qual è il modo migliore e più efficace per farlo? Forse un tavolo?

grazie

Answer 1

È inoltre possibile effettuare tutte le caselle di testo di apparire uno sotto l'altro al centro dello schermo. Sembrerà uniforme.

Answer 2

In HTML, gli SPAZIO continui vengono presi come un unico spazio. Quindi è necessario HTML caratteri speciali per lo spazio, cioè  

Classroom name:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="txtClassroomName" size="20"><br>

Ma, questo è il modo sporco. Questo non è il modo standard per farlo. Inoltre, questo non è sicuro che le caselle di testo si allineeranno fino a quando non utilizzerai alcuni font mono-spazio.

Quindi, si dovrebbe prendere in considerazione il tag <TABLE> o CSS.

Answer 3

Normalmente useresti css per farlo per te. nel file css aggiuntivo:

label{ 
display:inline-block; 
width:200px; 
margin-right:30px; 
text-align:right; 
} 

input{ 

} 

fieldset{ 
border:none; 
width:500px; 
margin:0px auto; 
} 

Poi nel codice HTML è necessario impostare le etichette accanto alle caselle di testo:

<fieldset> 
<label for="txtClassroomName">Classroom name:</label><input type="text" name="txtClassroomName" size="20"> 
<label for="txtSchoolName">School name:</label><input type="text" name="txtSchoolName" size="20"> 
<label for="txtSchoolEmail">School contact email address:</label><input type="text" name="txtSchoolEmail" size="20"> 
<label for="txtSchoolEmail">School address:</label><input type="text" name="txtSchoolAddress" size="20"> 
<label for="txtSchoolEmail">School telephone number:</label><input type="text" name="txtTelephoneNumber" size="20"> 
</fieldset> 

nel file CSS, il margin-right: 30px; linea dice quanto distanti mettere l'etichetta e la casella di testo

impostando la larghezza del fieldset si crea essenzialmente una scatola attorno a tutto ed è possibile impostarne la larghezza se è necessario ingrandire le etichette.

Spero che questo aiuti.

Martyn

Answer 4

<table> 
<tr><td><label for="txtClassroomName">Classroom name:</label>     
    <td><input type="text" name="txtClassroomName" id="txtClassroomName" size="20"> 
<tr><td><label for="txtSchoolName">School name:</label> 
    <input type="text" name="txtSchoolName" id="txtSchoolName" size="20"><br> 

... 
</table> 

Una tabella è l'unico modo per rendere le colonne allineate in modo che la prima colonna occupa solo la larghezza è necessario (la larghezza dell'etichetta più lungo). Qualsiasi altro approccio ti costringe a fare un'ipotesi sulla larghezza, ei risultati inevitabilmente varieranno e il codice non sarà robusto (la larghezza deve essere regolata ogni volta che cambia la lunghezza dell'etichetta più lunga).