トップページ > 初心者向けホームページ作成講座 > 入力フォームを作成する
入力フォームを作成する
入力フォームやチェックボックス、ラジオボタン等を
作る方法を説明します。
書式
入力欄やチェックボックス等を設置するには、ベースとなる
<FORM>〜</FORM>タグを記述し、その間に<INPUT>や<OPTION>タグを記述します。
通常、以下のオプションを組み合わせて使用します。
action="" リンク先ページや処理を行うプログラム(CGIやPHPなど)のURLを記述します。
html等のファイルが指定されている場合、そのページに移動します。
method="" データの送信方法を記述します。
送信方法には以下のようなものがあります。
GET：処理するサーバーのアドレスに情報を付加して送信します。
主に検索に使われますが、送信するデータ量に制限があります。
POST：掲示板の書き込みやメールの送信などに用います。
送信するデータ量の制限はありません。
書式(一行入力欄)
書式(パスワード入力欄)
フォーム用の各種部品を作成するには<input>を使用します。
<input>の type="" を変更することで様々な部品を作成できます。
一行入力欄の場合 type="" にtextと記述し、name=""には半角英数字の変数名を指定します。
type="" にpasswordと記述すると、入力した文字が「*(アスタリスク)」となります。
■値
type：入力形式などを指定します。
name：変数名を指定します。主にプログラムにデータ送信するときに利用されます。
value：フォーム内の内容を記述します。valueがない場合は空欄となります。
size：入力欄の幅を記述します。
maxlength：入力できる文字数を指定します。
書式
複数行の入力欄を作成するには<TEXTAREA>〜</TEXTAREA>を使います。
オプションを使うことによって入力欄の大きさや改行方法を指定できます。
rows="" 入力欄の行数を指定します。
cols="" 入力欄の桁数を指定します。
wrap="" 改行方法を指定します。hard、soft、offがあります。省略した場合は自動的にsoft指定されます。
value="" 文章を指定すると、フォーム内に入力された状態になります。
書式(チェックボックス)
書式(ラジオボタン)
あらかじめ決められた項目を選択するための選択ボタンを作成します。
作成には<input>を使用しtype=""に「checkbox」または「radio」を指定します。
「checkbox」選択肢から複数の項目を選択できます。 (例：項目1、項目2、項目3がある場合複数選択可能)
「radio」選択肢から１つだけの項目を選択できます。 (例：項目1、項目2、項目3がある場合１つだけ選択可能)
また「checked="checked"」と記述すると、あらかじめその項目が選択されます。
その他オプション
name="" 変数名を指定します。主にプログラムにデータ送信するときに利用されます。
value="" 送信する文字や値などを指定します。
書式
プルダウンメニューとはクリックすると項目が表示されるメニューです。
プルダウンメニュー作成には<SELECT>〜</SELECT>と
<OPTION>〜</OPTION>を使用します。
<SELECT>〜</SELECT>内に<OPTION>項目</OPTION>を記述します。
その他オプション
name="" 変数名を指定します。主にプログラムにデータ送信するときに利用されます。
value="" 送信する文字や値などを指定します。
書式(送信ボタン)
書式(リセットボタン)
送信ボタンはデータをプログラム等に送信し、リセットボタンは項目を初期化します。
作成には<input>タグを使用し、type="" に「submit」または「reset」を指定します。
valueには、ボタンに表示する文字を指定します。
作る方法を説明します。
spacer
入力フォームの作成
書式
<FORM action="リンク先ページや処理を行うプログラムのURL等" method="データの送信方法">
INPUT等のフォーム部品のタグ
</FORM>
入力欄やチェックボックス等を設置するには、ベースとなる<FORM>〜</FORM>タグを記述し、その間に<INPUT>や<OPTION>タグを記述します。
通常、以下のオプションを組み合わせて使用します。
action="" リンク先ページや処理を行うプログラム(CGIやPHPなど)のURLを記述します。
html等のファイルが指定されている場合、そのページに移動します。
method="" データの送信方法を記述します。
送信方法には以下のようなものがあります。
GET：処理するサーバーのアドレスに情報を付加して送信します。
主に検索に使われますが、送信するデータ量に制限があります。
POST：掲示板の書き込みやメールの送信などに用います。
送信するデータ量の制限はありません。
記述例
<HTML>
<HEAD>
<TITLE>FORMの記述</TITLE>
</HEAD>
<BODY>
<FORM action="abcdef.cgi" method="post">
■入力欄<br>
<input type="text" name="data"><br><br>
■複数の入力欄<br>
<textarea name="message" cols="30" rows="4"></textarea><br><br>
■チェックボックス<br>
<input type="checkbox" name="os" value="Windows">Windows
<input type="checkbox" name="os" value="Macintosh">Macintosh
<input type="checkbox" name="os" value="Linux">Linux<br><br>
■パスワード入力欄<br>
<input type="password" name="pass"><br><br>
■リセットボタン・送信ボタン<br>
<input type="reset" value="リセット"><br>
<input type="submit" value="送信">
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>FORMの記述</TITLE>
</HEAD>
<BODY>
<FORM action="abcdef.cgi" method="post">
■入力欄<br>
<input type="text" name="data"><br><br>
■複数の入力欄<br>
<textarea name="message" cols="30" rows="4"></textarea><br><br>
■チェックボックス<br>
<input type="checkbox" name="os" value="Windows">Windows
<input type="checkbox" name="os" value="Macintosh">Macintosh
<input type="checkbox" name="os" value="Linux">Linux<br><br>
■パスワード入力欄<br>
<input type="password" name="pass"><br><br>
■リセットボタン・送信ボタン<br>
<input type="reset" value="リセット"><br>
<input type="submit" value="送信">
</FORM>
</BODY>
</HTML>
ブラウザでプレビュー(ダミーのため、押しても動作しません)
※実際に入力内容を送信して処理するにはCGI等のプログラムが必要です。
spacer
一行入力欄（文字入力フォーム）を作成
書式(一行入力欄)
<INPUT type="text" name="変数名">
書式(パスワード入力欄)
<INPUT type="password" name="変数名">
フォーム用の各種部品を作成するには<input>を使用します。<input>の type="" を変更することで様々な部品を作成できます。
一行入力欄の場合 type="" にtextと記述し、name=""には半角英数字の変数名を指定します。
type="" にpasswordと記述すると、入力した文字が「*(アスタリスク)」となります。
■値
type：入力形式などを指定します。
name：変数名を指定します。主にプログラムにデータ送信するときに利用されます。
value：フォーム内の内容を記述します。valueがない場合は空欄となります。
size：入力欄の幅を記述します。
maxlength：入力できる文字数を指定します。
記述例
<HTML>
<HEAD>
<TITLE>一行入力欄を作成</TITLE>
</HEAD>
<BODY>
<FORM>
名前<INPUT type="text" name="word"><br>
住所<INPUT type="text" name="word" value="入力欄" size="30"><br>
パスワード<INPUT type="password" name="pass">
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>一行入力欄を作成</TITLE>
</HEAD>
<BODY>
<FORM>
名前<INPUT type="text" name="word"><br>
住所<INPUT type="text" name="word" value="入力欄" size="30"><br>
パスワード<INPUT type="password" name="pass">
</FORM>
</BODY>
</HTML>
ブラウザでプレビュー
spacer
複数行の入力欄を作成
書式
<TEXTAREA></TEXTAREA>
複数行の入力欄を作成するには<TEXTAREA>〜</TEXTAREA>を使います。オプションを使うことによって入力欄の大きさや改行方法を指定できます。
rows="" 入力欄の行数を指定します。
cols="" 入力欄の桁数を指定します。
wrap="" 改行方法を指定します。hard、soft、offがあります。省略した場合は自動的にsoft指定されます。
hard：入力欄の折り返しで改行が行われ、送信時にも改行されて送信されます。
soft：入力欄の折り返しで改行が行われますが、送信時は改行なしの１文で送信されます。
（自分で改行した場合を除く）
off：入力欄折り返しでの改行は行われません。（スクロールバーが表示）
value="" 文章を指定すると、フォーム内に入力された状態になります。
記述例
<HTML>
<HEAD>
<TITLE>複数行の入力欄を作成する</TITLE>
</HEAD>
<BODY>
<FORM>
メッセージを入力してください。<br>
<TEXTAREA name="word" rows="4" cols="40">
</TEXTAREA><br><br>
あらかじめ文字が入力された状態にできます。<br>
<TEXTAREA name="word" rows="3" cols="30" wrap="off">
あいうえお
</TEXTAREA>
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>複数行の入力欄を作成する</TITLE>
</HEAD>
<BODY>
<FORM>
メッセージを入力してください。<br>
<TEXTAREA name="word" rows="4" cols="40">
</TEXTAREA><br><br>
あらかじめ文字が入力された状態にできます。<br>
<TEXTAREA name="word" rows="3" cols="30" wrap="off">
あいうえお
</TEXTAREA>
</FORM>
</BODY>
</HTML>
ブラウザでプレビュー
spacer
選択ボタンを作成
書式(チェックボックス)
<INPUT type="checkbox" checked="チェック済みかそうでないか">
書式(ラジオボタン)
<INPUT type="radio" checked="チェック済みかそうでないか">
あらかじめ決められた項目を選択するための選択ボタンを作成します。作成には<input>を使用しtype=""に「checkbox」または「radio」を指定します。
「checkbox」選択肢から複数の項目を選択できます。 (例：項目1、項目2、項目3がある場合複数選択可能)
「radio」選択肢から１つだけの項目を選択できます。 (例：項目1、項目2、項目3がある場合１つだけ選択可能)
また「checked="checked"」と記述すると、あらかじめその項目が選択されます。
その他オプション
name="" 変数名を指定します。主にプログラムにデータ送信するときに利用されます。
value="" 送信する文字や値などを指定します。
記述例
<HTML>
<HEAD>
<TITLE>選択ボタンを作成</TITLE>
</HEAD>
<BODY>
<FORM>
使用しているOSを選択してください。<BR>
<INPUT type="radio" name="os" value="Windows" checked="checked">
windows<BR>
<INPUT type="radio" name="os" value="macintosh">macintosh<BR>
<INPUT type="radio" name="os" value="Linux">Linux<BR><BR>
使用しているソフトを選択してください。<br>
<INPUT type="checkbox" name="soft" value="Photoshop">Photoshop<BR>
<INPUT type="checkbox" name="soft" value="Word">Word<BR>
<INPUT type="checkbox" name="soft" value="Excel">Excel<BR>
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>選択ボタンを作成</TITLE>
</HEAD>
<BODY>
<FORM>
使用しているOSを選択してください。<BR>
<INPUT type="radio" name="os" value="Windows" checked="checked">
windows<BR>
<INPUT type="radio" name="os" value="macintosh">macintosh<BR>
<INPUT type="radio" name="os" value="Linux">Linux<BR><BR>
使用しているソフトを選択してください。<br>
<INPUT type="checkbox" name="soft" value="Photoshop">Photoshop<BR>
<INPUT type="checkbox" name="soft" value="Word">Word<BR>
<INPUT type="checkbox" name="soft" value="Excel">Excel<BR>
</FORM>
</BODY>
</HTML>
ブラウザでプレビュー
spacer
プルダウンメニューを作成
書式
<SELECT>
<OPTION>項目</OPTION>
</SELECT>
プルダウンメニューとはクリックすると項目が表示されるメニューです。
プルダウンメニュー作成には<SELECT>〜</SELECT>と
<OPTION>〜</OPTION>を使用します。<SELECT>〜</SELECT>内に<OPTION>項目</OPTION>を記述します。
その他オプション
name="" 変数名を指定します。主にプログラムにデータ送信するときに利用されます。
value="" 送信する文字や値などを指定します。
記述例
<HTML>
<HEAD>
<TITLE>プルダウンメニューを作成</TITLE>
</HEAD>
<BODY>
<FORM>
使用しているOSを選択してください。<br>
<SELECT name="os">
<OPTION value="Windows">Windows</OPTION>
<OPTION value="Macintosh">Macintosh</OPTION>
<OPTION value="Linux">Linux</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>プルダウンメニューを作成</TITLE>
</HEAD>
<BODY>
<FORM>
使用しているOSを選択してください。<br>
<SELECT name="os">
<OPTION value="Windows">Windows</OPTION>
<OPTION value="Macintosh">Macintosh</OPTION>
<OPTION value="Linux">Linux</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
ブラウザでプレビュー
spacer
送信・リセットボタンを作成
書式(送信ボタン)
<INPUT type="submit" value="ボタンに表示する文字">
書式(リセットボタン)
<INPUT type="reset" value="ボタンに表示する文字">
送信ボタンはデータをプログラム等に送信し、リセットボタンは項目を初期化します。作成には<input>タグを使用し、type="" に「submit」または「reset」を指定します。
valueには、ボタンに表示する文字を指定します。
記述例
<HTML>
<HEAD>
<TITLE>送信・リセットボタンを作成</TITLE>
</HEAD>
<BODY>
<FORM>
交通手段を選択してください。<br>
<INPUT type="radio" name="ko" value="徒歩">徒歩<br>
<INPUT type="radio" name="ko" value="電車" checked="checked">電車<br>
<INPUT type="radio" name="ko" value="バス">バス<br><br>
年齢を入力してください。<br>
<INPUT type="text" name="age" size="4"><br><br>
<INPUT type="submit" value="送信">
<INPUT type="reset" value="リセット">
</FORM>
</BODY>
</HTML>
<HEAD>
<TITLE>送信・リセットボタンを作成</TITLE>
</HEAD>
<BODY>
<FORM>
交通手段を選択してください。<br>
<INPUT type="radio" name="ko" value="徒歩">徒歩<br>
<INPUT type="radio" name="ko" value="電車" checked="checked">電車<br>
<INPUT type="radio" name="ko" value="バス">バス<br><br>
年齢を入力してください。<br>
<INPUT type="text" name="age" size="4"><br><br>
<INPUT type="submit" value="送信">
<INPUT type="reset" value="リセット">
</FORM>
</BODY>
</HTML>
ブラウザでプレビュー
前の講座：フレームページを作成 | 次の講座：ホームページのスペースを借りる/FTPの使用方法 | トップページ | ページの一番上へ▲