https://hmaster.net/


HTMLタグと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>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

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

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