【HTML】入力フォームの作り方

【HTML】
入力フォームの作り方

INDEX

■ 入力フォームを作るHTMLタグ

■ 入力フォームの背景に文字を表示させる
■ 入力フォームに最初から文字を入力して表示させる

入力フォームを作るHTMLタグ

入力フォームは、関連のHTMLタグをいくつか使用して入力の窓口を作ります。
その入力の窓口のレイアウトがHTMLタグの担当です。
文字を入力するテキストフォームや選択ボタンなどを用意するのが役割です。
その後、入力した後の挙動はプログラムに任せることになるので、「Javascript」や「PHP」などを使って、入力チェックや情報送信などを行います。
なので、入力フォームだけでは、情報の収集・送信はできません。

入力フォーム関連のHTMLタグ

form	フォーム部品を配置
fieldset	定義するフォーム中の入力部品をグループ化
input	フォームの中のテキスト入力や実行ボタンなどの各フォーム部品を表示
label	フォームの中でフォーム部品とラベルを関係付ける
legend	グループ化した部品群のタイトルをつける
keygen	フォームデータのセキュリティ強化に用いる。フォームをサブミットすると、クライアント側で秘密鍵と公開鍵を生成。
optgroup	グループのラベルとして label 属性で指定した文字が表示
option	selectによる選択部品の選択項目を指定
output	フォーム部品のひとつで、計算結果を表示
select	フォーム内の選択部品（セレクトボックス）を表示
textarea	入力フォームに記述したテキストが初期値として表示
datalist	inputの入力項目にoptionを関連付けるために利用される。

「input」の属性

【inputの属性】	意味	使用可能タグ
type=type	部品の種類を指定。フォームのタグをどのような形式で使用するかを指定するオプション。「input」タグなどでは、「type」オプションを利用して、入力する情報を指定できる。テキスト入力フィールド = text パスワード入力フィールド = password ファイル名入力フィールド = file チェックボックス = checkbox ラジオボタン = radio 隠しフィールド = hidden 実行ボタン = submit 取消ボタン = reset 汎用ボタン = button 画像ボタン = image 数値 = number レンジ = range 検索文字列 = search 電話番号 = tel URL = url Eメール = email 時刻 = time 日時 = datetime 時刻 = datetime-local 日付 = date 月 = date 週 = week 色 = color	[input]
name=name	名前を指定。 name」オプションで指定する名前で、サーバー側で受診した情報にアクセスできる。	[input]
value=value	入力フィールドの初期値を指定。「input」などの入力フォーム部品に、あらかじめ入力内容を表示させるのに使用するオプション。	[input]
【type=textの属性】	意味
istyle=n	i-modeにおいて、入力モードの初期値を指定。かな入力モードの時は、1（全角カナ）、2（半角カナ）、3（英字）、4（数字）となり、ポケットベル入力時は、1（全角文字）、2（半角文字）、3（小文字推奨半角文字）、4（数字推奨半角文字）となります。	[input]
【type=fileの属性】	意味
accept=accept	送信するデータのMIMEタイプの候補リストをカンマで区切って指定。あまり使用されていません。	[input]
multiple	複数選択を可能にする。	[input]
【type=submitの属性】	意味
formaction=url	フォームのアクションを指定。	[input]
formenctype=enc	フォームのエンコードタイプを指定。	[input]
formmethod=method	フォームのメソッドを指定。	[input]
formnovalidate=url	フォームのバリデーションを無効にします。	[input]
formtarget=target	フォームのターゲットを指定。	[input]
【type=imageの属性】	意味
align=align	表示位置を指定。	[input]
alt=alt	画像の代わりに表示する代替テキストを指定。	[input]
border=n	画像の周りの枠線の太さをピクセルで指定。	[input]
dynsrc=url	画像の代わりに動画（*.avi）を表示。	[input]
height=n	画像の高さをピクセルまたはパーセンテージで指定。	[input]
ismap	サーバーサイドクリッカブルマップを実現する際に使用。	[input]
lowsrc=url	src で指定した画像を転送する間に表示する、荒い（サイズの小さい）画像の URL を指定。	[input]
src=url	表示する画像ファイルの URL を指定。	[input]
width=n	画像の横幅をピクセルまたはパーセンテージで指定。	[input]
formaction=url	フォームのアクションを指定。	[input]
formenctype=enc	フォームのエンコードタイプを指定。	[input]
formmethod=method	フォームのメソッドを指定。	[input]
formnovalidate=url	フォームのバリデーションを無効にします。	[input]
formtarget=target	フォームのターゲットを指定。	[input]
【type=emailの属性】	意味
multiple	複数選択を可能にする。	[input]
【テキスト入力系属性】	意味
maxlength=n	最大入力文字数を指定。	[input]
size=n	入力フィールドの大きさを指定。	[input]
list=name	datalist で指定した入力候補のリストのIDを指定。	[input]
pattern=regexp	入力値のパターンを正規表現で指定。	[input]
placeholder=str	プレースホルダとして表示する文字列を指定。「input」などの入力フォーム部品の背景に文字を表示するためのオプション。	[input]
autocomplete=onoff	過去に入力した値を候補として表示するオートコンプリート機能を有効・無効にします。 on：有効にする off：無効にする default：デフォルト	[input]
【ボタン系属性】	意味
checked	このチェックボックスをあらかじめチェックした状態にしておきます。	[input]
【数値・時刻系属性】	意味
max=n	最大値を指定。	[input]
min=n	最小値を指定。	[input]
step=n	数値・時刻を増減させる際のステップ値を指定。	[input]
【データバインド】	意味
datasrc=datasrc	データバインド機能を用いる際の、データソースの ID を指定。	[input]
datafld=datafld	データバインド機能を用いる際の、データソースの列名を指定。	[input]

