textbox Gắn qua HTML

Question

Đây là mã của tôi:

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> 

Như bạn có thể đoán, mã này sẽ hiển thị một số văn bản và sau đó có một số textbox sau khi văn bản này.

Câu hỏi của tôi là: Tôi muốn sắp xếp tất cả các hộp thư để chúng được căn chỉnh. Tôi đã thêm dấu cách sau văn bản, nhưng hộp văn bản chỉ xuất hiện ngay sau văn bản, bỏ qua các khoảng trắng mà tôi đã nhập. Cách tốt nhất, hiệu quả nhất để làm điều này là gì? Có lẽ một cái bàn?

cảm ơn

Answer 1

Bạn cũng có thể làm cho tất cả hộp văn bản xuất hiện bên dưới hộp kia ở giữa màn hình. Nó sẽ trông đồng nhất.

Answer 2

Trong HTML, các không gian liên tục được lấy làm một không gian duy nhất. Vì vậy, bạn cần phải nhân vật đặc biệt HTML cho SPACE, đó là  

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

Nhưng, đây là cách bẩn. Đây không phải là cách tiêu chuẩn để làm như vậy. Ngoài ra, điều này không chắc chắn rằng các hộp văn bản sẽ sắp xếp giống nhau cho đến khi bạn sử dụng một số phông chữ không gian đơn.

Vì vậy, bạn nên xem xét <TABLE> thẻ hoặc CSS.

Answer 3

Thông thường bạn sẽ sử dụng css để thực hiện việc này cho bạn. trong file css bạn add:

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

input{ 

} 

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

Sau đó, trong html bạn sẽ thiết lập các nhãn lên bên cạnh các textbox:

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

trong file css, các margin-right: 30px; dòng cho biết cách xa nhau để đặt nhãn và hộp văn bản

đặt chiều rộng fieldset cơ bản tạo ra một hộp tròn tất cả và bạn có thể đặt chiều rộng nếu bạn cần làm cho bất kỳ nhãn nào lớn hơn.

Hy vọng điều đó sẽ hữu ích.

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> 

Một bảng là cách duy nhất để làm cho cột thẳng hàng sao cho cột đầu tiên chiếm chỉ chiều rộng nó cần (độ rộng của nhãn dài nhất). Bất kỳ cách tiếp cận nào khác buộc bạn phải đoán chiều rộng và kết quả chắc chắn sẽ thay đổi và mã sẽ không mạnh mẽ (chiều rộng cần phải được điều chỉnh bất cứ khi nào độ dài thay đổi nhãn dài nhất).