วิธีจัดรูปแบบการป้อนข้อมูลใน HTML

117

ฉันเพิ่งเริ่มใช้ HTML และพยายามเรียนรู้วิธีใช้แบบฟอร์ม

ปัญหาใหญ่ที่สุดที่ฉันพบคือการจัดแนวฟอร์ม นี่คือตัวอย่างไฟล์ HTML ปัจจุบันของฉัน:

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

ปัญหานี้คือกล่องฟิลด์หลัง "อีเมล" มีความแตกต่างกันอย่างมากในแง่ของระยะห่างเมื่อเทียบกับชื่อและนามสกุล อะไรคือวิธีที่ 'เหมาะสม' ในการทำให้พวกเขา 'จัดเรียง' เป็นหลัก?

ฉันพยายามฝึกฝนรูปแบบและไวยากรณ์ที่ดี ... หลายคนอาจทำเช่นนี้กับ CSS ฉันไม่แน่ใจฉันเพิ่งเรียนรู้พื้นฐานของ HTML จนถึงตอนนี้

html forms alignment

— yoshyosh
แหล่งที่มา

มีการต่อสู้กันตลอดเวลาระหว่างเมื่อตาราง (ถ้าเป็นเช่นนั้น) คำตอบสำหรับคำถามของคุณไม่ใช่การกำจัดจุดเชื่อมตรงกลางคือ <ตาราง> สำหรับข้อมูลแบบตารางดูเพิ่มเติมที่นี่: stackoverflow.com/questions/83073 / …

— Trufa

เป็นคำถามเดียวกัน แต่คำตอบแนะนำให้ใช้แท็ก <table> พร้อมการอ้างอิง W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

อีกตัวอย่างหนึ่งสิ่งนี้ใช้ CSS ฉันเพียงแค่ใส่ฟอร์มใน div ด้วยคลาสคอนเทนเนอร์ และระบุว่าองค์ประกอบอินพุตที่อยู่ภายในจะต้องมีความกว้าง 100% ของความกว้างของคอนเทนเนอร์และไม่มีองค์ประกอบใด ๆ ที่ด้านใดด้านหนึ่ง

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

ขยายข้อมูลโค้ด

— serialk
แหล่งที่มา

2

สมบูรณ์แบบช่วยให้ฉันไม่ต้องยุ่งเกี่ยวกับเรื่องนี้มาก

— null

นอกจากนี้ยังขยายปุ่ม "ส่ง" ให้เท่ากับความกว้างของคอนเทนเนอร์

— Saurabh Rana

4

วิธีนี้ดูเหมือนจะไม่ได้ผล องค์ประกอบอินพุตไม่ได้จัดชิดซ้าย โซลูชันตารางด้านล่างใช้งานได้

— johny why

1

ฉันไม่ใช่แฟนตัวยงของการตั้งค่าความกว้างที่ชัดเจนเมื่อคุณสามารถทำได้โดยไม่ต้องใช้ (ดูคำตอบของฉันด้านล่าง)

— Clément

1

สิ่งนี้ให้ผลลัพธ์แปลก ๆ เมื่อใช้ปุ่มตัวเลือก ป้ายปุ่มตัวเลือกจะแสดงบรรทัดหลังปุ่มตัวเลือกจริง

— word ต่อไป

134

คำตอบที่ยอมรับ (การตั้งค่าความกว้างที่ชัดเจนเป็นพิกเซล) ทำให้ทำการเปลี่ยนแปลงได้ยากและแตกเมื่อผู้ใช้ของคุณใช้ขนาดแบบอักษรอื่น ในทางกลับกันการใช้ตาราง CSS ใช้งานได้ดี:

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>

ขยายข้อมูลโค้ด

นี่คือ JSFiddle: http://jsfiddle.net/DaS39/1/

และหากคุณต้องการให้ป้ายกำกับจัดชิดขวาให้เพิ่มtext-align: rightป้ายกำกับ: http://jsfiddle.net/DaS39/