「select」の固有属性

【selectの固有属性】	意味	使用可能タグ
name=name	名前を指定。	[select]
align=align	表示位置を指定。	[select]
autofocus	自動的にフォーカスを合わせます。	[select]
form=id	関連付けたい form要素のidを指定。	[select]
disabled	この部品を無効にし、入力できない状態にします。	[select]
multiple	複数行選択を可能にする。Windows の場合は、Ctrl キーや Shift キーを押しながらマウスでクリックすることで複数選択が可能になります。	[select]
size=n	画面に一度に表示する選択肢の行数を指定。通常は 1 です。	[select]
required	この情報が必須であることを示します。	[select]
datafld=datafld	データバインド機能を用いる際の、データソースの列名を指定。	[select]
datasrc=datasrc	データバインド機能を用いる際の、データソースの ID を指定。	[select]
selected	「select」の選択肢「option」タグに指定することで、デフォルトで指定した選択肢が選択される。	[select]

「textarea」の固有属性

【textareaの固有属性】	意味	使用可能タグ
align=align	テキストエリアを表示する位置を指定。	[textarea]
cols=n	テキストエリアの横幅を指定。	[textarea]
disabled	テキストフィールドへの入力をできなくします。表示文字は灰色で表示されます。	[textarea]
istyle=n	入力モードの初期値を指定する。<input>を参照。	[textarea]
readonly	テキストフィールドへの入力をできなくします。	[textarea]
rows=n	テキストエリアの縦幅（行数）を指定。HTML4.01では必須の属性として定義されています。	[textarea]
wrap=wrap	入力文字数が横幅を超える場合の自動改行を指定。Internet Explorerでは soft、Netscape Navigator では off が初期値になっています。 off : 自動改行しない hard : 表示も送信も自動改行される soft : 表示は自動改行されるが送信は自動改行されない physical : hardと同じ(e?/N?) virtual : softと同じ(e?/N?) autofocus : 自動的にフォーカスをあてます。	[textarea]
form=id	関連付けたい form要素のidを指定。	[textarea]
maxlength=n	最大文字数を指定。	[textarea]
placeholder=string	プレースホルダを指定。	[textarea]
required	この入力項目が必須であることを示します。	[textarea]

