Bagaimana menyelaraskan formulir input dalam HTML

117

Saya baru mengenal HTML dan saya mencoba mempelajari cara menggunakan formulir.

Masalah terbesar yang saya alami sejauh ini adalah menyelaraskan formulir. Berikut adalah contoh file HTML saya saat ini:

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

Masalahnya adalah, kotak bidang setelah 'Email' sangat berbeda dalam hal spasi dibandingkan dengan nama depan, dan nama belakang. Apa cara yang 'tepat' untuk membuatnya sehingga mereka 'berbaris' pada dasarnya?

Saya mencoba mempraktikkan bentuk dan sintaks yang baik ... banyak orang mungkin melakukan ini dengan CSS. Saya tidak yakin, saya baru mempelajari dasar-dasar HTML sejauh ini.

html forms alignment

— yoshyosh
sumber

ada pertengkaran terus-menerus antara ketika tabel (jika ada), jawaban atas pertanyaan Anda bukanlah pengecualian, titik tengah jahitannya adalah <tables> adalah untuk data tabel, lihat lebih lanjut di sini: stackoverflow.com/questions/83073 /…

— Trufa

Pertanyaan yang persis sama tetapi jawabannya menyarankan menggunakan tag <table> dengan kutipan W3C: stackoverflow.com/questions/4707332

— Bossliaw

62

Contoh lain, ini menggunakan CSS, saya hanya meletakkan formulir di div dengan kelas kontainer. Dan menetapkan bahwa elemen masukan yang terkandung di dalamnya harus 100% dari lebar penampung dan tidak memiliki elemen di kedua sisinya.

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

Luaskan cuplikan

— serialk
sumber

2

Sempurna, hanya menyelamatkan saya dari banyak masalah.

— Nihil

Ini juga memperluas tombol "kirim" saya ke lebar penampung.

— Saurabh Rana

4

Solusi ini tampaknya tidak berhasil. Elemen masukan tidak rata kiri. Solusi tabel di bawah ini berfungsi.

— johny mengapa

1

Saya bukan penggemar berat pengaturan lebar eksplisit, ketika Anda dapat melakukannya tanpa satu (lihat jawaban saya di bawah)

— Clément

1

Ini memberikan hasil yang aneh dengan tombol radio. Label tombol radio menunjukkan baris setelah tombol radio sebenarnya.

— kata

134

Jawaban yang diterima (menyetel lebar eksplisit dalam piksel) menyulitkan untuk membuat perubahan, dan berhenti saat pengguna Anda menggunakan ukuran font yang berbeda. Menggunakan tabel CSS, di sisi lain, bekerja dengan baik:

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>

Luaskan cuplikan

Ini JSFiddle: http://jsfiddle.net/DaS39/1/

Dan jika Anda membutuhkan label rata kanan, cukup tambahkan text-align: rightke label: http://jsfiddle.net/DaS39/

EDIT: Satu lagi catatan singkat: tabel CSS juga memungkinkan Anda bermain dengan kolom: misalnya, jika Anda ingin membuat kolom input mengambil ruang sebanyak mungkin, Anda dapat menambahkan yang berikut ini ke formulir Anda

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

Anda mungkin ingin menambahkan white-space: nowrapke labelsdalam kasus itu.

— Sejuk
sumber

4

Saya suka solusi ini. Ini berarti saya tidak perlu khawatir tentang kolom saya yang mau tidak mau mengubah lebar saat halaman berkembang melalui pengembangan. +1

— Tom Lord

9

@MuhammadUmer Karena tabel akan membingungkan pembaca layar dan banyak perangkat bantu, sedangkan tabel CSS memisahkan presentasi dan konten. Dengan demikian, formulir Anda tetap dapat diuraikan dengan mudah oleh pembaca layar atau asisten baca, namun ditampilkan dengan baik.

— Clément

3

Nah, label pas di td menunjukkan bahwa itu adalah bagian dari data tabular yang terorganisir, seperti grafik; bukan itu masalahnya di sini. Plus, menggunakan tabel HTML mempersulit untuk mengubah tata letak di masa mendatang, atau untuk menyesuaikannya dengan berbagai ukuran layar (seperti ponsel & tablet).

— Clément

4

Saya telah menolak keras struktur tabel CSS dengan argumen yang sama yang dibuat oleh @MuhammadUmer, hingga hari ini! Saya menyerah dan memutuskan untuk mencobanya dan akhirnya melihat nilai dari peralihan! Plus, CSS-nya, jadi mempermudah dalam jangka panjang

— BillyNair

2

Bagaimana Anda dapat merentang kolom dengan solusi ini? Untuk tombol kirim rata tengah.

— eugenekr

31

Solusi sederhana untuk Anda jika Anda baru mengenal HTML, cukup gunakan tabel untuk menyusun semuanya.

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