แก้ไข: อีกหนึ่งบันทึกย่อ: ตาราง CSS ยังช่วยให้คุณเล่นกับคอลัมน์ได้ตัวอย่างเช่นหากคุณต้องการให้ช่องป้อนข้อมูลใช้พื้นที่มากที่สุดคุณสามารถเพิ่มสิ่งต่อไปนี้ในแบบฟอร์มของคุณได้

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

คุณอาจต้องการที่จะเพิ่มwhite-space: nowrapไปlabelsในกรณีที่

— Clément
แหล่งที่มา

4

ฉันชอบวิธีนี้ หมายความว่าฉันไม่ต้องกังวลว่าคอลัมน์ของฉันจะเปลี่ยนความกว้างอย่างหลีกเลี่ยงไม่ได้เมื่อเพจมีการพัฒนาผ่านการพัฒนา +1

— Tom Lord

9

@MuhammadUmer เนื่องจากตารางจะทำให้โปรแกรมอ่านหน้าจอและอุปกรณ์อำนวยความสะดวกหลาย ๆ สับสนในขณะที่ตาราง CSS จะแยกการนำเสนอและเนื้อหา ดังนั้นแบบฟอร์มของคุณจึงยังคงสามารถแยกวิเคราะห์ได้อย่างง่ายดายโดยโปรแกรมอ่านหน้าจอหรือตัวช่วยการอ่านและยังแสดงได้อย่างสวยงาม

— Clément

3

ป้ายกำกับที่เหมาะสมใน td แสดงให้เห็นว่าเป็นส่วนหนึ่งของข้อมูลที่จัดระเบียบตารางเช่นแผนภูมิ นั่นไม่ใช่กรณีที่นี่ นอกจากนี้การใช้ตาราง HTML ยังทำให้เปลี่ยนเค้าโครงในอนาคตได้ยากขึ้นหรือปรับให้เข้ากับขนาดหน้าจอต่างๆ (เช่นโทรศัพท์มือถือและแท็บเล็ต)

— Clément

4

ฉันต่อต้านโครงสร้างตาราง CSS อย่างมากด้วยอาร์กิวเมนต์เดียวกันที่ @MuhammadUmer สร้างขึ้นจนถึงวันนี้! ฉันกลัวและตัดสินใจที่จะลองและในที่สุดก็เห็นคุณค่าของการเปลี่ยน! นอกจากนี้ CSS ของมันจึงทำให้สิ่งต่างๆง่ายขึ้นในระยะยาว

— BillyNair

2

คุณจะขยายคอลัมน์ด้วยโซลูชันนี้ได้อย่างไร เพื่อให้ตรงกลางปุ่มส่ง

— eugenekr

31

วิธีง่ายๆสำหรับคุณหากคุณเพิ่งเริ่มใช้ HTML เพียงแค่ใช้ตารางเพื่อจัดเรียงทุกอย่าง

<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
แหล่งที่มา

44

วิธีแก้ปัญหาที่ง่ายและรวดเร็ว ออกจากการอภิปราย CSS ทางศาสนาในช่วงพักกลางวันและทำงานให้เสร็จ

— Emmanuel Bourg

3

@ClarkeyBoy - ใครจะสนใจตราบเท่าที่มันทำงานได้

— SolidSnake

1

@ClarkeyBoy - ความคิดเห็นที่งมงายที่สุด? ฮ่า ๆ .. ฉันไม่อยากทะเลาะกับคุณที่นี่ .. ถ้าคุณอยากจะทำแบบนั้นก็ทำ ถ้าคุณอยากจะทำตามตารางขึ้นอยู่กับคุณ แต่อย่าคิดว่าลูกค้าหรือผู้คนทั้งหมดจะสนใจเรื่องนั้น ส่วนใหญ่ใส่ใจในการทำงานให้สำเร็จ ..

— SolidSnake

2

@ClarkeyBoy - อ่านคำตอบนี้และโพสต์จาก W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@EmmanuelBourg: นี่ไม่ใช่สิ่งที่ตาราง CSS หมายถึง? บรรลุเค้าโครงเหมือนตารางโดยไม่ทำให้โปรแกรมอ่านหน้าจอสับสน? รูปแบบที่ OP ขอนั้นค่อนข้างง่ายที่จะบรรลุโดยใช้ตาราง CSS (ดูด้านล่าง )

