テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
テキスト入力欄を作る
フォーム設定のページ ◇フォームの設定、入力項目と項目名の関連付け、フォームのグループ化
◇テキスト入力、ラジオボタン、チェックボックス、セレクトボックスなど
◇送信ボタン、リセットボタン、画像の送信ボタン、汎用ボタンなど
<input type="text">
　<input>タグに type="text" を指定すると、テキスト入力欄（１行）を作成できます。
　<input type="text" name="name">
　<input type="text" name="name" size="25" maxLength="25" value="サンプル">
type=""text を指定
name=""フィールド名を指定（半角英数字）
size=""入力フィールドの横幅を数値で指定
maxLength=""入力できる最大文字数を指定
value=""入力フィールドに挿入する文字
　■name="" （フィールド名）
　入力項目を判別するための名前です。項目ごとに違う名前を指定します。
　■size="" （入力フィールドの横幅）
　入力欄の横幅を数値で指定します。
　サイズを指定しても、ブラウザによって横幅は違って見えます。同じ幅で表示したい場合は、スタイルシートを使用して下さい。
　■maxLength="" （入力できる最大文字数）
　入力する文字数を制限する場合に指定します。
　例えば maxLength="10" を指定した場合、１１文字以降は入力できません。
　■value="" （入力フィールドに挿入する文字）
　入力欄に文字を入れておく場合に指定します。
　例えば value="http://" を指定した場合、入力欄に http:// を表示します。
入力欄のサイズや背景色などは、スタイルシートで設定できます。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
<form method="POST" action="exp_1.cgi">
標準<br>
<input type="text" name="d_name1">
標準
横幅を 25 に指定<br>
<input type="text" name="d_name2"
size="25">
 横幅を 25 に指定
最大文字数を 10 に指定<br>
<input type="text" name="d_name3"
size="25" maxLength="10">
 最大文字数を 10 に指定
文字を挿入する<br>
<input type="text" name="d_name4"
size="25" value="ご出席："><br>
<input type="submit" value="送信する">
<input type="reset" value="ﾘｾｯﾄする">
</form>		 文字を挿入する

関連するページ
CSS リファレンス フォーム(css)：フォーム リファレンス(css)へ
テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
パスワード入力欄を作る
<input>
　<input>タグに type="password" を指定すると、パスワード形式の入力欄を作成できます。入力した内容は、アスタリスク（ * ）や●などで表示されます。
　<input type="password" name="pass">
　<input type="password" name="pass" size="25" maxLength="25" value="pass">
type=""password を指定
name=""フィールド名を指定（半角英数字）
size=""入力フィールドの横幅を数値で指定
maxLength=""入力できる最大文字数を指定
value=""入力フィールドに挿入する文字
　■name="" （フィールド名）
　入力項目を判別するための名前です。項目ごとに違う名前を指定します。
　■size="" （入力フィールドの横幅）
　入力欄の横幅を数値で指定します。
　サイズを指定しても、ブラウザによって横幅は違って見えます。同じ幅で表示したい場合は、スタイルシートを使用して下さい。
　■maxLength="" （入力できる最大文字数）
　入力する文字数を制限する場合に指定します。
　例えば maxLength="10" を指定した場合、１１文字以降は入力できません。
　■value="" （入力フィールドに挿入する文字）
　入力欄に文字を入れておく場合に指定します。
　入力欄は、指定した文字数をアスタリスク（ * ）や●などで表示します。
入力欄のサイズや背景色などは、スタイルシートで設定できます。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
<form method="POST" action="exp_2.cgi">
標準<br>
<input type="password" name="p_name1">
標準
横幅を 25 に指定<br>
<input type="password" name="p_name2"
size="25">
 横幅を 25 に指定
最大文字数を 10 に指定<br>
<input type="password" name="p_name3"
size="25" maxLength="10">
 最大文字数を 10 に指定
文字を挿入する<br>
<input type="password" name="p_name4"
size="25" value="pass"><br>
<input type="submit" value="送信する">
<input type="reset" value="ﾘｾｯﾄする">
</form>		 文字を挿入する

