HTML'de girdi formları nasıl hizalanır

117

HTML konusunda yeniyim ve formları nasıl kullanacağımı öğrenmeye çalışıyorum.

Şu ana kadar yaşadığım en büyük sorun formları hizalamak. İşte mevcut HTML dosyamın bir örneğ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>

Bununla ilgili sorun, "E-posta" dan sonraki alan kutusunun, ad ve soyad ile karşılaştırıldığında boşluk açısından büyük ölçüde farklı olmasıdır. Temelde "sıraya dizilmeleri" için bunu yapmanın "uygun" yolu nedir?

İyi bir biçim ve sözdizimi uygulamaya çalışıyorum ... bunu birçok kişi CSS ile yapabilir Emin değilim, şimdiye kadar sadece HTML'nin temellerini öğrendim.

html forms alignment

— yoshyosh
kaynak

Tablolar arasında sürekli bir mücadele var (eğer varsa), sorunuzun cevapları istisna değil, orta nokta dikişi bu <tables> tablo verileri içindir, daha fazlasını burada bulabilirsiniz: stackoverflow.com/questions/83073 /…

— Trufa

Tam olarak aynı soru ancak yanıt, W3C

— atıfıyla

62

Başka bir örnek, bu CSS kullanıyor, sadece formu konteyner sınıfıyla bir div içine koyuyorum. Ve içerdiği girdi öğelerinin kap genişliğinin% 100'ü olması ve her iki tarafta da herhangi bir öğeye sahip olmaması belirtildi.

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

Snippet'i genişlet

— serialk
kaynak

2

Mükemmel, beni çok fazla uğraşmaktan kurtardı.

— boş

Ayrıca, "gönder" düğmemi kapsayıcı genişliğine genişletiyor.

— Saurabh Rana

4

Bu çözüm işe yaramıyor gibi görünüyor. Giriş öğeleri sola hizalanmaz. Aşağıdaki tablo çözümü işe yarıyor.

— johny neden

1

Ben (bkz biri olmadan yapabilecekken, açık bir genişliğe ayarlanması büyük bir hayranı değilim benim cevap aşağıda)

— Clément

1

Bu, radyo düğmeleriyle garip sonuçlar verir. Radyo düğmesi etiketi, gerçek radyo düğmesinden sonraki satırı gösterir.

— wordsforthewise

134

Kabul edilen yanıt (piksel cinsinden açık bir genişlik belirleme) değişiklik yapmayı zorlaştırır ve kullanıcılarınız farklı bir yazı tipi boyutu kullandığında kesilir. Öte yandan CSS tablolarını kullanmak harika çalışıyor:

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>

Snippet'i genişlet

İşte bir JSFiddle: http://jsfiddle.net/DaS39/1/

Sağa hizalanmış etiketlere ihtiyacınız varsa, etiketlere eklemeniz yeterlidir text-align: right: http://jsfiddle.net/DaS39/

DÜZENLEME: Bir hızlı not daha: CSS tabloları ayrıca sütunlarla oynamanıza izin verir: örneğin, giriş alanlarının olabildiğince fazla yer kaplamasını istiyorsanız, aşağıdakileri formunuza ekleyebilirsiniz

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

Eklemek istediğiniz olabilir white-space: nowrapiçin labelsbu durumda.

— Clément
kaynak

4

Bu çözümü beğendim. Bu, sayfa geliştirme yoluyla geliştikçe sütunlarımın kaçınılmaz olarak genişliğini değiştirmesi konusunda endişelenmeme gerek olmadığı anlamına geliyor. +1

— Tom Lord

9

@MuhammadUmer Çünkü tablolar ekran okuyucuları ve birçok yardımcı cihazı karıştırırken, CSS tabloları sunum ve içeriği ayırır. Böylece formunuz bir ekran okuyucu veya okuma asistanı tarafından kolayca ayrıştırılabilir ve yine de güzel bir şekilde görüntülenir.

— Clément

3

Eh, td'deki etiketin yerleştirilmesi, bunun grafikler gibi organize, tablo verilerinin bir parçası olduğunu gösterir; burada durum böyle değil. Ayrıca, HTML tablolarının kullanılması, gelecekte düzeni değiştirmeyi veya onu çeşitli ekran boyutlarına uyarlamayı (cep telefonlarını ve tabletleri düşünün) zorlaştırır.

— Clément

4

Bugüne kadar @MuhammadUmer'ın yaptığı aynı argümanla CSS tablo yapısına şiddetle direniyordum! Vazgeçtim ve denemeye karar verdim ve sonunda değiştirmenin değerini anladım! Artı, CSS özelliği uzun vadede işleri kolaylaştırıyor

— BillyNair

2

Bu çözümle sütunları nasıl genişletebilirsiniz? Ortaya hizalamak için gönder düğmesini.

— eugenekr

31

