Cách căn chỉnh biểu mẫu đầu vào trong HTML

117

Tôi mới sử dụng HTML và tôi đang cố gắng học cách sử dụng biểu mẫu.

Vấn đề lớn nhất tôi gặp phải cho đến nay là sắp xếp các hình thức. Đây là một ví dụ về tệp HTML hiện tại của tôi:

<form>
 First Name:<input type="text" name="first"><br />
 Last Name:<input type="text" name="last"><br />
 Email:<input type="text" name="email"><br />
</form>

Vấn đề với điều này là, hộp trường sau 'Email' khác nhau rất nhiều về khoảng cách so với tên và họ. Cách 'phù hợp' để làm cho nó sao cho chúng 'xếp hàng' về cơ bản là gì?

Tôi đang cố gắng thực hành hình thức và cú pháp tốt ... rất nhiều người có thể làm điều này với CSS Tôi không chắc chắn, tôi chỉ mới học được những điều cơ bản của HTML cho đến nay.

html forms alignment

— yoshyosh
nguồn

có một cuộc chiến không ngừng giữa khi các bảng (nếu có), câu trả lời cho câu hỏi của bạn không phải là ngoại lệ, đường nối giữa là <bảng> dành cho dữ liệu dạng bảng, xem thêm tại đây: stackoverflow.com/questions/83073 /

— Lọ

Chính xác cùng một câu hỏi nhưng câu trả lời gợi ý sử dụng thẻ <table> với trích dẫn của W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

Một ví dụ khác, điều này sử dụng CSS, tôi chỉ cần đặt biểu mẫu trong một div với lớp container. Và quy định rằng các yếu tố đầu vào có trong 100% chiều rộng của container và không có bất kỳ yếu tố nào ở hai bên.

.container {
  width: 500px;
  clear: both;
}

.container input {
  width: 100%;
  clear: both;
}

<html>

<head>
  <title>Example form</title>
</head>

<body>
  <div class="container">
    <form>
      <label>First Name</label>
      <input type="text" name="first"><br />
      <label>Last Name</label>
      <input type="text" name="last"><br />
      <label>Email</label>
      <input type="text" name="email"><br />
    </form>
  </div>
</body>

</html>

Mở rộng đoạn trích

— nối tiếp
nguồn

2

Hoàn hảo, chỉ giúp tôi tiết kiệm rất nhiều.

— null

Nó cũng mở rộng nút "gửi" của tôi đến chiều rộng của container.

— Saurabh Rana

4

Giải pháp này không xuất hiện để làm việc. Các yếu tố đầu vào không được căn trái. Các giải pháp bảng dưới đây hoạt động.

— johny tại sao

1

Tôi không phải là một fan hâm mộ lớn của việc thiết lập độ rộng rõ ràng, khi bạn có thể làm mà không cần một cái nào (xem câu trả lời của tôi bên dưới)

— Clément

1

Điều này cho kết quả lạ với các nút radio. Nhãn nút radio hiển thị dòng sau nút radio thực tế.

— lời giới thiệu

134

Câu trả lời được chấp nhận (đặt độ rộng rõ ràng bằng pixel) khiến bạn khó thực hiện thay đổi và ngắt khi người dùng của bạn sử dụng cỡ chữ khác. Mặt khác, sử dụng các bảng CSS, hoạt động rất tốt:

form  { display: table;      }
p     { display: table-row;  }
label { display: table-cell; }
input { display: table-cell; }

<form>
  <p>
    <label for="a">Short label:</label>
    <input id="a" type="text">
  </p>
  <p>
    <label for="b">Very very very long label:</label>
    <input id="b" type="text">
  </p>
</form>

Mở rộng đoạn trích

Đây là một JSFiddle: http://jsfiddle.net/DaS39/1/

Và nếu bạn cần các nhãn được căn phải, chỉ cần thêm text-align: rightvào nhãn: http://jsfiddle.net/DaS39/

EDIT: Một lưu ý nhanh hơn: Các bảng CSS cũng cho phép bạn chơi với các cột: ví dụ: nếu bạn muốn làm cho các trường đầu vào chiếm nhiều không gian nhất có thể, bạn có thể thêm các mục sau vào biểu mẫu của mình

<div style="display: table-column;"></div>
<div style="display: table-column; width:100%;"></div>

bạn có thể muốn thêm white-space: nowrapvào labelstrong trường hợp đó.

— Clément
nguồn

4