一般属性

【一般属性】	意味	使用可能タグ
id=id	ID を指定
class=class	クラスを指定。
name=name	名前指定
style=style	スタイルシートを指定
title=title	タイトルを指定。
style=style	スタイル指定
target=target	ターゲット指定
type=type	MIMEタイプ指定
unselectable=unselectable	選択禁止
dir=dir	文字の表示方向を指定。
lang=lang	言語を指定。
language=lang	スクリプト言語指定
accesskey=key	アクセスキーを指定。マウスの使えない環境でも、リンクにジャンプする
align=left	データの横方向の表示位置を指定 left=左側 right=右側 center=中央
tabindex=n	タブインデックスを指定。
contenteditable=bool	コンテンツの編集許可
contextmenu=id	コンテキストメニューを指定。
char=	文字による位置揃え
data-*=	ユーザ拡張属性
dir=	文章の方向を指定
disabled=	指定した要素を無効化
draggable=bool	ドラッグを可能にする。
dropzone=value	ドロップを可能にする。
hidden	要素を非表示にする。
hideforcus	フォーカスしていることがわかる変化を表示しない
spellcheck=bool	スペルをチェックする。
IE拡張属性	他にもIEで拡張された属性が指定可能。

フォームのサンプルコード

<form method="POST" action="送信先URL">
<label>名前：<input type="text" name="NAME" placeholder="名前を入力"></label>
<label>住所：<input type="text" name="ADDR" value="サンプル住所"></label>

<fieldset>
<legend>お客様情報</legend>
名前：<input type="text" name="NAME" size=15>
年齢：<input type="text" name="AGE" size=15>
</fieldset>

<fieldset>
<legend>ご利用環境</legend>
ＯＳ：
<select name="OS">
<option value="WIN">Windows
<option value="MAC">Macintosh
<option value="UNIX">UNIX
<option value="OTHER">その他
</select>

ブラウザ：
<select>
<optgroup label="Internet Explorer">
<option>Internet Explorer 3.*
<option>Internet Explorer 4.*
<option>Internet Explorer 5.*
<option>Internet Explorer 6.*
</optgroup>
<optgroup label="Netscape Browser">
<option>Netscape Navigator 3.*
<option>Netscape Communicator 4.*
<option>Netscape 6.*
</optgroup>
<optgroup label="Other">
<option>その他
</optgroup>
</select>
</fieldset>

<label>
好きなスポーツは？
<input type="text" name="fav_sports" list="sports_list">
<datalist id="sports_list">
<option value="サッカー">
<option value="野球">
<option value="ゴルフ">
</datalist>
</label>

その他：
<textarea name="MSG" cols=40 rows=4>
あいうえお
</textarea>

<input type="submit" value="送信">
<input type="reset" value="取消">
</form>

フォームの出力結果

Back

入力フォームの背景に文字を表示させる

入力フォームの背景に文字を表示して、案内をしたい時に使う手法。
「form」の「input」タグの要素「placeholder」に文字を入力すると、
その文字が、「input」タグの背景として表示される。
背景文字なので、そのまま送信ボタンを押しても、
送信内容として送信されない。

サンプルコード

<form method="POST" action="送信先URL">
<label>名前：<input type="text" name="NAME" placeholder="名前を入力"></label>
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>

表示例

Back

入力フォームに最初から文字を入力して表示させる

入力フォームに、あらかじめ文字などを入力した状態にしておきたい場合の方法。
「value」要素に、文字・値を入力すると、その文字・値が、入力された文字・値として入力フォームに表示される。
何も変更せずに、そのまま送信ボタンを押すと、その情報が送信される。

サンプルコード

<form method="POST" action="送信先URL">
<label>住所：<input type="text" name="ADDR" value="サンプル住所"></label>
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>

表示例

Back