More than 5 years have passed since last update.

HTMLのよく使うタグ集

Posted at 2015-10-31

はじめに

この前Amon2で簡易ツイッターを作った際にいちいち探していたので、まとめました。
アプリケーションを作る際によく使いそうなhtmlの備忘録です。

<form>～</form>の間に、 <input>・<select>・<textarea>などのタグにより、一行テキストボックス・ボタン・チェックボックス・ラジオボタン・セレクトボックス・スクロールテキストボックス等の部品を配置できる。

フォームに入力されたデータは、送信ボタンを押すことでCGIプログラム等へ送信。
送信先はaction属性で、転送方法はmethod属性で、データ形式はenctype属性でそれぞれ指定。

属性	使用方法	動作
action	action="URI"	送信先プログラムのURIを指定する
method	method="HTTPメソッド"	送信の際の転送方法（HTTPメソッド）を指定する
enctype	enctype="MIMEタイプ"	送信の際のデータ形式（MIMEタイプ）を指定する
accept-charset	accept-charset="文字セット"	CGIプログラム等のデータの受け側で、受付可能な文字セットを指定する
accept	accept="MIMEタイプ"	CGIプログラム等のデータの受け側で、処理可能なMIMEタイプを指定する
name	name="名前"	スクリプト言語などから参照できるよう名前を指定する
target	target="フレーム名"	フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定する

テキスト入力欄や実行ボタン等、フォーム（<FORM>～</FORM>）を構成する部品を作成。
type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品となる。

<FORM>でデータが送信する際には、<INPUT>タグのname属性で付けたデータ名とその値を一組にして、<FORM>タグのaction属性で指定したサーバー上のファイルに、<FORM>タグのmethod属性で指定した転送方法で送られる。

属性	使用方法	動作
text	type="text"	1行テキストボックス。2行以上の長い文章入力には、<TEXTAREA>～</TEXTAREA>を使用。
password	type="password"	パスワード入力ボックス。入力したテキストがアスタリスク（*）などに置き換えて表示されます。ただし、データが暗号化されるわけではない。
checkbox	type="checkbox"	チェックボックス。複数選択が可能。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態。
radio	type="radio"	ラジオボタン。複数の中から一つしか選択できない。複数を一つのグループにするには、name属性で同じ名前を付ける。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態。
file	type="file"	サーバーへファイルを送信する際に、送信するファイルを選択。ファイル名の入力フィールドと[参照]ボタンが表示されます。サーバー側にはファイルを受け取るための特別なCGI等が必要です。
hidden	type="hidden"	隠しデータをサーバーに送信。画面上には表示されないが、value属性で指定した値がサーバーへ送信。
submit	type="submit"	送信ボタン。
button	type="button"	汎用ボタン
reset	type="reset"	リセットボタン
image	type="image"	画像のボタン。使用する画像ファイルはsrc属性で指定。alt属性が必須。