HTML・CSSのタグリファレンスサイトです。現在絶賛改修中!!!
フォーム form
フォーム <form …>- 隠しデータ <input type="hidden" …>
- テキストフィールド（一行） <input type="text" …>
- テキストフィールド（複数行） <textarea …>
- ラジオボタン <input type="radio" …>
- チェックボックス <input type="checkbox" …>
- ラベル <label for="xxx">
- プルダウン <select …>
- リスストボックス <select …>
- 選択肢グループ化 <optgroup label="xxx">
- 入力項目グループ化 <fieldset>
- 送信・リセットボタン <input type="submit" …>/<input type="reset" …>
- ボタン作成 <button type="" name="" value="">
フォーム <form …></form>
<form action="xxx.php" method="xxx"></form>
action="xxx.php"
フォームのデータを処理するプログラムのファイル名を設定。
phpだったり、cgiだったり。
method="xxx"
getかpostが入る。
get
urlの後ろに?をつけ、データをつなげて全体をURLとして送信する。
データ数、長さに上限あり。
（WEBサーバーがApacheの場合は約8Kバイト）
セキュリティ対策上あまり使用されない。
post
httpプロトコルのヘッダー部分にデータを入れて送信する。
データを独立して送信する。
データの数と長さの制限なし。
一般的に使われるのはこっち。
隠しデータ <input type="hidden" …>
<input type="hidden" name="部品名" value="送信される文字列">
画面上には表示させる必要がなく、決められたデータのみ送信したいものはこれで処理する。
name="xxx"
部品名
value="xxx"
送信される文字列
テキストフィールド（一行）<input type="text" …>
郵便番号<input type="text" name="no1" size="5">-<input type="text" name="no2" size="5">
住所 <input type="text" name="address" value="hoge" size="20" maxlength="20">
sample
住所
一行のテキストフィールド
name="xxx"
テキストフィールド名。入力されたデータと一緒に送信されます。
size="数字"
入力エリアの横幅を文字数で指定。
※PCサイトの場合はCSSで指定した方がよい。モバイルの場合はsize=""で指定。
maxlength="数字"
入力可能文字数の最大数を指定。
value="xxx"
入力エリアの初期値を設定。
パスワード <input type="password" name="pw" size="8">
sample
テキストフィールド（複数行）<textarea …></textarea>
<textarea name="xxx" cols="20" rows="5"></textarea>
sample
name="xxx"
テキストフィールド名。入力されたデータと一緒に送信されます。
cols="数字"
入力エリアの横幅を文字数で指定。
rows="数字"
入力エリアの縦幅（行数）を指定。
複数行のテキストエリア
入力エリアの初期値を設定したい場合は、textareaタグでその文字を挟みます。
<textarea>入力エリアの初期値</textarea>
sample
ラジオボタン <input type="radio" …>
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman" checked="checked">女
sample
性別
男 女
type="radio"
ラジオボタン
name="xxx"
ボタン（グループ）名を指定。
同じnameのものが同一グループとみなされ、
同じグループ内で1つしかチェックをすることができない。
データ送信時にはこのname属性とvalue属性が一緒に送信される。
value="xxx"
name属性と一緒に送信されるデータ。
checked="checked"
最初からチェックをつけておく。
チェックボックス<input type="check" …>
<input type="checkbox" name="color" value="red">赤
<input type="checkbox" name="color" value="black">黒
sample
好きな色を選択してください。
赤 黒
type="checkbox"
チェックボックス
ラジオボタンと違って複数チェックすることができる。
name="xxx"
ボタン（グループ）名を指定。同じnameのものが同一グループとみなされる。
データ送信時にはこのname属性とvalue属性が一緒に送信される。
value="xxx"
name属性と一緒に送信されるデータ。
checked="checked"
最初からチェックをつけておく。
ラベル<label for="xxx">
<input type="radio" id="ho"><label for="ho">hoge1</label>
<input type="checkbox" id="ge"><label for="ge">hoge2</label>
sample
フォームの部品（チェックボックスやラジオボタンなど）とラベルを関連付けられると、
ラジオボタンやチェックボックスをクリックしなくても、関連付けされた文字をクリックして
チェックが入れられるようになる。
プルダウン<select …>
<select name="age">
<option value="10">10代</option>
<option value="20">20代</option>
<option value="30" selected="selected">30代</option>
</select>
sample
プルダウン形式のメニュー
<option …>～</option>
メニュー項目
name="xxx"
プルダウンメニュー名。
データ送信時にはこのname属性とvalue属性が一緒に送信される。
value="xxx"
name属性と一緒に送信されるデータ。
selected="selected"
最初から選択させておく。
<select name="age" multiple>
<option value="10">10代</option>
<option value="20">20代</option>
<option value="30">30代</option>
</select>
sample
multiple
メニュー項目が複数選択できるタイプ
めったに使いません。
複数選択させたい場合は、チェックボックスの方がユーザにも分かりやすいかと。
リスストボックス<select …>
<option value="10">10代</option>
<option value="20">20代</option>
<option value="30">30代</option>
</select>
sample
size="数字"
表示する行数の指定ができます。
（デフォルトは1、つまり１行しか表示されない為プルダウン形式となる。）
選択肢グループ化
<select name="grade">
<optgroup label="中学校">
<option value="middle1">1年</option>
<option value="middle2">2年</option>
<option value="middle3">3年</option>
</optgroup>
<optgroup label="高校">
<option value="senior1">1年</option>
<option value="senior2">2年</option>
<option value="senior3">3年</option>
</optgroup>
</select>
sample
size="数字"
表示する行数の指定ができます。
（デフォルトは1、つまり１行しか表示されない為プルダウン形式となる。）
入力項目グループ化
<fieldset>
<legend>アンケート</legend>
<p>
好きな色はなんですか？<br>
<input type="radio" name="like" value="red">赤
<input type="radio" name="like" value="pink">ピンク
</p>
<p>
嫌いな色は何ですか？<br>
<input type="radio" name="dis" value="red">赤
<input type="radio" name="dis" value="pink">ピンク
</p>
</fieldset>
<fieldset>
<legend>個人情報</legend>
名前：<input type="text" name="name">
MAIL：<input type="text" name="mail">
</fieldset>
sample
fieldset
グループ化したい個所を囲う。
legend
グループのタイトル
送信・リセットボタン<input type="submit" …>/<input type="reset" …>
<input type="submit" value="送信ボタン！">
<input type="reset" value="リセットボタン！">
<input type="image" src="xxx.gif">
sample
type="xxx"
submit（送信）かreset（リセット）が入る。
value="xxx"
ボタンのテキストを設定。
src="xxx.gif"
type="image"の時のみ指定可。
ボタン作成<button type="" name="" value="">
<button type="submit" name="subbutton" value="xxx" >submitボタン</button>
<button type="reset">restぼたん</button>
<button type="buton">ただのボタン</button>
<button type="button"><img src="***.gif" alt="">
<br>画像ボタン</button>
sample
フォームの部品、それ以外、JavaScript等と組み合わせて使用。
type="xxx"
ボタンの種類を指定
submit
送信ボタン
reset
リセットボタン
button
汎用ボタン
name="xxx"
サーバーに送信されるボタン名
value="xxx"
サーバーに送信されるボタンの値