ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >フォーム

フォームを並べる

{float:位置;}でフォームを並べたりフォームの横に文字を回り込ま せることができます。

フォームの中にあるフォームの部品(ボタンやセレクトボックス) だけならインライン要素なのでfloatを使用しなくても横に 並びます。
回り込んだフォームや文字を解除したい場合は {clear:both;}で回り込みを解除できます。

■ フォームの表示位置を指定する

フォームを表示できる位置は以下の通りです。

位置説明
noneフォームの表示位置は指定しません。(デフォルト)
leftフォームが左に表示されその後ろに続く文字やフォームが右に回り込みます。
rightフォームが右に表示されその後ろに続く文字やフォームが左に回り込みます。

【ブラウザ表示】



ここで回り込み解除


フォームが右で文字が左にきています。

ここで回り込み解除


ソース
<form method="POST" class="mawarikomi1" action="xxx.cgi">
<input type="text" name="text1" value="入力欄1">
<br>
<input type="submit" value="送信1">
</form>
<form method="POST" action="xxx.cgi">
<input type="text" name="text2" value="入力欄2">
<br>
<input type="submit" value="送信2">
</form>

<p class="cl1">ここで回り込み解除</p>

<form method="POST" class="mawarikomi2" action="xxx.cgi">
<input type="text" name="text3" value="入力欄3">
<br>
<input type="submit" value="送信3">
</form>
フォームが右で文字が左にきています。

<p class="cl1">ここで回り込み解除</p>

外部ファイル

form.mawarikomi1{float:left;}
form.mawarikomi2{float:right;}
p.cl1{clear:both;}


<body>〜</body>に直接記入する場合
<form method="POST" style="float:left;" action="xxx.cgi">
<input type="text" name="text1" value="入力欄1">
<br>
<input type="submit" value="送信1">
</form>
<form method="POST" action="xxx.cgi">
<input type="text" name="text2" value="入力欄2">
<br>
<input type="submit" value="送信2">
</form>

<p style="clear:both;">ここで回り込み解除</p>

<form method="POST" style="float:right;" action="xxx.cgi">
<input type="text" name="text3" value="入力欄3">
<br>
<input type="submit" value="送信3">
</form>
フォームが右で文字が左にきています。

<p style="clear:both;">ここで回り込み解除</p>

■ その他の項目

ボタンや入力欄のサイズを変える
文字のサイズや色を変える
枠線の太さ、色、種類を指定する
背景色や画像を指定する
外側、部品の余白を指定する
入力欄の入力モードを変更する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.