— Clément

17

ฉันพบว่าการเปลี่ยนการแสดงป้ายกำกับเป็นแบบอินไลน์บล็อกและตั้งค่าความกว้างนั้นง่ายกว่ามาก

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

— ไบรอน
แหล่งที่มา

9

คุณควรใช้โต๊ะ เป็นเรื่องของโครงสร้างเชิงตรรกะข้อมูลจะเป็นตาราง: นี่คือเหตุผลที่คุณต้องการให้จัดแนวเนื่องจากคุณต้องการแสดงให้เห็นว่าป้ายกำกับไม่ได้เกี่ยวข้องกับช่องป้อนข้อมูล แต่ยังรวมถึงกันและกันในโครงสร้างสองมิติ

[ลองพิจารณาสิ่งที่คุณจะทำหากคุณมีค่าสตริงหรือตัวเลขที่จะแสดงแทนช่องป้อนข้อมูล]

— ถนน Collin
แหล่งที่มา

2

ขอขอบคุณแนวทางของคุณ

— Jono

2

สำหรับสิ่งนี้ฉันชอบที่จะรักษาความหมาย HTML ที่ถูกต้องและใช้ CSS อย่างง่ายที่สุด

สิ่งนี้จะได้ผล:

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

อย่างไรก็ตามข้อเสียเปรียบประการหนึ่ง: คุณอาจต้องเลือกความกว้างของฉลากที่เหมาะสมสำหรับแต่ละรูปแบบและนี่ไม่ใช่เรื่องง่ายหากป้ายกำกับของคุณสามารถเป็นแบบไดนามิกได้ (เช่นป้าย I18N)

— ซามูเอลยูสตาชิ
แหล่งที่มา

1

ฉันเป็นแฟนตัวยงของการใช้รายการคำจำกัดความ

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

ง่ายต่อการจัดสไตล์โดยใช้ CSS และหลีกเลี่ยงความอัปยศของการใช้ตารางเพื่อจัดวาง

— แอนดรู
แหล่งที่มา

สิ่งนี้ทำได้อย่างง่ายดายด้วยdivs ( ddเพียงแค่มีระยะขอบซ้าย ~ 40px) และหลีกเลี่ยงความสับสนทางความหมาย นอกจากนี้ป้ายกำกับ / อินพุตเหล่านี้ไม่เรียงแถวในบรรทัดเดียวกัน

— Hollister

1

ใช้ css

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

สิ่งนี้ให้คุณเช่น:

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

— Gjaa
แหล่งที่มา

นอกจากนี้คุณยังต้องใช้clearเพื่อหลีกเลี่ยงการซ้อนฟอร์มเพื่อบอกว่ามีความกว้างน้อยกว่า

— TheMaster

0

วิธีการดั้งเดิมคือการใช้ตาราง

ตัวอย่าง:

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

อย่างไรก็ตามหลายคนอาจโต้แย้งว่าตารางมีการ จำกัด และชอบ CSS ประโยชน์ของการใช้ CSS คือคุณสามารถใช้องค์ประกอบต่างๆ จาก div รายการที่เรียงลำดับและไม่เรียงลำดับคุณสามารถทำเค้าโครงเดียวกันได้

ท้ายที่สุดคุณจะต้องใช้สิ่งที่คุณพอใจมากที่สุด

คำแนะนำ: เริ่มต้นใช้งานตารางได้ง่าย

— OV Web Solutions
แหล่งที่มา

1

+1 สำหรับการระบุว่าพวกเขาเริ่มต้นได้ง่าย ... แต่นักพัฒนาจริงๆควรใช้ตารางสำหรับข้อมูลเท่านั้น (ดูความคิดเห็นของฉันเกี่ยวกับคำตอบอื่นสำหรับการพูดจาโผงผาง!)

— ClarkeyBoy

1

การใช้ตาราง CSS นั้นง่ายพอ ๆ กันและไม่มีปัญหาการเข้าถึงที่เกี่ยวข้อง ดูคำตอบของฉันด้านล่าง

