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 
— ヨシオシ
ソース
whenテーブル（あるとしても）の間の絶え間ない戦いがあります、あなたの質問への答えは例外ではありません、中間の継ぎ目は<tables>が表形式のデータであるということです、さらにここに：stackoverflow.com/questions/83073 /…
— Trufa '30
まったく同じ質問ですが、答えはW3Cの引用で<table>タグを使用することを示唆しています： 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>
スニペットを展開

— 連載
ソース
2
完璧、ちょうど私を混乱させる多くを保存しました。
— null
また、「送信」ボタンをコンテナの幅に拡大しています。
— Saurabh Rana 2013
4
このソリューションは機能していないようです。入力要素は左揃えされません。以下のテーブルソリューションが機能します。
— ジョニーなぜ2014
1
私は（参照あなたがなしで行うことができたときに、明示的な幅の設定の大ファンではない私の答え以下を）
— クレマン
1
これはラジオボタンで奇妙な結果をもたらします。ラジオボタンのラベルは、実際のラジオボタンの後の行に表示されます。
— ワードフォージワイズ
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/

編集：もう1つの簡単なメモ：CSSテーブルでは列を操作することもできます。たとえば、入力フィールドにできるだけ多くのスペースを取りたい場合は、フォームに次の行を追加できます

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

その場合white-space: nowrapはlabels、に追加することができます。

— クレメント
ソース
4
私はこのソリューションが好きです。これは、ページが開発を通じて進化するときに、列が必然的に幅を変更することを心配する必要がないことを意味します。1
— トム卿
9
@MuhammadUmerテーブルはスクリーンリーダーと多くの支援デバイスを混乱させるため、CSSテーブルはプレゼンテーションとコンテンツを分離します。したがって、フォームはスクリーンリーダーやリーディングアシスタントで簡単に解析でき、しかも見栄えよく表示されます。
— クレメント2014年
3
まあ、tdのフィッティングラベルは、それがチャートのような整理された表形式のデータの一部であることを示唆しています。ここではそうではありません。さらに、HTMLテーブルを使用すると、将来的にレイアウトを変更したり、さまざまな画面サイズ（携帯電話やタブレットなど）に合わせたりすることが難しくなります。
— クレメント2014年
4
今日まで、@ MuhammadUmerが作成していたのと同じ引数でCSSテーブル構造に強く抵抗しています。私はそれを試してみることにし、最終的に切り替えの価値を見ました！さらに、その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>
— アモネット
ソース
43
迅速でシンプルなソリューション。昼休みのための宗教的なCSSの議論を離れて、仕事を終わらせてください。
— Emmanuel Bourg
3
@ClarkeyBoy-仕事をしている限り、誰も気にしません。
— SolidSnake 2013
1
@ClarkeyBoy-最も無知なコメント？笑..私はここであなたと議論をしたくありません...あなたがそれをしたいのであれば、divsの方法でそれを行います。あなたがそれをしたい場合は、テーブルをあなた次第です。ただし、すべての顧客または人々がそのことを気にかけるとは限りません。それらのほとんどが仕事を得ることを気...
— ソリッド・スネーク
2
@ClarkeyBoy-この回答とW3Cからの投稿をお読みください： stackoverflow.com/a/4707368/40411
— J. Polfer
6
@EmmanuelBourg：これはまさに、CSSテーブルが意図していることではありませんか？スクリーンリーダーを混乱させることなくテーブルのようなレイアウトを実現しますか？OPが実際にCSSのテーブルを使用して達成することが非常に簡単であるために要求することをレイアウト（参照以下）
— クレマン
17

ラベルの表示をインラインブロックに変更して幅を設定する方がはるかに簡単だと思います

label {
    display: inline-block;
    width:100px;
    text-align: right;
}
— バイロン
ソース
9

テーブルを使用する必要があります。論理構造の問題として、データは表形式です。これは、2次元構造でラベルが入力ボックスだけでなく相互にも関連していることを示すために、データを整列させる理由です。

[入力ボックスの代わりに表示する文字列または数値がある場合はどうするかを検討してください。]