関連するページ
CSS リファレンス フォーム(css)：フォーム リファレンス(css)へ
テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
ラジオボタンを作る
<input type="radio" >
　<input>タグに type="radio" を指定すると、ラジオボタン（選択肢の中から１つだけ選べるタイプ）を作成できます。
　<input type="radio" name="r_name" value="ラジオ">サンプル
　<input type="radio" name="r_name" value="ラジオ" checked>サンプル
type=""radio を指定
name=""ボタン名を指定（半角英数字）
value=""送信するデータを指定
checked最初から選択された状態にする
　■name="" （ボタン名）
　入力項目を判別するための名前です。複数のボタンに同じボタン名を付けると、１つのボタングループになります。
　ラジオボタンは、グループの中から１つだけを選ぶタイプのボタンです。
　■value="" （送信するデータ）
　そのボタンをクリックしたとき、value="" の内容を送信します。ラジオボタンには、このvalue属性が必須となります。
　■checked （最初から選択された状態にする）
　checked を指定したボタンは、最初から選択された状態になります。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
☆ ２つのボタングループを作る
<form method="POST" action="exp_3.cgi">
性別：<br>
<input type="radio" name="r_name1" value="男">男性
<input type="radio" name="r_name1" value="女">女性
<br>年齢：<br>
<input type="radio" name="r_name2" value="〜20">〜20
<input type="radio" name="r_name2" value="21-60">21-60
<input type="radio" name="r_name2" value="61〜">61〜
性別：
男性 女性
年齢：
〜20 21-60 61〜
☆ checked を指定する
音楽は好きですか？<br>
<input type="radio" name="r_name3" value="はい">はい
<input type="radio" name="r_name3" value="いいえ"
checked>いいえ<br>
<input type="submit" value="送信する">
<input type="reset" value="ﾘｾｯﾄする">
</form>		 音楽は好きですか？
はい いいえ
テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
チェックボックスを作る
<input type="checkbox">
　<input>タグに type="checkbox" を指定すると、チェックボックス（選択肢の中から複数選べるタイプ）を作成できます。
　<input type="checkbox" name="c_name" value="ﾁｪｯｸbox">サンプル
　<input type="checkbox" name="c_name" value="ﾁｪｯｸbox" checked>サンプル
type=""checkbox を指定
name=""ボタン名を指定（半角英数字）
value=""送信するデータを指定
checked最初から選択された状態にする
　■name="" （ボタン名）
　入力項目を判別するための名前です。複数のボタンに同じボタン名を付けると、１つのボタングループになります
　チェックボックスは、グループの中から複数選べるタイプのボタンです。
　■value="" （送信するデータ）
　そのボタンをクリックしたとき、value="" の内容を送信します。チェックボックスには、このvalue属性が必須となります。
　■checked （最初から選択された状態にする）
　checked を指定したボタンは、最初から選択された状態になります。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
☆ ２つのボタングループを作る（下段は､checked を指定）
<form method="POST" action="exp_4.cgi">
好きな動物は？（複数選択可）<br>
<input type="checkbox" name="Q1" value="犬">犬
<input type="checkbox" name="Q1" value="猫">猫
<input type="checkbox" name="Q1" value="鳥">鳥
<input type="checkbox" name="Q1" value="魚">魚
<br><br>ペットはいます？（複数選択可）<br>
<input type="checkbox" name="Q2" value="犬">犬
<input type="checkbox" name="Q2" value="猫">猫
<input type="checkbox" name="Q2" value="鳥">鳥
<input type="checkbox" name="Q2" value="etc">etc
<input type="checkbox" name="Q2" value="no"
checked>いない<br><br>
<input type="submit" value="送信する">
<input type="reset" value="ﾘｾｯﾄする">
</form>
好きな動物は？（複数選択可）
犬 猫 鳥 魚

ペットはいます？（複数選択可）
犬 猫 鳥 etc いない

テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
ファイルの送信欄を作る
<input type="file">
　<input>タグに type="file" を指定すると、ファイル選択欄を作成できます。
　<input type="file" name="f_name" size="25">
type=""file を指定
name=""フィールド名を指定（半角英数字）
size=""入力フィールドの横幅を数値で指定
　■name="" （フィールド名）
　入力項目を判別するための名前です。項目ごとに違う名前を指定します。
　■size="" （入力フィールドの横幅）
　入力欄の横幅を数値で指定します。
　サイズを指定しても、ブラウザによって横幅は違って見えます。同じ幅で表示したい場合は、スタイルシートを使用して下さい。
　【使用方法】
　type="file" を指定すると、自動的に［参照...］（［選択...］）ボタンなどを表示します。
　このボタンをクリックするとファイル選択ダイアログが表示され、表示したファイルをクリックすると「パス」と「ファイル名」が入力欄に挿入されます。
※ ファイルを送信するフォームでは、<form>タグの enctype属性に multipart/form-data を指定して下さい。
※ 送信されたファイルをサーバー側で受け取るには、CGI などのプログラムが必要です。
入力欄のサイズや背景色などは、スタイルシートで変更できます。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
<form method="POST" action="exp_5.cgi"
　 enctype="multipart/form-data">
標準<br><input type="file" name="f_name1">
標準
横幅を 25 に指定<br>
<input type="file" name="f_name2" size="25">
<input type="submit" value="送信する">
<input type="reset" value="ﾘｾｯﾄする">
</form>		 横幅を 25 に指定
関連するページ
HTML タグページ 送信時のデータ形式：送信時のデータ形式を指定する
CSS リファレンス フォーム(css)：フォーム リファレンス(css)へ
テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
隠しデータを送信する
<input type="hidden">
　<input>タグに type="hidden" を指定すると、隠しデータを設定できます。
　<input type="hidden" name="h_name" value="隠しデータ">
type=""hidden を指定
name=""フィールド名を指定（半角英数字）
value=""送信するデータを指定
　■name="" （フィールド名）
　入力項目を判別するための名前です。項目ごとに違う名前を指定します。
　■value="" （送信するデータ）
　value="" で指定したデータが送信されます。
　【隠しデータとは】
　隠しデータの内容は、ブラウザに表示しません。ただし、ソースを見れば確認できます。
　予め設定しておいた情報を、送信するときに使用します。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
<form method="POST" action="exp_6.cgi">
<input type="hidden" name="h_name1" value="サンプル">
<input type="submit" value="送信する">
</form>
（隠しデータのため、
画面に表示しません）
テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ複数行の入力 セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
複数行のテキスト入力欄を作る
<textarea>
　<textarea>タグで、複数行のテキスト入力欄を作成できます。
　<textarea name="t_name"></textarea>
　<textarea name="t_name" cols="40" rows="5" wrap="hard">文字を挿入</textarea>
name=""フィールド名を指定（半角英数字）
cols=""入力フィールドの横幅を数値で指定
rows=""入力フィールドの高さ（行数）を指定
wrap="" 自動改行のタイプを指定（hard、soft、off）
　■name="" （フィールド名）
　入力項目を判別するための名前です。項目ごとに違う名前を指定します。
　■cols="" （入力フィールドの横幅）
　入力欄の横幅を数値で指定します。
　サイズを指定しても、ブラウザによって横幅は違って見えます。同じ幅で表示したい場合は、スタイルシートを使用して下さい。
　■rows="" （入力フィールドの高さ）
　入力欄の高さを行数で指定します。
　この行数を超えて入力した場合は、入力フィールドにスクロールバーを表示します。
　■wrap="" （自動改行のタイプ）
　入力した文字が横幅いっぱいになったとき、自動改行を入れるかどうかを指定します。
hard…自動改行が入ります。送信データにもその改行を送ります。
soft…自動改行は入りますが、送信データにその改行を送りません。
off…自動改行は入りません。横スクロールバーを表示します。
　■入力フィールドに文字を挿入
　入力欄に文字を入れる場合は、<textarea>タグで囲んだ部分に「文字」を記述します。
　<textarea name="t_name">この部分が挿入されます</textarea>
※ <textarea>タグで囲んだ文字列に「半角スペース」「改行」「タブ」などを入れると、入力フィールドではそれらをそのまま表示します。
<textarea name="msgtest">文字挿入の例改行マーク
"　"←半角スペース</textarea>		  
入力欄のサイズや背景色などは、スタイルシートで設定できます。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
サイズの指定なし<br>
<form method="POST" action="exp_7.cgi">
<textarea name="t_name1"></textarea>		 サイズの指定なし
横幅：24、高さ：３行<br>
<textarea name="t_name2" cols="24" rows="3">
</textarea>		 横幅：24、高さ：３行
入力欄に文字を挿入<br>
<textarea name="t_name3" cols="25" rows="4">
　入力欄に文字を挿入して置くことができます</textarea>
<input type="submit" value="送信する">
<input type="reset" value="ﾘｾｯﾄする">
</form>		 入力欄に文字を挿入