— Clément

0

สำหรับพื้นฐานเบื้องต้นคุณสามารถลองจัดแนวในตาราง อย่างไรก็ตามการใช้ตารางไม่ดีสำหรับเค้าโครงเนื่องจากตารางมีไว้สำหรับเนื้อหา

สิ่งที่คุณสามารถใช้ได้คือเทคนิคลอยตัว CSS

รหัส 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>

บทความละเอียดที่ฉันเขียนสามารถพบได้ในการตอบคำถามของปัญหาIE7 float : ปัญหาIE7 float right

— มาร์ท
แหล่งที่มา

ขอบคุณสำหรับตัวอย่างอย่างไรก็ตามรูปแบบ HTML ยังไม่สามารถแก้ปัญหาได้ ถ้าคุณเปลี่ยน 'ชื่อ' ในหนึ่งในนั้นเป็นแค่ 'ชื่อ' ฉันจะพบปัญหาเดียวกับที่เคยเจอครั้งแรก

— yoshyosh

ฉันเคยทำงานกับสิ่งนี้จากนักออกแบบและมันก็เปราะบางเล็กน้อย IME สำหรับเค้าโครงพื้นฐานนี้จะใช้ได้ดี 98% ของเวลา พยายามทำให้ซับซ้อนเกินไปเช่นเค้าโครงสองคอลัมน์หรือป้ายชื่อหลายบรรทัดก็ทำได้ยาก

— สถิติ

1

@staticsan - หากคุณเข้าใจการลอยการเคลียร์และ div คุณจะทำงานได้ดีกับเลย์เอาต์ดังกล่าวและในความเป็นจริงมันแสดงผลเร็วกว่าและยืดหยุ่นกว่าเมื่อเทียบกับตารางบนเบราว์เซอร์สมัยใหม่

— mauris

ฉันคิดว่าฉันเข้าใจการลอยการเคลียร์และ div แต่ฉันไม่สามารถขยายแบบฟอร์มที่ได้รับโดยที่มันไม่แตก ไม่ว่าจะเป็นข้อบกพร่องในความเข้าใจของฉันหรือการใช้งานของนักออกแบบความจริงก็ยังคงเปราะบาง (ที่น่าสนใจคือเวอร์ชันถัดไปจะเป็นการออกแบบไฮบริดโดยใช้ulแท็ก)

— สถิติใน

0

ฉันรู้ว่าคำตอบนี้ได้รับคำตอบแล้ว แต่ฉันพบวิธีใหม่ในการจัดแนวให้เข้ากันได้ดี - พร้อมประโยชน์พิเศษ - โปรดดูhttp://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

โดยพื้นฐานแล้วคุณใช้องค์ประกอบป้ายกำกับรอบอินพุตและจัดแนวโดยใช้สิ่งนั้น:

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

จากนั้นด้วย css คุณก็จัดแนว:

label {
    display:block;
    position:relative;
}

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

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

คุณไม่จำเป็นต้องมี br ที่ยุ่งเหยิงอยู่รอบ ๆ สำหรับเส้นแบ่ง - หมายความว่าคุณสามารถทำเค้าโครงหลายคอลัมน์ได้อย่างรวดเร็วแบบไดนามิก
ทั้งบรรทัดสามารถคลิกได้ โดยเฉพาะอย่างยิ่งสำหรับช่องทำเครื่องหมายนี้เป็นความช่วยเหลืออย่างมาก
การแสดง / ซ่อนบรรทัดฟอร์มแบบไดนามิกทำได้ง่าย (คุณเพียงแค่ค้นหาอินพุตและซ่อนพาเรนต์ -> เลเบล)
คุณสามารถกำหนดชั้นเรียนให้กับป้ายกำกับทั้งหมดทำให้แสดงข้อผิดพลาดที่ชัดเจนมากขึ้น (ไม่เพียง แต่รอบ ๆ ช่องป้อนข้อมูล)

— นิโก้
แหล่งที่มา