HTML'de yeniyseniz, sizin için basit bir çözüm, her şeyi sıralamak için bir tablo kullanmaktır.

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

43

Hızlı ve basit çözüm. Öğle yemeği molası için dini CSS tartışmalarını bırakın ve işi bitirin.

— Emmanuel Bourg

3

@ClarkeyBoy - işi yaptığı sürece kimin umurunda.

— SolidSnake

1

@ClarkeyBoy - en cahil yorum? lol .. Seninle burada tartışmak istemiyorum .. Eğer divs yolu ile yapmak istiyorsan bunu yap. eğer istersen tablolar sana kalmış. ancak tüm müşterilerin veya insanların bunu önemseyeceğini varsaymayın. çoğu işi

— bitirmeyi önemsiyor

2

@ClarkeyBoy - Bu yanıtı ve W3C'deki gönderiyi okuyun: stackoverflow.com/a/4707368/40411

— J.Polfer

6

@EmmanuelBourg: CSS tablolarının anlamı tam olarak bu değil mi? Ekran okuyucuların kafasını karıştırmadan tablo benzeri bir düzen elde etmek mi? OP'nin istediği düzeni CSS tabloları kullanarak elde etmek aslında oldukça kolaydır (aşağıya bakın )

— Clément

17

Etiketlerin görünümünü satır içi blok olarak değiştirmeyi ve bir genişlik ayarlamayı çok daha kolay buluyorum

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

— Byron
kaynak

9

Bir masa kullanmalısın. Mantıksal yapı gereği veriler tablo şeklindedir: bu nedenle, etiketlerin yalnızca giriş kutuları ile değil, aynı zamanda birbirleriyle de iki boyutlu bir yapıyla ilişkili olduğunu göstermek istersiniz.

[Giriş kutuları yerine gösterilecek dize veya sayısal değerleriniz olsaydı ne yapacağınızı düşünün.]

— Collin Caddesi
kaynak

2

Yaklaşımınızı takdir ediyorum.

— Jono

2

Bunun için doğru bir HTML semantik tutmayı ve olabildiğince basit bir CSS kullanmayı tercih ediyorum.

Bunun gibi bir şey işi yapar:

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

Bununla birlikte bir dezavantaj: Her form için doğru etiket genişliğini seçmeniz gerekebilir ve etiketleriniz dinamik olabiliyorsa bu kolay değildir (örneğin I18N etiketleri).

— Samuel EUSTACHI
kaynak

1

Tanım listelerini kullanmanın büyük bir hayranıyım.

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

CSS kullanarak biçimlendirmeleri kolaydır ve düzen için tablo kullanmanın damgalanmasından kaçınırlar.

— Andrew
kaynak