— コリンストリート
ソース
2
私はあなたのアプローチに感謝します。
— Jono
2

このため、私は正しいHTMLセマンティクスを維持し、CSSをできるだけ単純に使用することを好みます。

このような何かが仕事をします： 

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

ただし、欠点の1つは、フォームごとに適切なラベル幅を選択する必要があり、ラベルが動的である場合（たとえば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 2012
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     |
— ジャー
ソース
またclear、幅が
— 狭くなるなど、フォームが積み重なら
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ソリューション
ソース
1
+1は簡単に始められます...しかし、実際には開発者はデータのテーブルのみに頼る必要があります（完全な発言については別の回答に関する私のコメントを参照してください）
— ClarkeyBoy 2010年
1
CSSテーブルの使用も同様に簡単で、関連するアクセシビリティの問題もありません。以下の私の答えを参照してください。
— クレメント2014年
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フロート問題の質問への回答で見つけることができます：IE7フロート右問題

— モーリス
ソース
例に感謝しますが、HTMLフォームはまだ問題を解決しません。たとえば、そのうちの1つで「名」を単に「名前」に変更した場合、私が最初に経験したのと同じ問題が発生します
— yoshyosh
私はこれをデザイナーから手がけましたが、それは少し壊れやすいIMEです。この基本的なレイアウトでは、98％の時間で問題ありません。2列のレイアウトや複数行のラベルなど、複雑になり過ぎると難しくなります。
— staticsan 2010年
1
@staticsan-float、clears、divを理解していれば、そのようなレイアウトでうまく機能し、実際のレンダリングは、最新のブラウザーのテーブルに比べて高速で、柔軟性があります。
— mauris
まあ、私は思った私は山車、クリアとdivを理解し、私は、私はそれを壊すことなく、与えられたフォームを拡張できませんでした。それが私の理解の欠陥であろうと、設計者の実装の欠陥であろうと、事実はそれが脆弱であることに変わりはありませんでした。（興味深いことに、次のバージョンでは、ulタグを使用したハイブリッド設計の詳細が予定されています。）
— staticsan
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

クレメントの答えは断然最高です。少し改善された答えは次のとおりです。左中央、右揃えのボタンなど、さまざまな可能な整列を示します。

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）、例を少し恐ろしく見せないようにしていますが、実際のプロジェクトではより慎重に行う必要があります（他のすべての要素にパディングを追加するのも良い考えです）。

— サイバーナイト
ソース
-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

順序付けられていないリスト内にinputタグを挿入します。style-typeをnoneにします。ここに例があります。

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

私のために働いた！

— ヴィベク・アイエ
ソース
これは機能しません。UL余白から離れてコンテンツをインデントするだけで、何も揃えません。inputsを入れると、LIそれらの前に箇条書きが追加されるだけです（そうです、ラベルに対してではなく、リストとして配置されます）。また、 "Input2"は前のinput要素に固執します。これは、LIが閉じておらず（がないため</li>）、<li>その "label"の開始がないため、通常のテキストとして扱われるため、前の要素。最後に、コードにエラーがあります。終了<ul/>はでなければなりません</ul>。
— Cyber​​knight
-2 
<form>
    <div>
        <label for='username'>UserName</label>
        <input type='text' name='username' id='username' value=''>  
    </div>
</form>

CSSでは、ラベルと入力の両方をdisplay：inline-blockとして宣言し、要件に応じて幅を指定する必要があります。これがお役に立てば幸いです。:)

— kta
ソース
-4

追加するだけ 

<form align="center ></from>

開始タグに配置するだけです。

— ザックギル
ソース
これは、属性formがないので機能しませんalign（そして、それがあったとしても、スタイル/ CSSの使用に向けて非推奨になります）。また、終了タグが間違っています</form>。フォームのコンテンツ全体を中央に配置するものをのstyle="text-align:center"内部で定義することは可能ですが、それはform元の質問の目的ではありません。これは、ラベルを入力フィールドに対して位置合わせすることはありません（確かに、Firefox 75でテストしました）。
— Cyber​​knight
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.