LoginSignup
4
4

More than 5 years have passed since last update.

HTMLのよく使うタグ集

Posted at

はじめに

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

form:入力・送信フォームを作成する

<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="フレーム名" フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定する
  • login.txaction="<: uri_for('/login') :>"で以下にloginのテンプレ。
  • method='/post'には小文字大文字どちらでもよい

input:各入力フィールドにデータを入力

テキスト入力欄や実行ボタン等、フォーム(<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属性が必須。

表関連

タグ 意味
<TABLE> テーブル(表)を作成する
<TR> テーブル(表)の横方向の一行を定義する
<TH> テーブル(表)の見出しセルを作成する
<TD> テーブル(表)のデータセルを作成する
<THEAD> テーブル(表)のヘッダ行を定義する
<TFOOT> テーブル(表)のフッタ行を定義する
<TBODY> テーブル(表)のボディ部分を定義する
<CAPTION> テーブル(表)にタイトルをつける
<CENTER> センタリングする
<HR> 横罫線を引く
4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4