cuadros de texto Alinear a través de HTML

Question

Aquí está mi código:

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> 

Como es fácil adivinar, este código muestra un texto y luego tiene algunos cuadros de texto después de este texto.

Mi pregunta es esta: quiero alinear todos los texboxes para que estén alineados. He agregado espacios después del texto, pero los cuadros de texto aparecen justo después del texto, ignorando los espacios que ingresé. ¿Cuál es la mejor y más efectiva forma de hacer esto? ¿Tal vez una mesa?

gracias

Answer 1

También puede hacer que todos los cuadros de texto que aparecen uno debajo del otro en el centro de la pantalla. Se verá uniforme.

Answer 2

En HTML, los ESPACIOS continuos se toman como un único espacio solamente. Por lo que necesita HTML carácter especial para el espacio, es decir  

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

Pero, esta es la manera sucia. Esta no es la forma estándar de hacerlo. Además, esto no garantiza que los cuadros de texto se alinearán igual hasta que utilice algunas fuentes monoespaciales.

Por lo tanto, debe considerar la etiqueta <TABLE> o CSS.

Answer 3

Normalmente, utilizará css para hacer esto por usted. en su archivo css complemento:

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

input{ 

} 

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

Luego, en el html que fijaría las etiquetas junto a los cuadros de texto:

<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> 

en el archivo CSS, el margen derecha: 30px; línea le dice qué distancia hay para poner la etiqueta y el cuadro de texto

estableciendo el ancho del conjunto de campo crea esencialmente un cuadro alrededor de todo y puede establecer su ancho si necesita agrandar las etiquetas.

Espero que ayude.

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 tabla es la única manera de hacer que las columnas alineadas de manera que la primera columna ocupa sólo la anchura que necesita (la anchura de la etiqueta más largo). Cualquier otro enfoque te obliga a adivinar el ancho, y los resultados variarán inevitablemente, y el código no será robusto (el ancho debe ajustarse siempre que cambie la longitud de la etiqueta más larga).