関連するページ
CSS スタイルシートﾃｷｽﾄｴﾘｱのｽｸﾛｰﾙﾊﾞｰ：テキストエリアのスクロールバーの色を変える
CSS リファレンス フォーム(css)：フォーム リファレンス(css)へ
テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ
セレクトボックスを作る
<select><option>
　<select>タグと<option>タグを使用と、プルダウン形式やリスト形式のメニューを作成できます。
　<select name="o_name" size="1">
<option value="サンプル">メニュー１</option>
　</select>
＊ <select>タグで囲まれた部分に<option>タグで選択肢を並べます。<option>タグに囲まれた文字が、メニュー内に表示されます。
※　</option>は、省くことも可能です。
　【プルダウン形式とリスト形式】
　セレクトボックスには、次の２タイプがあります。これは、<select>タグの size属性で指定します。

↑size指定を省略、
 または、size="1"。
←size="2"以上を
　指定した場合。
　【<select>タグ】
　<select name="o_name" size="3" multiple>〜</select>
name=""メニュー名を指定（半角英数字）
size=""表示行数を指定
multiple複数選択を可能にします
　■name=""（メニュー名）
　入力項目を判別するための名前です。項目ごとに違う名前を指定します。
　■size=""（表示行数）
　メニューの表示行数を指定します。
　size="" に １ を指定するとプルダウン形式のメニューになり、複数行を指定するとリスト形式のメニューになります。
　この指定を省いた場合は、size="1" と同じ（プルダウン形式）になります。
　■multiple（複数選択）
　multiple を指定すると、メニューの中から複数を選べるようになります。
　この指定を行ったメニューは、自動的にリスト形式になります。
※ Windowsの場合、［Shift］キーや ［Ctrl］キーを押しながらクリックすると、複数の項目を選択することができます。
　【<option>タグ】
　<option value="サンプル" selected>サンプル</option>
value=""送信する内容を指定
selected最初から選択された状態にする
　■value=""（送信する内容）
　選択したメニュー項目の value="" の内容が送信されます。
　■selected（最初から選択された状態にする）
　selected を指定したメニュー項目は、最初から選択された状態になります。
メニューのサイズや背景色などは、スタイルシートで設定できます。
　★ 使用例とブラウザでの表示
使　用　例   ブラウザの表示
☆ プルダウン形式で表示
<form method="POST" action="exp_8.cgi">
カラーコード１：<br><select name="color1">
<option value="#ffffff">white（白色）</option>
<option value="#0000ff">blue（青色）</option>
<option value="#00ff00">lime（ﾗｲﾑ色）</option>
</select>
カラーコード１：
☆ ３行目を選択しておく
カラーコード２：<br><select name="color2">
<option value="#a52a2a">brown（茶色）</option>
<option value="#ee82ee">violet（紫色）</option>
<option value="#00ffff" selected>cyan（水色）</option>
</select>		 カラーコード２：
☆ リスト形式で表示
カラーコード３：<br>
<select name="color3" size="3">
<option value="#bf00df">copper（銅色）</option>
<option value="#ff7f50">coral（ｻﾝｺﾞ色）</option>
<option value="#000000">black（黒色）</option>
</select>		 カラーコード３：
☆ ２行で表示、３行目を選択済みにする
カラーコード４：<br>
<select name="color4" size="2">
<option value="#808080">gray（灰色）</option>
<option value="#008080">teal（青緑色）</option>
<option value="#ffd700" selected>gold（金色）</option>
</select>		 カラーコード４：
☆ multiple（複数選択）を指定
好きな果物：<br>
<select name="fruit" size="4" multiple>
<option value="りんご">アップル</option>
<option value="みかん">オレンジ</option>
<option value="ぶどう">グレープ</option>
<option value="さくらんぼ">チェリー</option>
</select><br>
<input type="submit" value="送信">
<input type="reset" value="ﾘｾｯﾄ">
</form>		 好きな果物：

※ 「好きな果物」は複数の選
択が可能です。
Windowsの場合､Ctrlキー
や Shiftキーを押しながら
クリックして下さい。
関連するページ
CSS リファレンス フォーム(css)：フォーム リファレンス(css)へ
テキスト入力パスワード ラジオボタンチェックBox ファイル選択隠しデータ 複数行の入力セレクトBox フォーム ﾘﾌｧﾚﾝｽ へ