超初心者でも簡単!あなたもできるHP作成!− Make easily  
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || 

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

フォーム

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

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

お名前:
       男性 女性
MAIL:  

テキスト(部品)

名前:
【HTMLタグ】

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

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

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

テキストボックス(部品)

【HTMLタグ】

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

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

ラジオボタン(部品)

男性 女性
【HTMLタグ】

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

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

チェックボックス(部品)

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

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

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

セレクト・選択(部品)

【HTMLタグ】

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

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

ボタン(部品)

【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="クリックしてみて!">
上の例では改行されて表示していますが、実際には 改行せずに一行で書いてください。

デフォルト値を設定する

テキストなどのフォーム部品にデフォルト値(初期値)を設定するには、「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>

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

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

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

ボタンのサイズを変える

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

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

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