43

Solusi cepat dan sederhana. Tinggalkan perdebatan agama CSS untuk istirahat makan siang dan selesaikan pekerjaan.

— Emmanuel Bourg

3

@ClarkeyBoy - siapa yang peduli selama melakukan pekerjaannya.

— SolidSnake

1

@ClarkeyBoy - komentar paling bodoh? lol .. Saya tidak ingin berdebat dengan Anda di sini .. jika Anda ingin melakukannya dengan cara divs lakukanlah. jika Anda ingin melakukannya tabel terserah Anda. tetapi jangan berasumsi bahwa semua pelanggan atau orang akan peduli tentang itu. kebanyakan dari mereka peduli tentang menyelesaikan pekerjaan ..

— SolidSnake

2

@ClarkeyBoy - Baca jawaban ini, dan kiriman dari W3C: stackoverflow.com/a/4707368/40411

— J. Polfer

6

@ EmmanuelBourg: Bukankah ini tepatnya tabel CSS yang dimaksudkan? Mencapai tata letak seperti tabel tanpa membingungkan pembaca layar? Tata letak yang diminta OP sebenarnya cukup mudah dicapai dengan menggunakan tabel CSS (lihat di bawah )

— Clément

17

Saya merasa jauh lebih mudah untuk mengubah tampilan label menjadi blok-sebaris dan mengatur lebar

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

— Byron
sumber

9

Anda harus menggunakan meja. Mengenai struktur logis , datanya berbentuk tabel: inilah mengapa Anda ingin meratakannya, karena Anda ingin menunjukkan bahwa label tidak hanya terkait dengan kotak masukannya tetapi juga satu sama lain, dalam struktur dua dimensi.

[pertimbangkan apa yang akan Anda lakukan jika Anda memiliki nilai string atau numerik untuk ditampilkan, bukan kotak masukan.]

— Collin Street
sumber

2

Saya menghargai pendekatan Anda.

— Jono

2

Untuk ini, saya lebih suka mempertahankan semantik HTML yang benar, dan menggunakan CSS sesederhana mungkin.

Sesuatu seperti ini akan melakukan pekerjaan itu:

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

Namun satu kelemahan: Anda mungkin harus memilih lebar label yang tepat untuk setiap formulir, dan ini tidak mudah jika label Anda bisa dinamis (label I18N misalnya).

— Samuel EUSTACHI
sumber

1

Saya penggemar berat menggunakan daftar definisi.

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

Mereka mudah ditata menggunakan CSS, dan menghindari stigma menggunakan tabel untuk tata letak.

— Andrew
sumber

Ini sama mudahnya dilakukan dengan divs (a ddhanya memiliki margin kiri ~ 40px), dan menghindari kebingungan semantik. Selain itu, tidak satu pun dari ini yang berbaris label / input pada baris yang sama.

— Hollister

1

menggunakan css

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

ini memberi Anda sesuatu seperti:

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

— Gjaa
sumber

Anda juga harus menggunakan clearuntuk menghindari formulir menumpuk, katakanlah, lebar yang lebih rendah

— TheMaster

0

Metode tradisional adalah dengan menggunakan tabel.

Contoh:

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

Namun, banyak yang berpendapat bahwa tabel membatasi dan lebih memilih CSS. Manfaat menggunakan CSS adalah Anda dapat menggunakan berbagai elemen. Dari div, daftar terurut dan tak berurutan, Anda bisa mencapai tata letak yang sama.

Pada akhirnya, Anda pasti ingin menggunakan apa yang menurut Anda paling nyaman.

Petunjuk: Tabel mudah digunakan.

— Solusi Web OV
sumber

1

1 untuk menyatakan bahwa mereka mudah untuk memulai ... tetapi pengembang seharusnya hanya menggunakan tabel untuk data (lihat komentar saya di jawaban lain untuk kata-kata kasar lengkap!)

— ClarkeyBoy

1

Menggunakan tabel CSS sama mudahnya, dan tidak ada masalah aksesibilitas terkait. Lihat jawaban saya di bawah.

— Clément

0

Untuk dasar-dasarnya, Anda dapat mencoba menyelaraskannya di tabel. Namun penggunaan tabel buruk untuk tata letak karena tabel dimaksudkan untuk konten.

Yang bisa Anda gunakan adalah teknik mengambang CSS.

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

Artikel terperinci yang saya tulis dapat ditemukan menjawab pertanyaan masalah float IE7 : masalah float right IE7

— mauris
sumber

terima kasih atas contohnya, namun bentuk HTML masih belum menyelesaikan masalah. Jika Anda mengubah 'Nama

— Depan

