私は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の非常に基本を学んだだけでした。
別の例として、これは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>
一般に認められている答え(ピクセル単位で明示的な幅を設定する)は変更を加えるのを難しくし、ユーザーが異なるフォントサイズを使用すると中断します。一方、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
を追加します。
あなたが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>
ラベルの表示をインラインブロックに変更して幅を設定する方がはるかに簡単です。
label {
display: inline-block;
width:100px;
text-align: right;
}
あなたはテーブルを使うべきです。 論理構造問題として、データは表形式です。ラベルがそれらの入力ボックスだけではなく互いに関連していることを示したいので、これを整列させたいのです。二次元構造です。
[入力ボックスの代わりに文字列または数値を表示する場合の対処方法を検討してください。]
このために、私は正しいHTMLのセマンティクスを保ち、できるだけシンプルなCSSを使うことを好みます。
このような何かが仕事をするでしょう:
label{
display: block;
float: left;
width : 120px;
}
ただし、欠点の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 |
私はこれがすでに答えられていることを知っています、しかし私はそれらをうまく整列させるための新しい方法を見つけました - さらなる利益で - 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;
}
私は定義リストを使うのが大好きです。
<dl>
<dt>Username:</dt>
<dd><input type="text" name="username" /></dd>
<dt>Password:</dt>
<dd><input type="password" name="password" /></dd>
</dl>
CSSを使用してスタイルを設定するのは簡単で、レイアウトにテーブルを使用するという不名誉を避けます。
基本的には、テーブル内でそれらを揃えてみることができます。ただし、tableはコンテンツ用であるため、tableの使用はレイアウトには適していません。
あなたが使うことができるのは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 */
<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フロート正しい問題
番号なしリストの中に入力タグを挿入します。スタイルタイプをnoneにします。これが一例です。
<ul>
Input1
<li> <input type="text" />
Input2
<li> <input type="text" />
<ul/>
私のために働いた!
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>
それは非常に単純です、そして私は始まったばかりです、しかしそれは非常にうまくいきました
伝統的な方法はテーブルを使うことです。
例:
<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、順序付きリスト、順序なしリストから、同じレイアウトを実現できます。
最後に、あなたが最も快適なものを使いたいでしょう。
ヒント:テーブルを使い始めるのは簡単です。