超初心者でも簡単！あなたもできるHP作成！− Make easily  
||　トップページ　||　HTML　||　Style Sheet　||　リファレンス　||　Web素材　||　Contact Us　||　サイトマップ　||　初めての方　||　
reference
リファレンスの見方 スタイルシートの書き方 ヘッダ情報 ページ全体 見出し 文字（テキスト） リスト テーブル 画像・イメージ リンク レイアウト フォーム フレーム リファレンス一覧


テキスト テキストボックス ラジオボタン
チェックボックス セレクト（選択） ボタン
デフォルト値を設定する フォーム部品の色を変える ボタンのサイズを変える
フォームの上下の隙間を無くす    

フォーム

このリファレンスの見方については「リファレンスの見方」をお読みください。
フォームとは、フォームメールの送信やアンケートの送信で、名前を入力するボックスを作ったり、性別にチェックをつけたり、コメントの入力ボックスを作るができます。
実際にメールの送信やアンケートを送信するには「CGI」というプログラムが必要です。

フォームを作成するには、<form> を用います。<form>〜</form> の間に、 <input type="text"> などのフォームの部品を配置します。

お名前：
　　　　　　　男性 女性
MAIL： 　

テキスト（部品）

名前：
【HTMLタグ】

名前：<input type="text" name="NAME">

テキストは一行のみのテキストボックスで、主に名前の入力などに使われます。
複数行を入力したい場合は、次のテキストボックスを使います。

「input type="text"」　で、テキストの部品を作って、「name="..."」で、この部品に名前をつけます。
このように必ず部品には名前をつけます。
部品につけた名前は、フォームメールなどのCGIで使います。

▲このページのトップに戻るTop

テキストボックス（部品）

【HTMLタグ】

<textarea name="COM" cols=30 rows=3>
複数行のテキストを
入力できます。
</textarea>

「textarea」を使うと、複数行の文章が入力できるので、感想などを入力する部分に使われます。
テキストの入力部分の大きさを変更するには、「cols」は横の文字数、「rows」は縦の行数なので、それぞれの数字を変更します。
▲このページのトップに戻るTop

ラジオボタン（部品）

男性 女性
【HTMLタグ】

<input type="radio" name="SEX" checked>男性
<input type="radio" name="SEX">女性

性別などで選択ボタンを作るときの部品です。
ボタンの中のどれかひとつだけが選択可能となります。
ラジオボタングループの「name="..."」には同じ名前をつけます。
▲このページのトップに戻るTop

チェックボックス（部品）

キレイ かわいい 欲しい
【HTMLタグ】

<input type="checkbox" name="KANSO">キレイ
<input type="checkbox" name="KANSO">かわいい
<input type="checkbox" name="KANSO">欲しい

チェックボックスでは、複数の項目を選択可能です。
チェックボックスボタングループの「name="..."」には同じ名前をつけます。
▲このページのトップに戻るTop

セレクト・選択（部品）

【HTMLタグ】

<select name="TODOU">
<option value="HOKAI">北海道
<option value="AOMORI">青森
<option value="AKITA">秋田
</select>

セレクト部品を作る場合は、まず「select name="..."」でセレクトボックス全体の名前をつけて、「option value="..."」で選択したい項目を追加していきます。
「option value="　"」の「value="..."」には、名前が重ならないように名前を付けていきます。
▲このページのトップに戻るTop

ボタン（部品）

【HTMLタグ】

<input type="submit" value="送信">
<input type="reset" value="取消">

ボタンの種類には「type="submit"」「type="reset"」「type="button"」があります。
サブミット（submit）ボタンはフォームで入力したデータを <form> の 「action="..." 」で指定した送信先に送信します。
リセット（reset）ボタンはフォームに入力したデータをクリアして、初期状態に戻します。

ボタン（button）は単体では特に意味の無いボタンを表示します。通常、JavaScript と組み合わせて使います。

<input type="button" onclick="alert('こうやって使うんだよ!')" value="クリックしてみて!">
上の例では改行されて表示していますが、実際には 改行せずに一行で書いてください。
▲このページのトップに戻るTop

デフォルト値を設定する

テキストなどのフォーム部品にデフォルト値（初期値）を設定するには、「value」を使います。
「type="text"」「type="hidden"」 に対して有効です。
<input type="text" name="URL" value="http://">
テキストエリア部品のデフォルト値を設定するには、<textarea> と </textarea> の間にデフォルト値を書き込みます。
<textarea name="COM" cols=30 rows=3>
あいうえお
</textarea>
チェックボックスやラジオボタンのデフォルト値を設定するには、「checkd」をつけます。
男 女 　　　明治 大正 昭和 平成
<input type="checkbox" name="SEX">男
<input type="checkbox" name="SEX" checked>女

<input type="radio" name="NENGO">明治
<input type="radio" name="NENGO">大正
<input type="radio" name="NENGO">昭和
<input type="radio" name="NENGO" checked>平成

セレクト部品のデフォルト値を設定するには、<option> タグに「selected」をつけます。
<select name="TODOU">
<option value="HOKAI">北海道
<option value="AOMORI">青森
<option value="AKITA" selected>秋田
</select>
▲このページのトップに戻るTop

フォーム部品の色を変える

スタイルシートを使うと、フォーム部品の色などを変更することができます。
下の例は、ボックスの色と入力したテキストの色を変更しています。
【HTMLタグ】

<input type="text" style="color:#800000; background-color:#CCCC66">

▲このページのトップに戻るTop

ボタンのサイズを変える

ボタンのサイズを変更するには、スタイルシートを用います。
<button style="width:200px">大きいボタン</button>
▲このページのトップに戻るTop

フォームの上下の隙間を無くす

フォームを使うと自動的に改行が入るので、フォームの上下に余分な隙間が開いてしまいます。
この隙間を無くすには、 スタイルシートでマージンを「0」に指定します。
<form style="margin-top:0em; margin-bottom:0em">
:
</form>
▲このページのトップに戻るTop