Saya telah bekerja dengan ini dari desainer dan ini sedikit rapuh, IME. Untuk tata letak dasar ini, akan baik-baik saja 98% dari waktu. Cobalah untuk menjadi terlalu rumit, misalnya tata letak dua kolom, atau label multi-garis, dan itu menjadi sulit.

— statika

1

@staticsan - jika Anda memahami float, clears dan divs, Anda akan bekerja dengan baik dengan tata letak seperti itu dan pada kenyataannya mereka merender lebih cepat dan lebih fleksibel dibandingkan dengan tabel di browser modern.

— mauris

Yah, saya pikir saya mengerti float, clears dan divs, tapi saya tidak bisa memperpanjang formulir yang diberikan tanpa merusaknya. Apakah itu kesalahan dalam pemahaman saya atau implementasi perancang, faktanya tetap rapuh. (Menariknya, versi berikutnya akan lebih dari desain hybrid menggunakan ultag.)

— statika

0

Saya tahu ini telah dijawab, tetapi saya menemukan cara baru untuk menyelaraskannya dengan baik - dengan manfaat tambahan - lihat http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

pada dasarnya Anda menggunakan elemen label di sekitar input dan menyelaraskan menggunakan itu:

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

dan kemudian dengan css Anda cukup menyelaraskan:

label {
    display:block;
    position:relative;
}

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

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

Anda tidak perlu br berantakan untuk penggalan baris - artinya Anda dapat dengan cepat menyelesaikan tata letak multi-kolom secara dinamis
seluruh baris dapat diklik. Khusus untuk kotak centang, ini sangat membantu.
Menampilkan / menyembunyikan garis formulir secara dinamis itu mudah (Anda cukup mencari input dan menyembunyikan induknya -> label)
Anda dapat menetapkan kelas ke seluruh label sehingga menampilkan kesalahan masukan lebih jelas (tidak hanya di sekitar bidang masukan)

— Niko
sumber

Bagus, tapi perlu lebar label tetap. Teks label besar menggantikan masukan.

— mauretto

0

Jawaban Clément sejauh ini adalah yang terbaik. Berikut jawaban yang agak lebih baik, menunjukkan kemungkinan perataan yang berbeda, termasuk tombol rata kiri-tengah-kanan:

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>

Luaskan cuplikan

Saya menambahkan beberapa padding di sebelah kanan semua label ( padding-right:8px) hanya untuk membuat contoh terlihat sedikit kurang mengerikan, tetapi itu harus dilakukan lebih hati-hati dalam proyek nyata (menambahkan padding ke semua elemen lain juga akan menjadi ide yang bagus).

— Cyberknight
sumber

-1

css Saya biasa mengatasi masalah ini, mirip dengan Gjaa tetapi gaya lebih baik

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

Berikut adalah HTML saya, digunakan khusus untuk formulir pendaftaran sederhana tanpa kode 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>

Ini sangat sederhana, dan saya baru saja mulai, tetapi berhasil dengan cukup baik

— PA_Commons
sumber

-1

Sisipkan tag input di dalam unordered list. Buatlah style-type tidak ada. Berikut contohnya.

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

Bekerja untuk saya!

— Vivek Iyer
sumber

Ini tidak akan berhasil. ULhanya akan menjauhkan konten dari margin, tidak menyelaraskan apa pun. Menempatkan inputs di LIhanya akan menambahkan poin di depannya (ya, mereka akan disejajarkan, sebagai daftar, bukan terhadap label). Selain itu, "Input2" akan melekat pada inputelemen sebelumnya , karena LItidak ditutup (tidak ada </li>) dan tidak ada awal <li>untuk "label" itu, sehingga akan diperlakukan sebagaimana mestinya, teks umum, oleh karena itu, digabungkan ke elemen sebelumnya. Terakhir, kode mengalami kesalahan, <ul/>harus ditutup </ul>.

— Cyberknight

-2

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

Di CSS Anda harus mendeklarasikan label dan input sebagai display: inline-block dan memberikan lebar sesuai dengan kebutuhan Anda. Semoga ini bisa membantu Anda. :)

— kta
sumber

-4

Cukup tambahkan

<form align="center ></from>

Letakkan saja di tag pembuka.

— Zak Gill
sumber

Ini tidak akan berfungsi, karena formtidak memiliki alignatribut (dan bahkan jika ada, itu tidak akan digunakan lagi untuk penggunaan gaya / CSS). Juga, tag penutupnya salah, itu seharusnya </form>. Dimungkinkan untuk menentukan style="text-align:center"di dalam form, apa yang akan menyelaraskan seluruh konten formulir di tengah, tapi itu bukan tentang pertanyaan aslinya. Ini tidak akan pernah menyelaraskan label dengan bidang masukannya (ya, saya menguji di Firefox 75, hanya untuk memastikan).

— Cyberknight