1.フォーム基本タグ
<form>〜</form>
フォームを表示させる基本的なタグで、
<form>〜</form>の間にボタンやテキストを設定する
2.フォームをメールで転送
<form action="mailto:メルアド" method="post" enctype="text/plain"&>〜</form>
入力した内容は表示するだけでは面白くありません、
入力した内容を転送できるようにするためには
<form>タグにaction、enctype、methodと言うオプションを使います
CGIスクリプトを使う方法もありますが、ここでは省略します
<form>〜</form>の間にボタンやテキストを設定する
（例）
<form action="mailto:test@_test.com" method="post" enctype="text/plain">
アンケート：あなたの年齢は？
<input type="radio" name="old" value="10" checked>１０代
<input type="radio" name="old" value="20">２０代
<input type="radio" name="old" value="30">３０代
<input type="radio" name="old" value="other">それ以外
※注意：例なので送らないで！
<input type="submit" value="送信">
</form>
（結果）
3.１行の入力フィールド
<input type="text">
１行の入力フィールドを作る。
オプション
size＝フィールドの長さ
value＝デファルトで入力される文字
maxlength=最大文字数
name＝フィールド名
（例）
<input type="text">
（結果）
4.パスワードの入力フィールド
<input type="password">
パスワードの入力フィールドを作る。入力した文字が表示されなくなる。
オプション
size フィールドの長さ
value デファルトで入力される文字
maxlength 最大文字数
name フィールド名
（例）
<input type="password">
（結果）
5.選択ボタン
<input type="radio">
<input type="checkbox">
選択ボタンを作る。
radio ：単数選択 checkbox：複数選択
オプション
name フィールド名
value 選択されたときに返す文字
checked デファルトでチェックされている。
（例）
Q1.あなたは好き嫌いがありますか？
<input type="radio" value＝"はい" name="Q1" checked >はい
<input type="radio" value＝"いいえ" name="Q1" >いいえ
Q2.具体的になんですか？（複数可）
<input type="checkbox" value＝"肉" name="Q2" >肉
<input type="checkbox" value＝"魚" name="Q2" >魚
<input type="checkbox" value＝"野菜" name="Q2" >野菜
（結果）
Q1.あなたは好き嫌いがありますか？
はい
いいえ
Q2.嫌いなものはなんですか？（複数可）
肉
魚
野菜
6.リセットボタン
<input type="reset">
リセットボタンを作る。
オプション
value ボタンに表示される文字
（例）
<input type="reset" valued="リセットです">
（結果）
7.送信ボタン
<input type="submit">
送信ボタンを作る。
オプション
value ボタンに表示される文字
name フィールド名
（例）
<input type="submit" value="送信です">
（結果）
8.テキストの入力フィールド
<textarea>〜</textarea>
テキスト入力欄
オプション
rows 縦幅
cols 横幅
wrap 自動改行｛hard(自動改行)，off(自動改行なし)｝
name フィールド名
（例）
<textarea rows=8 cols=40>
</textarea>
（結果）
9.選択メニュー
<select name="フィールド名">
<option value="テキスト"selected>
<option value="テキスト">
</select>
optionのselectedはデファルトの表示。
（例）
<select name="好きなお肉">
<option value="牛"selected>牛肉
<option value="豚">豚肉
<option value="鶏">鶏肉
</select>
（結果）
10.選択メニューをフィールドで
<select size="行数" name="フィールド名">
<option value="テキスト"selected>
<option value="テキスト">
</select>
optionのselectedはデファルトの選択。
（例）
<select size="3" name="好きなお肉">
<option value="牛"selected>牛肉
<option value="豚">豚肉
<option value="鶏">鶏肉
</select>
（結果）
11.検索
Yahoo!で検索できるようにする。
（例）
<form method=get action="http://search.yahoo.co.jp/bin/search">
<input size=30 name=p>
<input type=submit value="検索">
</form>
（結果）
戻る
|