このため、多くのタイプセッターは各フォームを個別にタイプセットし始め、それらとその要素に異なるスタイルを与え、それによって自分自身とこれらのレイアウトを収集する人々の作業を複雑にします。
次に、私はそれをどうするかについて話します。 この方法は、一意性も新規性も主張しません。 これにたどり着いた瞬間に（各フォームを個別に作成するのをやめました）、植字の時間はずっと短くなり、共有することにしました。
ほとんどの場合、要素の名前を決定して1つのフォームのみを構成し、
<form>
要素にクラスを直接追加してそれを変更できます。 後で、フォームの要素をテンプレート（選択するテンプレートエンジン）に転送し、ページを収集するコードで、「このような要素のセットでフォームを描画し、クラスなどを追加してください」と言うだけです。 。
すぐに予約します。かなり原始的な例を後で検討します。はい、いくつかのチェックボックスの列などがあるかもしれませんが、これは考慮しませんが、終了することは可能です;）
そのため、少し考えた後、次のHTMLコードのようなものが得られました。
<form class = "form" action= "" >
<fieldset class = "field" >
<label for = "default-text" >Some input[type=text]</label>
<input type= "text" id= "default-text" class = "text" />
</fieldset>
<fieldset class = "field choice" >
<fieldset>
<input type= "radio" id= "default-radio" checked = "checked" />
<label for = "default-radio" >Some input[type=radio]</label>
</fieldset>
<fieldset>
<input type= "checkbox" id= "default-checkbox" checked = "checked" />
<label for = "default-checkbox" >Some input[type=checkbox]</label>
</fieldset>
</fieldset>
<fieldset class = "field" >
<label for = "default-textarea" >Some textarea</label>
<textarea class = "text" rows= "10" cols= "40" id= "default-textarea" ></textarea>
</fieldset>
<fieldset class = "field" >
<label for = "default-select" >Some select </label>
< select id= "default-select" >
<option>variant 1</option>
<option>variant 2</option>
<option>variant 3</option>
</ select >
</fieldset>
<fieldset class = "field submit" >
<input type= "submit" value = "Send" />
<input type= "reset" value = "Clear" />
</fieldset>
</form>
* This source code was highlighted with Source Code Highlighter .
私は少し説明します：
- 私たちの普遍的なフォームには
.form
クラスがあります。なぜかというと、それは普遍的だからです。しかし、私にとってはもっと便利なのです。 - 一部の
<fieldset>
にはクラスがありますが、他にはありません：.field
クラス.field
、要素のグループに共通です。たとえば、異なるスタイルを必要とするチェックボックスの場合、ネストされた<fieldset>
もあります。このタイプの要素は常に使用できるとは限りません。
次に、cssを使用してフォームを少しスタイル付けします。
.form {
margin: 1em 0;
}
.form .field {
margin: 0 0 .8em;
}
.form label {
display: block;
font-weight: 700
}
.form .text {
width: 100%;
padding: 3px 5px;
}
.form textarea {
height: 150px;
}
.form .choice label {
display: inline;
}
.form .submit {
text-align: center;
}
.form .submit input {
padding: 5px 10px;
}
* This source code was highlighted with Source Code Highlighter .
そして何が起こったのか見てみましょう
これは私たちのメインフォームであり、たとえば記事の作成/編集に使用できます。
たとえば、承認フォームには固定幅のフォームが必要です。
クラスをcssに追加します。
.form-w-300 {
width: 300px;
margin: 1em auto;
}
* This source code was highlighted with Source Code Highlighter .
それをフォームに適用します 。
グリッド形式のフォーム（ラベルと要素が同じ行にある）が必要な場合は、cssをもう少し追加します（一度に2つのオプション：左と右のラベル）。
.grid-left-500,
.grid-right-500 {
width: 500px;
margin: 1em auto;
}
.grid-left-500 label,
.grid-right-500 label {
float: left;
width: 180px;
overflow: hidden;
}
.grid-right-500 label {
float: right;
}
.grid-left-500 .text,
.grid-right-500 .text {
float: right;
width: 300px;
}
.grid-right-500 .text {
float: left;
}
.grid-left-500 .choice {
margin-left: 185px;
}
.grid-right-500 .choice {
margin-left: 0;
padding-right: 185px;
}
.grid-left-500 .choice label,
.grid-right-500 .choice label {
float: none;
width: auto;
}
.grid-left-500 .submit {
text-align: left;
padding-left: 185px;
}
.grid-right-500 .submit {
text-align: left;
}
.grid-left-500 select {
margin-left: 5px;
}
.grid-right-500 select {
float: right;
margin-right: 5px;
}
* This source code was highlighted with Source Code Highlighter .
左側の ラベル、右側のラベル
しかし、グリッドの種類には欠点があります。フォームとその要素の固定幅でのみ機能するか、サイズをパーセントで設定した場合にのみ機能しますが、常に機能するとは限りません。
CSS、さらにはクロスブラウザを使用してこれを解決する方法は、まだわかりません。
その結果、1つのフォームテンプレートと4つの（この例では）cssを使用して変更された構造またはサイズのフォームが変更されました。
例の完了後、各フォームを個別に様式化し、他の構造のフォームを作成できますが、これは必要に応じて、ここでは基本的な例のアイデアのみを示します。
誰かが役に立つといいな。