| フォームオブジェクト <INPUT> |
HOME > HTML > フォームオブジェクト <INPUT>
<body>から</body>の間に記入
タグ 属性 サポート <INPUT>
type="*"
name="コメント"
value="*"
size="n"
maxlength="n"e2〜N2〜H2〜
e2〜N2〜H2〜
e2〜N2〜H2〜
e2〜N2〜H2〜
e2〜N2〜H2〜
e2〜N2〜H2〜
| ■ フォームオブジェクトとは |
フォームオブジェクトとは、基本的にフォーム<FORM>から</FORM>の間に使います。入力を求めた内容をフォームで送信します。この場合大事なのがそれぞれの「name（名前）」です。この名前は、○○の場合は？と言う質問に対して□□と言う答えを求めます。その時の質問が何かわかるような名前が良いでしょう。
フォームオブジェクトは<input>以外に、<textarea>や<select>があります。
これから紹介する、フォームオブジェクトには、<FORM>から</FORM>の間以外に使っている人もいますね。たとえば更新記録やきり番表示。この場合、データをフォームで送信するものではないので、個別にフォームオブジェクトを使います。しかしNetscape Navigatorでは<form>〜<form>で囲まないと表示されないので注意しましょう。
■ <input type="*">について
<input>タグのtypeは、入力欄や選択肢を指定する属性があります。ここから説明するのは全てtypeの属性を使っています。
| ■ 1行テキストボックス |
■ ソース
<form>
<input type="text" name="A" value="B" size="C" maxlength="D">
</form>
input type="text"
これは入力欄を定義する属性で、いくつかの形式を指定することができます。その形式を指定するのがtypeで、type="text"とすると1行分の記入欄ができます。
name="A"
これは1行テキストボックスの名前をつけます。これはフォームとしたデータを受け取った場合、1行テキストボックスが何の入力を求めていたか見分けるために使います。
例）name="あなたの名前" とすると、データを受け取った場合「あなたの名前=山田）などとわかります。
value="B"
これは、デフォルトで表示させる文字を記入します。これははじめから表示されている文字のことです。
サンプル size="C"
これは1行テキストボックスの長さです。（半角の数値を記入）
maxlength="D"
ここには入力できる最大文字数を指定します。（半角の数値を記入）
| ■ チェックボタン |
セレクトボタンの設定(1)
複数選択できるチェックボタンです。
サンプル ■ ソース（このソースはチェックボックス一つずつに必要です。）
複数記入
<form>
<input type="checkbox" name="A" value="B" checked>
<input type="checkbox" name="A" value="C" checked>
<input type="checkbox" name="A" value="D" checked>
</form>input type="checkbox"
typeの属性を"checkbox"とすると、チェックボックスが一つ作成されます。選択欄は複数必要なので、必要なだけのチェックボタンを作成しましょう。
name="A"
ここは「問題」になるので全て同じ名前にしましょう。（英数半角）
value="B" value="C" value="D"
ここはそれぞれの解答になるので、それぞれ違ったことを記入しましょう（英数半角）
| ■ ラジオボタン |
セレクトボタンの設定(2)
ラジオボタンは選択欄かいくつもある中で、その中の一つを選択するボタンになります。
サンプル ソース（このソースはラジオボタン一つずつに必要です。）
複数記入
<form>
<input type="radio" name="A" value="B" checked>
<input type="radio" name="A" value="C" checked>
<input type="radio" name="A" value="D" checked>
</form>
input type="radio"
typeの属性を"radio"とすると、チェックボックスが一つ作成されます。選択欄は複数必要なので、必要なだけのチェックボタンを作成しましょう。
name="A"
ここは「問題」になるので全て同じ名前にしましょう。（英数半角）
value="B" value="C" value="D"
ここはそれぞれの解答になるので、それぞれ違ったことを記入しましょう（英数半角）
| ■ 送信ボタン |
送信ボタンの設定
フォームに入力された内容を送信するボタンです。
サンプル（動作はしません） ■ ソース
<form>
<input type="submit"value="ボタン名">
</form>input typeの属性値を、"submit"にします。value="ボタン名"でボタン名を指定できます。
| ■ リセットボタン |
リセットボタンの設定
入力欄に書き込んだ文字や、チェックボックスにを選択したものをリセットするボタンです。
■ ソース
</form>
<input type="reset"value="ボタン名">
</form>
input typeを"reset"にすると、「reset」と言う名前がついたボタンが作成されます。そこに、value="ボタン名"を追加することによってボタン名を変更できるようになります。
このリセットボタンは、一つのフォーム「<form>〜</form>」の選択欄や入力欄をリセットすることができます。
| ■ ファイル選択ボタン |
ファイルを選択できるボタンです。
■ ソース
<form>
<input type="file" name="A" value="ボタン名">
</form>input typeを"file"にすると、「参照」と言う名前がついたボタンと、パスの記入欄（1行テキストボックス）が作成されます。そこに、value="ボタン名"を追加することによってボタン名を変更できるようになります。
name="A"は、入力欄の名前を記入します。
[HOME]