Bu, divs ile aynı şekilde kolayca başarılabilir ( ddsadece ~ 40px'lik bir sol kenar boşluğuna sahiptir) ve herhangi bir anlamsal karışıklığı önler. Üstelik bunların hiçbiri etiketleri / girdileri aynı satırda sıralamaz.

— Hollister

1

css kullanarak

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

bu size şöyle bir şey verir:

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

— Gjaa
kaynak

Daha clearaz genişlikler için formların yığılmasını önlemek için de kullanmalısınız

— TheMaster

0

Geleneksel yöntem bir masa kullanmaktır.

Misal:

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

Bununla birlikte, çoğu, tabloların kısıtlayıcı olduğunu ve CSS'yi tercih ettiğini iddia eder. CSS kullanmanın yararı, çeşitli öğeleri kullanabilmenizdir. Div'lerden, sıralı ve sırasız listeden aynı düzeni elde edebilirsiniz.

Sonunda, en rahat olduğunuz şeyi kullanmak isteyeceksiniz.

İpucu: Tabloları kullanmaya başlamak kolaydır.

— OV Web Çözümleri
kaynak

1

Başlamanın kolay olduğunu belirten +1 ... ama gerçekten geliştiriciler veri için yalnızca tablolara başvurmalı (tam rant için başka bir cevap hakkındaki

— yorumuma bakın

1

CSS tablolarını kullanmak da aynı derecede kolaydır ve ilişkili erişilebilirlik sorunlarına sahip değildir. Bkz cevabımı altında.

— Clément

0

En temel bilgiler için bunları tabloda hizalamayı deneyebilirsiniz. Ancak tablo içerik için tasarlandığından, tablo düzeni için kötüdür.

Kullanabileceğiniz şey, CSS kayma teknikleridir.

CSS Kodu

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

Yazdığım ayrıntılı bir makale IE7 float problemi sorusuna cevap olarak bulunabilir: IE7 float right problemleri

— Mauris
kaynak

örnekler için teşekkürler, ancak HTML formu hala sorunu çözmüyor. Örneğin,

— birindeki

Bununla tasarımcılardan çalıştım ve biraz kırılgan, IME. Bu temel düzen için, zamanın% 98'inde iyi olacaktır. Çok karmaşık olmaya çalışın, örneğin iki sütunlu düzen veya çok satırlı etiketler ve işler zorlaşır.

— staticsan

1

@staticsan - floats, clears ve divs'i anlarsanız, bu tür bir düzen ile iyi çalışırsınız ve aslında modern tarayıcılardaki tablolara kıyasla daha hızlı ve daha esnektirler.

— mauris

Eh, düşünce ben yüzer berraklaşır ve div'leri anlaşılan, ama ben o bozmadan verildi formu uzatmak olamazdı. Anlayışımdaki bir kusur ya da tasarımcının uygulaması, gerçek şu ki kırılgan kaldı. (İlginç bir şekilde, bir sonraki sürüm daha çok uletiket kullanan bir hibrit tasarım olacak .)

— staticsan

0

Bunun zaten yanıtlandığını biliyorum, ancak bunları güzelce hizalamanın yeni bir yolunu buldum - ekstra bir avantajla - bkz. Http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/

Temel olarak, etiket öğesini girişin etrafında kullanırsınız ve bunu kullanarak hizalayabilirsiniz:

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

ve sonra css ile basitçe hizalayın:

label {
    display:block;
    position:relative;
}

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

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

satır sonları için ortalıkta dağınık bir yere ihtiyacınız yok - yani dinamik olarak çok sütunlu bir düzeni hızlı bir şekilde gerçekleştirebilirsiniz
tüm satır tıklanabilir. Özellikle onay kutuları için bu çok büyük bir yardımcıdır.
Form satırlarını dinamik olarak göstermek / gizlemek kolaydır (sadece girdiyi arayın ve üstünü -> etiketi gizleyin)
Tüm etikete sınıflar atayarak hata girişini daha net gösterebilirsiniz (yalnızca giriş alanı çevresinde değil)

— Niko
kaynak

Güzel, ancak sabit etiket genişliğine ihtiyaç var. Büyük etiketin metni, girişi geçersiz kılar.

— mauretto

0

Clément'in cevabı açık ara en iyisidir. Sol orta-sağ hizalı düğmeler dahil olmak üzere farklı olası hizalamaları gösteren biraz iyileştirilmiş bir cevap:

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>

Snippet'i genişlet

padding-right:8pxÖrneği biraz daha az korkunç görünmesi için tüm etiketlerin ( ) sağına bir miktar dolgu ekledim , ancak gerçek bir projede bu daha dikkatli yapılmalıdır (diğer tüm öğelere dolgu eklemek de iyi bir fikir olabilir).

— Cyberknight
kaynak

-1

css Bu sorunu çözüyordum, Gjaa'ya benzer, ancak daha iyi biçimli

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

İşte benim HTML'im, özellikle php kodu içermeyen basit bir kayıt formu için kullanılıyor

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

Çok basit ve daha yeni başlıyorum ama oldukça iyi çalıştı

— PA_Commons
kaynak

-1

Sırasız listelerin içine girdi etiketleri ekleyin. Stil türünü yok yapın. İşte bir örnek.

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

Benim için çalıştı!

— Vivek Iyer
kaynak

Bu asla işe yaramaz. ULiçeriğin girintisini kenar boşluğundan uzaklaştırır, hiçbir şeyi hizalamaz. Koymak inputiçinde s LIonları (evet, aynı hizada olacak değil etiketlerin karşı, liste halinde,) önce sadece bir mermi eklersiniz. Ayrıca, "Giriş2" önceki inputöğeye yapışır , çünkü LIbunlar kapalı değildir (hayır yoktur </li>) ve <li>bu "etiket" için bir başlangıç yoktur , bu nedenle olması gerektiği gibi ele alınacaktır, bu nedenle ortak metin önceki öğe. Son olarak, kodda bir hata var, kapanış <ul/>olmalı </ul>.

— Cyberknight

-2

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

CSS'de hem etiketi hem de girişi görüntü olarak belirtmeniz gerekir: satır içi blok ve gereksinimlerinize göre genişlik verin. Umarım bu sana yardımcı olur. :)

— kta
kaynak

-4

Basitçe ekleyin

<form align="center ></from>

Açılış etiketine hizalayın.

— Zak Gill
kaynak

Bu form, alignözniteliğe sahip olmadığı gibi çalışmaz (ve olsaydı bile, stil / CSS kullanımına yönelik kullanımdan kaldırılırdı). Ayrıca kapanış etiketi yanlış olmalı, yanlış olmalı </form>. Tanımlamak mümkündür style="text-align:center"içeride formmerkezinde formun tüm içeriği aynı hizaya ne, ama bu orijinal soru hakkında olduğunu değil. Bu asla etiketleri giriş alanlarına göre hizalamaz (evet, emin olmak için Firefox 75'te test ettim).

— Cyberknight