Tôi thích giải pháp này. Điều đó có nghĩa là tôi không phải lo lắng về các cột của mình chắc chắn thay đổi độ rộng khi trang phát triển thông qua sự phát triển. +1

— Tom Lord

9

@MuhammadUmer Bởi vì các bảng sẽ gây nhầm lẫn cho trình đọc màn hình và nhiều thiết bị trợ giúp, trong khi các bảng CSS tách biệt phần trình bày và nội dung. Do đó, biểu mẫu của bạn vẫn dễ dàng được phân tích cú pháp bởi trình đọc màn hình hoặc trợ lý đọc và vẫn hiển thị độc đáo.

— Clément

3

Chà, nhãn phù hợp trong td cho thấy rằng đó là một phần của dữ liệu dạng bảng có tổ chức, như biểu đồ; Đó không phải là trường hợp ở đây. Ngoài ra, việc sử dụng các bảng HTML khiến việc thay đổi bố cục trong tương lai trở nên khó khăn hơn hoặc thích ứng với các kích thước màn hình khác nhau (nghĩ rằng điện thoại di động và máy tính bảng).

— Clément

4

Tôi đã mạnh mẽ chống lại cấu trúc bảng CSS với cùng một lập luận mà @MuhammadUmer đã đưa ra, cho đến ngày hôm nay! Tôi đã trích dẫn và quyết định thử nó và cuối cùng thấy giá trị của việc chuyển đổi! Thêm vào đó, CSS của nó, vì vậy làm cho mọi thứ dễ dàng hơn trong thời gian dài

— BillyNair

2

Làm thế nào bạn có thể mở rộng cột với giải pháp này? Để trung tâm sắp xếp nút gửi.

— eugenekr

31

Một giải pháp đơn giản cho bạn nếu bạn chưa quen với HTML, chỉ là sử dụng bảng để sắp xếp mọi thứ.

<form>
  <table>
    <tr>
      <td align="right">First Name:</td>
      <td align="left"><input type="text" name="first" /></td>
    </tr>
    <tr>
      <td align="right">Last Name:</td>
      <td align="left"><input type="text" name="last" /></td>
    </tr>
    <tr>
      <td align="right">Email:</td>
      <td align="left"><input type="text" name="email" /></td>
    </tr>
  </table>
</form>

— amonett
nguồn

43

Giải pháp nhanh chóng và đơn giản. Để lại các cuộc tranh luận CSS đáng tin cậy cho giờ nghỉ trưa và hoàn thành công việc.

— Emmanuel Bourg

3

@ClarkeyBoy - người quan tâm miễn là nó làm việc.

— SolidSnake

1

@ClarkeyBoy - Nhận xét dốt nát nhất? lol .. tôi không muốn tranh luận với bạn ở đây .. nếu bạn muốn làm theo cách của divs. nếu bạn muốn làm điều đó các bảng tùy thuộc vào bạn. nhưng đừng cho rằng tất cả khách hàng hoặc mọi người sẽ quan tâm đến điều đó. hầu hết họ quan tâm đến việc hoàn thành công việc ..

— SolidSnake

2

@ClarkeyBoy - Đừng đọc câu trả lời này và bài đăng từ W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: Đây có phải chính xác là các bảng CSS có nghĩa là gì không? Đạt được một bố cục giống như bảng mà không gây nhầm lẫn trình đọc màn hình? Bố cục mà OP yêu cầu thực sự khá dễ dàng để đạt được bằng cách sử dụng các bảng CSS (xem bên dưới )

— Clément

17

Tôi thấy việc thay đổi hiển thị nhãn thành khối nội tuyến dễ dàng hơn nhiều và đặt chiều rộng

label {
    display: inline-block;
    width:100px;
    text-align: right;
}

— Byron
nguồn

9

Bạn nên sử dụng một bảng. Đối với cấu trúc logic , dữ liệu là dạng bảng: đây là lý do tại sao bạn muốn nó thẳng hàng, vì bạn muốn chỉ ra rằng các nhãn không chỉ liên quan đến các hộp đầu vào của chúng mà còn với nhau, trong cấu trúc hai chiều.

[xem xét những gì bạn sẽ làm nếu bạn có các giá trị chuỗi hoặc số để hiển thị thay vì các hộp đầu vào.]

— Đường Collin
nguồn

2

Tôi đánh giá cao cách tiếp cận của bạn.

— Jono

2

Đối với điều này, tôi thích giữ một ngữ nghĩa HTML chính xác và sử dụng CSS đơn giản nhất có thể.

Một cái gì đó như thế này sẽ làm công việc:

label{
  display: block;
  float: left;
  width : 120px;    
}

Tuy nhiên, một nhược điểm: bạn có thể phải chọn đúng chiều rộng nhãn cho mỗi biểu mẫu và điều này không dễ nếu nhãn của bạn có thể động (ví dụ nhãn I18N).

— Samuel EUSTACHI
nguồn

1

Tôi là một fan hâm mộ lớn của việc sử dụng danh sách định nghĩa.

<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>

Chúng dễ dàng tạo kiểu bằng CSS và chúng tránh được sự kỳ thị của việc sử dụng bảng để bố trí.

— Andrew
nguồn

Điều này cũng dễ dàng thực hiện với divs ( ddchỉ có lề trái ~ 40px) và tránh mọi nhầm lẫn về ngữ nghĩa. Bên cạnh đó, cả hai dòng này đều không có nhãn / đầu vào trên cùng một dòng.

— Hollister

1

sử dụng css

.containerdiv label {
  float:left;
  width:25%;
  text-align:right;
  margin-right:5px; /* optional */
}
.containerdiv input {
  float:left;
  width:65%;
}

cái này cung cấp cho bạn một cái gì đó như:

           label1 |input box             |
    another label |another input box     |

— Gjaa
nguồn

Bạn cũng phải sử dụng clearđể tránh các biểu mẫu xếp chồng lên nhau, chiều rộng nhỏ hơn

— TheMaster

0

Phương pháp truyền thống là sử dụng bảng.

Thí dụ:

<table>
  <tbody>
     <tr>
        <td>
           First Name:
        </td>
        <td>
           <input type="text" name="first">
        </td>
     </tr>
     <tr>
        <td>
           Last Name:
        </td>
        <td>
           <input type="text" name="last">
        </td>
     </tr>
  </tbody>
</table>

Tuy nhiên, nhiều người sẽ cho rằng các bảng đang hạn chế và thích CSS. Lợi ích của việc sử dụng CSS là bạn có thể sử dụng các yếu tố khác nhau. Từ div, danh sách được sắp xếp và không theo thứ tự, bạn có thể thực hiện cùng một bố cục.

Cuối cùng, bạn sẽ muốn sử dụng những gì bạn thấy thoải mái nhất.

Gợi ý: Bàn dễ dàng để bắt đầu.

— Giải pháp web của OV
nguồn

1

+1 để nói rằng họ dễ dàng bắt đầu với ... nhưng thực sự các nhà phát triển chỉ nên dùng đến các bảng để lấy dữ liệu (xem nhận xét của tôi về câu trả lời khác cho đầy đủ!)

— ClarkeyBoy

1

Sử dụng các bảng CSS cũng dễ như vậy và nó không có các vấn đề về khả năng truy cập liên quan. Xem câu trả lời của tôi dưới đây.

— Clément

0

Vâng, đối với những điều cơ bản, bạn có thể thử sắp xếp chúng trong bảng. Tuy nhiên, việc sử dụng bảng là không tốt cho bố cục vì bảng có nghĩa là cho nội dung.

Những gì bạn có thể sử dụng là các kỹ thuật nổi CSS.

Mã CSS

.styleform label{float:left;}
.styleform input{margin-left:200px;} /* this gives space for the label on the left */
.styleform .clear{clear:both;} /* prevent elements from stacking weirdly */

HTML

<div class="styleform">
<form>
<label>First Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Last Name:</label><input type="text" name="first" /><div class="clear"></div>
<label>Email:</label><input type="text" name="first" /><div class="clear"></div>
</form>
</div>

Một bài viết chi tiết tôi đã viết có thể được tìm thấy để trả lời câu hỏi về vấn đề float IE7 : IE7 float vấn đề đúng

— mauris
nguồn

cảm ơn về các ví dụ, tuy nhiên biểu mẫu HTML vẫn không giải quyết được vấn đề. Ví dụ, nếu bạn thay đổi 'Tên' trong một trong số chúng thành 'Tên', tôi sẽ gặp vấn đề tương tự tôi gặp lần đầu tiên

— yoshyosh

Tôi đã làm việc với điều này từ các nhà thiết kế và nó hơi mong manh, IME. Đối với bố cục cơ bản này, nó sẽ ổn 98% thời gian. Cố gắng để có được quá phức tạp, ví dụ như bố cục hai cột hoặc nhãn nhiều dòng và điều đó trở nên khó khăn.

— staticsan

1

