プログラミングの専門家-ＨＴＭＬのフォーム

送信ボタンタグ

概要

送信ボタンを表示するタグです。

書式

<input type="submit" [value="表示用文字列"]>
送信ボタンを表示する書式です。
<input type="image" src="画像ファイルのＵＲＬ">
送信ボタンを画像にする場合の書式です。

タグ

属性

説明

input

名称

説明

type

submitを指定すると送信ボタンになります。

value

表示用文字列を指定します。

src

画像ファイルのＵＲＬを指定します。

width

画像を表示する幅を指定します。

height

画像を表示する高さを指定します。

align

表示位置を指定します。

値	説明
left	左寄せ
center	中央寄せ
right	右寄せ

alt

画像を表示できなかった場合に表示する代替文字列を指定します。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="submit"> </form>		送信ボタンを表示しています。valueを省略するとデフォルトの文字列になります。
<form> <input type="submit" value="ＡＢＣ"> </form>		ボタンの表示をＡＢＣに指定して、送信ボタンを表示しています。
<form> <input type="image" src="ex.jpg"> </form>		送信ボタンを画像にしています。

リセットボタンタグ

書式

タグ

属性

説明

input

名称	説明
type	resetを指定するとリセットボタンになります。
value	表示用文字列を指定します。

入力タグです。

解説

リセットボタンが押されると、フォーム内の入力が初期値に戻ります。

チェックボックスタグ

概要

チェックボックスを表示するタグです。

書式

タグ

属性

説明

input

名称	説明
type	checkboxを指定するとチェックボックスになります。
name	サーバー側で利用するグループ名を指定します。
value	サーバー側で利用する項目を指定します。
checked	指定するとチェックされた状態で表示されます。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="checkbox" name="c" value="項目"> </form>		チェックボックスを用意しています。
<form> <input type="checkbox" name="c" value="項目" checked> </form>		チェックされた状態にしています。

ラジオボタンタグ

書式

タグ

属性

説明

input

名称	説明
type	radioを指定するとラジオボタンになります。
name	サーバー側で利用するグループ名を指定します。
value	サーバー側で利用する項目を指定します。
checked	指定するとチェックされた状態で表示されます。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="radio" name="g1" value="v1">1-1<br> <input type="radio" name="g1" value="v2">1-2<br> <input type="radio" name="g2" value="v1">2-1<br> <input type="radio" name="g2" value="v2" checked>2-2 </form>	1-1 1-2 2-1 2-2	ラジオボタンを２組用意しています。

テキストボックスタグ

書式

タグ

属性

説明

input

名称	説明
type	textを指定するとテキストボックスタグになります。
name	サーバー側で利用するグループ名を指定します。
value	サーバー側で利用する項目を指定します。
size	幅を指定します。
maxlength	最大文字数を指定します。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="text"> </form>		テキストボックスを用意しています。
<form> <input type="text" value="初期値" size="10" maxlength="4"> <input type="reset"> </form>		初期値、サイズ、最大長を指定したテキストボックスとリセットボタンを用意しています。幅は１バイト文字１０個分に固定され、文字列も１バイト文字と２バイト文字の区別なく、４文字までしか入力できなくなります。リセットボタンを押すと初期値に戻ります。

パスワードボックスタグ

書式

タグ

属性

説明

input

名称	説明
type	typeにpasswordを指定するとパスワードボックスになります。
name	サーバー側で利用するグループ名を指定します。
value	サーバー側で利用する項目を指定します。
size	幅を指定します。
maxlength	最大文字数を指定します。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="password" name="p"> </form>		パスワード用テキストボックスを用意しています。

テキストエリアタグ

画面上で折り返された場合、複数行テキストの入力欄を作ります。初期値はタグが無視されます。
書式

タグ

属性

説明

input

名称

説明

name

グループ名を指定します。

rows

を指定します。

cols

を指定します。

wrap

名称	説明
off	自動改行しなくなります。
soft	表示のみ改行します。
hard	表示と送信を改行します。

disabled

指定すると非活性化されます。

readonly

指定すると読込専用になります。

入力タグです。

例

記述例	実行結果	説明
<form> <textarea name="a">初期値</textarea> </form>	初期値	テキストエリアを用意しています。
<form> <textarea wrap="off">初期値</textarea> </form>	初期値	自動改行しなくなります。
<form> <textarea cols="3">初期値</textarea> </form>	初期値	横幅を指定しています。
<form> <textarea rows="4">初期値</textarea> </form>	初期値	高さを指定しています。入力行数が制限されるわけではありません。
<form> <textarea disabled>初期値</textarea> </form>	初期値	非活性化されます。
<form> <textarea readonly>初期値</textarea> </form>	初期値	読み込み専用になり、書き込みできなくなります。

ファイルタグ

書式

タグ

属性

説明

input

名称	説明
type	fileを指定するとファイル入力になります。
name	名称を指定します。
size	入力欄の幅を指定します。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="file" name=""> </form>		ファイルを用意しています。

隠しデータタグ

書式

属性名

属性値

デフォルト

input

名称	説明
type	hiddenを指定すると隠しデータになります。
name	名称を指定します。
value	送信する文字列を指定します。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="hidden" name="h"> </form>		隠しデータを用意しています。

ボタンタグ

概要汎用ボタンです。
書式

タグ

属性

説明

input

名称	説明
type	buttonを指定します。
value	表示文字列を指定します。
name	名称を指定します。

入力タグです。

例

記述例	実行結果	説明
<form> <input type="button" name="b1" value="ボタン１"> </form>		ボタンを用意しています。

プルダウンタグ

書式

<select>
[<option>表示文字列</option>]...
</select>

属性名

属性値

デフォルト

select

名称	説明
name	名称を指定します。

プルダウンタグです。

option

名称	説明
value	値を指定します。

オプションを指定するためのタグです。

例

記述例	実行結果	説明
<form> <select name="s1"> <option value="a">あ</option> <option value="i">い</option> </select> </form>		プルダウンメニューを用意しています。

リストボックスタグ

書式

<select name="グループ名" size="高さ" [multiple]>
[<option value="項目名">表示文字列</option>]..
</select>

属性名

属性値

デフォルト

select

名称	説明
value	項目名を指定します。
name	グループ名を指定します。
size	高さを指定します。
multiple	指定すると複数選択できるようになります。

リストボックスタグです。

option

名称	説明
value	値を指定します。

オプションを指定するためのタグです。

解説

プルダウンタグと似ていますが、sizeを指定するとリストになります。

例

記述例	実行結果	説明
<form> <select name="s1" size="5" multiple> <option value="a">あ</option> <option value="i">い</option> <option value="u">う</option> </select> </form>		リスト（複数選択可能）を用意しています。ドラッグやCntlキーを押しながらのクリックで複数の項目を選択できます。
<form> <select name="s1" size="2"> <option value="a">あ</option> <option value="b">い</option> <option value="c">う</option> </select> </form>		サイズが項目数より小さい場合です。