フォーム form

フォーム <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、つまり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、つまり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

アンケート

好きな色はなんですか?
ピンク

嫌いな色は何ですか?
ピンク

個人情報 名前: MAIL:

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"
サーバーに送信されるボタンの値