@staticsan - nếu bạn hiểu nổi, xóa và div, bạn sẽ làm việc tốt với bố cục như vậy và trên thực tế, chúng hiển thị nhanh hơn và linh hoạt hơn so với các bảng trên trình duyệt hiện đại.

— mauris

Chà, tôi nghĩ rằng tôi đã hiểu phao, dọn dẹp và div, nhưng tôi không thể mở rộng hình thức mà tôi đã đưa ra mà không bị phá vỡ. Cho dù đó là một lỗ hổng trong sự hiểu biết của tôi hoặc việc thực hiện của nhà thiết kế, thì thực tế nó vẫn rất mong manh. (Thật thú vị, phiên bản tiếp theo sẽ có nhiều thiết kế lai hơn bằng cách sử dụng ulthẻ.)

— staticsan

0

Tôi biết điều này đã được trả lời, nhưng tôi đã tìm ra một cách mới để sắp xếp chúng một cách độc đáo - với một lợi ích bổ sung - xem http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

về cơ bản, bạn sử dụng phần tử nhãn xung quanh đầu vào và căn chỉnh bằng cách sử dụng:

<label><span>Name</span> <input /></label>
<label><span>E-Mail</span> <input /></label>
<label><span>Comment</span> <textarea></textarea></label>

và sau đó với css bạn chỉ cần căn chỉnh:

label {
    display:block;
    position:relative;
}

label span {
    font-weight:bold;
    position:absolute;
    left: 3px;
}

label input, label textarea, label select {
    margin-left: 120px;    
}

bạn không cần bất kỳ br lộn xộn nào xung quanh để ngắt dòng - có nghĩa là bạn có thể nhanh chóng hoàn thành bố cục nhiều cột một cách linh hoạt
toàn bộ dòng có thể nhấp. Đặc biệt đối với các hộp kiểm, đây là một sự trợ giúp rất lớn.
Tự động hiển thị / ẩn các dòng biểu mẫu rất dễ dàng (bạn chỉ cần tìm kiếm đầu vào và ẩn cha mẹ của nó -> nhãn)
bạn có thể gán các lớp cho toàn bộ nhãn làm cho nó hiển thị đầu vào lỗi rõ ràng hơn nhiều (không chỉ xung quanh trường đầu vào)

— Niko
nguồn

Đẹp, nhưng cần chiều rộng nhãn cố định. Văn bản nhãn lớn ghi đè đầu vào.

— mauretto

0

Câu trả lời của Clément là tốt nhất. Đây là một câu trả lời được cải thiện phần nào, hiển thị các cách sắp xếp khác nhau có thể, bao gồm các nút căn chỉnh giữa bên trái phải:

label
{	padding-right:8px;
}

.FAligned,.FAlignIn
{	display:table;
}

.FAlignIn
{	width:100%;
}

.FRLeft,.FRRight,.FRCenter
{	display:table-row;
	white-space:nowrap;
}

.FCLeft,.FCRight,.FCCenter
{	display:table-cell;
}

.FRLeft,.FCLeft,.FILeft
{	text-align:left;
}

.FRRight,.FCRight,.FIRight
{	text-align:right;
}

.FRCenter,.FCCenter,.FICenter
{	text-align:center;
}

<form class="FAligned">
	<div class="FRLeft">
		<p class="FRLeft">
			<label for="Input0" class="FCLeft">Left:</label>
			<input id="Input0" type="text" size="30"  placeholder="Left Left Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input1" class="FCRight">Left Right Left:</label>
			<input id="Input1" type="text" size="30"  placeholder="Left Right Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input2" class="FCLeft">Right Left Left:</label>
			<input id="Input2" type="text" size="30"  placeholder="Right Left Left" class="FILeft"/>
		</p>
		<p class="FRRight">
			<label for="Input3" class="FCRight">Right Right Left:</label>
			<input id="Input3" type="text" size="30"  placeholder="Right Right Left" class="FILeft"/>
		</p>
		<p class="FRLeft">
			<label for="Input4" class="FCLeft">Left Left Right:</label>
			<input id="Input4" type="text" size="30"  placeholder="Left Left Right" class="FIRight"/>
		</p>
		<p class="FRLeft">
			<label for="Input5" class="FCRight">Left Right Right:</label>
			<input id="Input5" type="text" size="30"  placeholder="Left Right Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input6" class="FCLeft">Right Left Right:</label>
			<input id="Input6" type="text" size="30"  placeholder="Right Left Right" class="FIRight"/>
		</p>
		<p class="FRRight">
			<label for="Input7" class="FCRight">Right:</label>
			<input id="Input7" type="text" size="30"  placeholder="Right Right Right" class="FIRight"/>
		</p>
		<p class="FRCenter">
			<label for="Input8" class="FCCenter">And centralised is also possible:</label>
			<input id="Input8" type="text" size="60"  placeholder="Center in the centre" class="FICenter"/>
		</p>
	</div>
	<div class="FAlignIn">
		<div class="FRCenter">
			<div class="FCLeft"><button type="button">Button on the Left</button></div>
			<div class="FCCenter"><button type="button">Button on the Centre</button></div>
			<div class="FCRight"><button type="button">Button on the Right</button></div>
		</div>
	</div>
