สมมติว่าฉันมีช่องป้อนข้อมูล 10 ช่อง และก่อนช่องป้อนข้อมูลทางด้านซ้าย ฉันมีแท็ก span ที่เก็บข้อความเพื่อระบุสิ่งที่ผู้ใช้ควรป้อนลงในฟิลด์ ฉันทำบางอย่าง แต่ฉันไม่แน่ใจว่าจะเพิ่มช่องว่างระหว่างแท็ก span และช่องป้อนข้อมูลได้อย่างไร ไม่ว่าข้อความจะใหญ่แค่ไหนก็ตาม
แบบนี้:
เวลาผ่านไประยะหนึ่งแล้ว และตอนนี้ฉันก็เปลี่ยนแนวทางของฉันเมื่อสร้างแบบฟอร์ม จนถึงทุกวันนี้ ฉันได้ทำไปหลายพันครั้งแล้ว และรู้สึกเบื่อหน่ายกับการพิมพ์ id ทุกๆ label/input คู่ ดังนั้นสิ่งนี้จึงถูกทิ้งลงในโถส้วม เมื่อคุณดำดิ่ง input เข้าไปใน label สิ่งต่างๆ จะทำงานในลักษณะเดียวกัน โดยไม่จำเป็นต้องใช้รหัส ฉันยังใช้ประโยชน์จากการที่ flexbox มีความยืดหยุ่นมาก
HTML:
<label>
Short label <input type="text" name="dummy1" />
</label>
<label>
Somehow longer label <input type="text" name="dummy2" />
</label>
<label>
Very long label for testing purposes <input type="text" name="dummy3" />
</label>
ซีเอสเอส:
label {
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: right;
width: 400px;
line-height: 26px;
margin-bottom: 10px;
}
input {
height: 20px;
flex: 0 0 200px;
margin-left: 10px;
}
ใช้ label แทน span มีไว้เพื่อจับคู่กับอินพุตและคงฟังก์ชันการทำงานเพิ่มเติมบางอย่างไว้ (การคลิกป้ายกำกับจะเน้นอินพุต)
นี่อาจเป็นสิ่งที่คุณต้องการ:
HTML:
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
ซีเอสเอส:
label {
width:180px;
clear:left;
text-align:right;
padding-right:10px;
}
input, label {
float:left;
}
for ของป้ายกำกับและแอตทริบิวต์ id ของอินพุตเพื่อให้ตรรกะของฟอร์มเสร็จสิ้น name และ id ของอินพุตแต่ละรายการไม่จำเป็นต้องเหมือนกัน แต่ขอแนะนำแนวทางปฏิบัติที่ดีเพื่อหลีกเลี่ยงความสับสนเพิ่มเติมเมื่อตรวจสอบแบบฟอร์มของคุณ หวังว่ามันจะช่วยได้ :)
- person Petr Čihula; 24.06.2013
focus อินพุตได้
- person Nick R; 24.06.2013
ซึ่งสามารถทำได้โดยใช้ CSS display: grid ใหม่ล่าสุด (การสนับสนุนเบราว์เซอร์)
HTML:
<div class='container'>
<label for="dummy1">title for dummy1:</label>
<input id="dummy1" name="dummy1" value="dummy1">
<label for="dummy2">longer title for dummy2:</label>
<input id="dummy2" name="dummy2" value="dummy2">
<label for="dummy3">even longer title for dummy3:</label>
<input id="dummy3" name="dummy3" value="dummy3">
</div>
ซีเอสเอส:
.container {
display: grid;
grid-template-columns: 1fr 3fr;
}
เมื่อใช้ตาราง CSS องค์ประกอบเริ่มต้นจะถูกจัดวางแบบคอลัมน์ต่อคอลัมน์ จากนั้นทีละแถว กฎ grid-template-columns จะสร้างคอลัมน์ตารางสองคอลัมน์ โดยคอลัมน์แรกใช้พื้นที่ 1/4 ของพื้นที่แนวนอนทั้งหมด และอีกคอลัมน์หนึ่งใช้พื้นที่ 3/4 ของพื้นที่แนวนอน สิ่งนี้จะสร้างเอฟเฟกต์ที่ต้องการ
for=)
- person Maximilian Burszley; 16.08.2019
<label>"Text"<input/></label>
- person Matthis Kohli; 03.08.2020
คุณสามารถใช้ตาราง
<table class="formcontrols" >
<tr>
<td>
<label for="firstName">FirstName:</label>
</td>
<td style="padding-left:10px;">
<input id="firstName" name="firstName" value="John">
</td>
</tr>
<tr>
<td>
<label for="Test">Last name:</label>
</td>
<td style="padding-left:10px;">
<input id="lastName" name="lastName" value="Travolta">
</td>
</tr>
</table>
ผลลัพธ์จะเป็น: ImageResult
คุณสามารถใช้โค้ดด้านล่างได้
<html>
<head>
<style>
.labelClass{
float: left;
width: 113px;
}
</style>
</head>
<body>
<form action="yourclassName.jsp">
<span class="labelClass">First name: </span><input type="text" name="fname"><br>
<span class="labelClass">Last name: </span><input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<span> สำหรับป้ายกำกับ วิธีที่ถูกต้องทางความหมายคือการใช้แท็ก <label> พร้อมแอตทริบิวต์ for="" ที่ถูกต้อง
- person Nick R; 24.06.2013
คุณสามารถใช้แท็ก 'pre' ภายในป้ายกำกับได้ตลอดเวลา และเพียงป้อนช่องว่างในนั้น คุณจึงเพิ่มช่องว่างตามจำนวนที่ต้องการหรือต่างกันได้ตลอดเวลา
<form>
<label>First Name :<pre>Here just enter number of spaces you want to use(I mean using spacebar to enter blank spaces)</pre>
<input type="text"></label>
<label>Last Name :<pre>Now Enter enter number of spaces to match above number of
spaces</pre>
<input type="text"></label>
</form>
หวังว่าคุณจะชอบคำตอบของฉัน มันเป็นแฮ็คที่ง่ายและมีประสิทธิภาพ
labelแทนspanมีไว้เพื่อจับคู่กับอินพุตและคงฟังก์ชันการทำงานเพิ่มเติมบางอย่างไว้ (การคลิกป้ายกำกับจะเน้นอินพุต) ถึงอย่างไร. คุณหมายถึงอะไรกันแน่ในการเพิ่มสิ่งต่าง ๆ ระหว่างแท็ก span และอินพุต สิ่งของประเภทใด? คุณหมายความว่าคุณต้องการให้ป้ายกำกับทั้งหมดมีความกว้างเท่ากันโดยไม่คำนึงถึงเนื้อหาใช่หรือไม่ - person Petr Čihula schedule 24.06.2013