web-dev-qa-db-ja.com

HTMLで入力フォームを揃える方法

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

これに関する問題は、 'Email'の後のフィールドボックスが、姓名と比べてスペースの点で劇的に異なるということです。彼らが本質的に「整列」するためにそれを作るための「正しい」方法は何ですか？

私は良い形式と構文を練習しようとしています...多くの人がCSSでこれをするかもしれません私は確信が持てません、私はこれまでHTMLの非常に基本を学んだだけでした。

htmlformsalignment
104
yoshyosh

別の例として、これは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>
55
serialk

一般に認められている答え（ピクセル単位で明示的な幅を設定する）は変更を加えるのを難しくし、ユーザーが異なるフォントサイズを使用すると中断します。一方、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>

その場合は、labelsにwhite-space: nowrapを追加します。

115
Clément

あなたが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>
26
amonett

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

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

あなたはテーブルを使うべきです。 論理構造問題として、データは表形式です。ラベルがそれらの入力ボックスだけではなく互いに関連していることを示したいので、これを整列させたいのです。二次元構造です。

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

6
Collin Street

このために、私は正しいHTMLのセマンティクスを保ち、できるだけシンプルなCSSを使うことを好みます。

このような何かが仕事をするでしょう：

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

ただし、欠点の1つは、フォームごとに正しいラベル幅を選択する必要があることです。ラベルが動的になる可能性がある場合（たとえば国際化ラベル）、これは簡単ではありません。

3
Samuel EUSTACHI

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

私はこれがすでに答えられていることを知っています、しかし私はそれらをうまく整列させるための新しい方法を見つけました - さらなる利益で - http://www.gargan.org/en/Web_Development/Form_Layout_with_CSS/ を見てください

基本的には、入力の周囲にlabel要素を使い、それを使って整列します。

<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を配置する必要はありません。つまり、動的に複数列のレイアウトを動的に完成できます。
  • 行全体がクリック可能です。特にチェックボックスの場合、これは非常に役立ちます。
  • フォーム行を動的に表示/非表示にするのは簡単です（入力を検索してその親を非表示にする - >ラベル）
  • ラベル全体にクラスを割り当てることで、エラー入力をより明確に表示できます（入力フィールド周辺だけではありません）。
1
Niko

私は定義リストを使うのが大好きです。

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

CSSを使用してスタイルを設定するのは簡単で、レイアウトにテーブルを使用するという不名誉を避けます。

1
Andrew

基本的には、テーブル内でそれらを揃えてみることができます。ただし、tableはコンテンツ用であるため、tableの使用はレイアウトには適していません。

あなたが使うことができるのは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フロート正しい問題

1
mauris

番号なしリストの中に入力タグを挿入します。スタイルタイプをnoneにします。これが一例です。

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

私のために働いた！

0
Vivek Iyer

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>

それは非常に単純です、そして私は始まったばかりです、しかしそれは非常にうまくいきました

0
PA_Commons

伝統的な方法はテーブルを使うことです。

例：

<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、順序付きリスト、順序なしリストから、同じレイアウトを実現できます。

最後に、あなたが最も快適なものを使いたいでしょう。

ヒント：テーブルを使い始めるのは簡単です。

0
OV Web Solutions