ดี แต่ต้องการความกว้างของฉลากคงที่ ข้อความของป้ายกำกับขนาดใหญ่จะแทนที่ข้อมูลที่ป้อน

— mauretto

0

คำตอบของClémentนั้นดีที่สุด นี่เป็นคำตอบที่ได้รับการปรับปรุงโดยแสดงการจัดตำแหน่งที่เป็นไปได้ที่แตกต่างกันรวมถึงปุ่มจัดแนวซ้าย - กลางขวา:

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>

ขยายข้อมูลโค้ด

ฉันเพิ่มช่องว่างทางด้านขวาของป้ายกำกับทั้งหมด ( padding-right:8px) เพื่อให้ตัวอย่างดูน่ากลัวน้อยลงเล็กน้อย แต่ควรทำอย่างระมัดระวังมากขึ้นในโครงการจริง (การเพิ่มช่องว่างภายในองค์ประกอบอื่น ๆ ทั้งหมดก็เป็นความคิดที่ดีเช่นกัน)

— Cyberknight
แหล่งที่มา

-1

css ฉันเคยแก้ปัญหานี้คล้ายกับ Gjaa แต่มีสไตล์ที่ดีกว่า

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

นี่คือ HTML ของฉันซึ่งใช้เฉพาะสำหรับแบบฟอร์มการลงทะเบียนแบบง่ายที่ไม่มีรหัส 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>

มันง่ายมากและฉันเพิ่งเริ่มต้น แต่มันก็ใช้ได้ผลดีทีเดียว

— PA_Commons
แหล่งที่มา

-1

แทรกแท็กอินพุตภายในรายการที่ไม่เรียงลำดับทำให้ไม่มีสไตล์ นี่คือตัวอย่าง

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

ทำงานให้ฉัน!

— วิเวกไอเยอร์
แหล่งที่มา

สิ่งนี้จะไม่ได้ผล ULจะเพียงแค่เยื้องเนื้อหาออกจากระยะขอบไม่จัดแนวอะไรเลย การใส่inputs เข้าไปLIจะเป็นการเพิ่มสัญลักษณ์แสดงหัวข้อย่อยก่อนหน้า (ใช่มันจะถูกจัดแนวเป็นรายการไม่ใช่ติดกับป้ายกำกับ) นอกจากนี้ "อินพุต 2" จะยึดติดกับinputองค์ประกอบก่อนหน้าเนื่องจากLIไม่ได้ปิด (ไม่มี</li>) และไม่มีการเริ่มต้น<li>สำหรับ "ป้ายกำกับ" นั้นดังนั้นจึงจะได้รับการปฏิบัติตามที่ควรจะเป็นข้อความทั่วไปจึงเชื่อมต่อกับ องค์ประกอบก่อนหน้า ล่าสุดรหัสมีข้อผิดพลาดปิดที่ควรจะเป็น<ul/> </ul>

— Cyberknight

-2

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

ใน CSS คุณต้องประกาศทั้ง label และ input เป็น display: inline-block และให้ width ตามความต้องการของคุณ หวังว่านี่จะช่วยคุณได้ :)

— KTA
แหล่งที่มา

-4

เพียงแค่เพิ่ม

<form align="center ></from>

เพียงวางแนวในแท็กเปิด

— แซคกิลล์
แหล่งที่มา

สิ่งนี้จะใช้ไม่ได้เนื่องจากformไม่มีalignแอตทริบิวต์ (และแม้ว่าจะมี แต่ก็จะถูกเลิกใช้ไปใช้ style / CSS) </form>นอกจากนี้แท็กปิดเป็นความผิดที่มันควรจะเป็น เป็นไปได้ที่จะกำหนดstyle="text-align:center"ภายในformสิ่งที่จะจัดเนื้อหาทั้งหมดของแบบฟอร์มให้อยู่ตรงกลาง แต่นั่นไม่ใช่สิ่งที่คำถามเดิมเกี่ยวกับ สิ่งนี้จะไม่จัดแนวป้ายกำกับกับช่องป้อนข้อมูล (ใช่ฉันทดสอบบน Firefox 75 เพื่อให้แน่ใจ)

— Cyberknight