</form>

Mở rộng đoạn trích

Tôi đã thêm một số phần đệm ở bên phải của tất cả các nhãn ( padding-right:8px) chỉ để làm cho ví dụ trông hơi ghê rợn hơn, nhưng điều đó nên được thực hiện cẩn thận hơn trong một dự án thực tế (thêm phần đệm vào tất cả các yếu tố khác cũng sẽ là một ý tưởng tốt).

— Điện tử
nguồn

-1

Tôi đã sử dụng để giải quyết vấn đề này, tương tự như Gjaa nhưng được tạo kiểu tốt hơn

p
{
    text-align:center;
        }
.styleform label
{
    float:left;
    width: 40%;
    text-align:right;
    }
.styleform input
{
    float:left;
    width: 30%;
    }

Đây là HTML của tôi, được sử dụng riêng cho một biểu mẫu đăng ký đơn giản không có mã php

<form id="registration">
    <h1>Register</h1>
    <div class="styleform">
    <fieldset id="inputs">
        <p><label>Name:</label> 
          <input id="name" type="text" placeholder="Name" autofocus required>
        </p>
        <p><label>Email:</label>   
          <input id="email" type="text" placeholder="Email Address" required>
        </p>
        <p><label>Username:</label>
          <input id="username" type="text" placeholder="Username" autofocus required>
        </p>
        <p>   
          <label>Password:</label>
          <input id="password" type="password" placeholder="Password" required>
        </p>
    </fieldset>
    <fieldset id="actions">

    </fieldset>
    </div>
    <p>
          <input type="submit" id="submit" value="Register">
          </p>

Nó rất đơn giản, và tôi chỉ mới bắt đầu, nhưng nó hoạt động khá độc đáo

— PA_Commons
nguồn

-1

Chèn các thẻ đầu vào bên trong một danh sách không có thứ tự. Không tạo kiểu kiểu nào. Đây là một ví dụ.

<ul>
Input1     
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>

Đã làm cho tôi !

— Vivek Iyer
nguồn

Điều này sẽ không bao giờ làm việc. ULsẽ chỉ thụt lề nội dung ra khỏi lề, không căn chỉnh bất cứ điều gì. Đưa inputs vào LIsẽ chỉ thêm một dấu đầu dòng trước chúng (vâng, chúng sẽ được căn chỉnh, như một danh sách, không chống lại các nhãn). Ngoài ra, "Input2" sẽ dính vào inputphần tử trước đó , vì phần tử LIkhông được đóng (không có </li>) và không có bắt đầu <li>cho "nhãn" đó, do đó, nó sẽ được xử lý như vậy, do đó, văn bản chung, do đó, được nối với yếu tố trước. Cuối cùng, mã có lỗi, việc đóng <ul/>nên được </ul>.

— Cyberknight

-2

<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

Trong CSS, bạn phải khai báo cả nhãn và đầu vào là display: inline-block và cho chiều rộng theo yêu cầu của bạn. Hy vọng điều này sẽ giúp bạn. :)

— kta
nguồn

-4

Đơn giản chỉ cần thêm

<form align="center ></from>

Chỉ cần đặt căn chỉnh trong thẻ mở.

— Zak
nguồn

Điều này sẽ không hoạt động, vì formkhông có alignthuộc tính (và ngay cả khi nó có, nó sẽ không được sử dụng cho phong cách / CSS). Ngoài ra, thẻ đóng là sai, nó nên được </form>. Có thể định nghĩa style="text-align:center"bên trong form, cái gì sẽ căn chỉnh toàn bộ nội dung của biểu mẫu ở trung tâm, nhưng đó không phải là câu hỏi ban đầu. Điều này sẽ không bao giờ căn chỉnh các nhãn với các trường đầu vào của chúng (vâng, tôi đã thử nghiệm trên Firefox 75, chỉ để chắc chắn).

— Cyberknight