フォームに関するHTML
■フォームを作成する
■HTML
<FORM ACTION="送信先" METHOD="送信方法">
フォーム要素
</FORM>
■テキスト入力欄
■例
■HTML
<INPUT TYPE="text" NAME="識別名" VALUE="初期表示文字" SIZE="横幅" MAXLENGTH="最大入力文字数">
■チェックボックス
■例
←これ
■HTML
<INPUT TYPE="checkbox" NAME="識別名" VALUE="内容" CHECKED←チェック状態にする場合>
■ラジオボタン
■例
←これ
■HTML
<INPUT TYPE="radio" NAME="識別名" VALUE="内容" CHECKED←チェック状態にする場合>
■パスワード入力欄
■例
■HTML
<INPUT TYPE="password" NAME="識別名" VALUE="初期表示文字" SIZE="横幅" MAXLENGTH="最大入力文字数">
■ボタン
■例
■HTML
<INPUT TYPE="button" NAME="識別名" VALUE="文字">
■リセットボタン
■例
■HTML
<INPUT TYPE="reset" VALUE="文字">
■送信ボタン
■例
■HTML
<INPUT TYPE="submit" VALUE="文字">
■画像ボタン
■例
■HTML
<INPUT TYPE="image" SRC="画像URL">
■ファイル選択ボタン
■例
■HTML
<INPUT TYPE="file" NAME="識別名" VALUE="初期表示文字">
■隠し項目
■例
表示なし
■HTML
<INPUT TYPE="hidden" NAME="識別名" VALUE="内容">
■複数行入力可能なテキスト入力欄
■例
■HTML
<TEXTAREA LOWS="行数" CLOS="横幅" WRAP="改行データ送信方法">〜</TEXTAREA>
■改行データ送信方法
キーワード
| 送信方法
| |
off
| 改行コードを全て省く
| |
soft
| 実際の改行のみ送信
| |
hard
| 画面上の改行を含む全ての改行を送信
| |
■選択メニュー
■例
■HTML
<SELECT NAME="識別名" MULTIPLE←複数選択可能にする場合>
<OPTION VALUE="内容" SELECTED←初期選択状態>文字@
<OPTION VALUE="内容">文字A
<OPTION VALUE="内容">文字B
</SELECT>
■関連項目
■入力モード切り替え(IEのみ)[CSS]
■例
[A]
[あ]
■CSS
INPUT { ime-mode:キーワード}
TEXTAREA { ime-mode:キーワード}
■HTML
<INPUT TYPE="text" STYLE="ime-mode:キーワード">
■キーワード
キーワード
| 入力モード
| |
auto
| 自動
| |
active
| 日本語
| |
inactive
| 英語
| |
deactive
| 日本語入力なし
| |
フォーム応用テクニック
■フォームの余白
フォームタグを使用すると<FORM>の上と</FORM>の下に余白が付きます。(IEの場合)
ホームページのデザインの中で、余白が邪魔になる場合、テーブルタグを組み合わせて余白を小さくします。
■例（通常）
■HTML（通常）
<form method="post" action="http://i.tosp.co.jp/Jisyo/TosiJ100.asp">
<input type="hidden" name="Lo" value="tmlue">
<input type="hidden" name="P" value="0">
<input type="hidden" name="SPA" value="1">
<input name="K" maxlength="8">
<input type="submit" value="検索">
</form>
■例（テーブルを組み合わせる）
■HTML（テーブルを組み合わせる）
<table>
<form method="post" action="http://i.tosp.co.jp/Jisyo/TosiJ100.asp">
<td>
<input type="hidden" name="Lo" value="tmlue">
<input type="hidden" name="P" value="0">
<input type="hidden" name="SPA" value="1">
<input name="K" maxlength="8">
<input type="submit" value="検索">
</td>
</form>
</table>
■CGIのURLからフォームを作成
作成サイト等、CGIを利用したページのURLは
http://webサーバ(URL)/プログラム名?識別名=値(内容)
となっているので、これを利用してフォームを作成します。
■例（iらんどのユーザーページURL）
http://ip.tosp.co.jp/i.asp?i=tmlueの場合
<form action="http://ip.tosp.co.jp/i.asp">
<input type="タイプを指定" name="i" value="tmlue">
<input type="submit" value="リンク"></form">
プログラムの処理が増えると識別名=値(内容)を&で区切って表示されます。
■例（iらんどの掲示板URL）
http://i.tosp.co.jp/Kj/Tospi200.asp?I=tmlue&P=0&Kubun=V5の場合
<form action="http://i.tosp.co.jp/Kj/Tospi200.asp">
<input type="タイプを指定" name="i" value="tmlue">
<input type="タイプを指定" name="P" value="0">
<input type="タイプを指定" name="Kubun" value="V5">
<input type="submit" value="リンク"></form">
※iらんどの作成テクニックはこちら
Presented by
HTML辞典