∇ WEBプログラマー  便利帳 ≫ HTML
HTML CSS
*
▼スポンサー広告
次の広告へ
▼スポンサー広告
次の広告へ
▼スポンサー広告
次の広告へ
『 
HTMLタグ(目的別)
 』
テキスト 関連
xmp・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
HTMLコードをそのまま表示する
pre・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
ソースに記述された通りそのまま表示
code・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
プログラムコードであることを示す
abbr・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
略語(頭字語以外)であることを表す
font・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
フォントの種類・大きさ・色を指定する
b・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
テキストを太字にする
h1~6・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
見出しをつける
em・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
テキストを強調する
strong・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
テキストをより強く強調する
表 関連
table・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<tr><th><td> と組み合わせてテーブル(表)を作成する
tr・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<table>の横方向の一行を定義する
th・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<table>の見出しセルを作成する
td・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
<table>のセルを作成する
画像 関連
img・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
画像を表示する
フォーム 関連
form・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
入力フォームを作る
input・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
フォームの構成部品(入力欄・ボタン等)を作成する
textarea・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
複数行の入力欄を作成する
select・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
セレクトボックスを作成する
radio・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
ラジオボタンを作成する
文書情報 関連
address・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
連絡先・問合せ先を表す
aside・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
補足情報のセクションであることを示す
article・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
記事であることを示す
その他 関連
meta・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
文書に関する情報・構造(メタデータ)を指定する
html・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
HTML文書であることを宣言する
a・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
リンクの出発点・到達点を指定する
area・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
イメージマップの領域を設定する
audio・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
音声を再生する
input
フォームの構成部品(入力欄・ボタン等)を作成する(フォーム)
Internet Explorer4~
Firefox 1~
Google Chrome 1~
Opera 6~
Safari 3~
記入例
<input
種類
名前
送信内容
最大文字数
コメント
入力補完
/
画像
>
テキストボックスの種類を指定。
スクリプト言語などから参照できるよう名前を指定。
送信される値を指定。
フォーム部品のサイズを指定。
入力できる最大文字数を指定。
コメントを記入。
画像のURLで指定。
入力候補を提示して入力内容を自動補完する。
【 input 属性 】
type
[
ボックスの種類
]
name
[
参照名
]
value
[
送信される値
]
size
[
部品サイズ
]
maxlength
[
最大入力数
]
title
[
コメント
]
src
[
画像のURL
]
autocomplete
[
入力補完
]
<INPUT>タグはテキスト入力欄や実行ボタン等、 フォーム(<FORM>~</FORM>)を構成する部品を作成するタグです。 type属性の値により、一行テキストボックス・チェックボックス・ラジオボタン・実行ボタン・リセットボタン等の部品となります。

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

■属性
type="text"
1行テキストボックスをつくります。通常のテキストを入力するフィールドです。2行以上にわたる長い文章を入力させたい場合には、<TEXTAREA>~</TEXTAREA>を使用します。

type="password"
パスワード入力ボックスをつくります。入力したテキストがアスタリスク(*)などに置き換えて表示されます。ただし、データが暗号化されるわけではないので、送信されたデータを受け取ることができれば内容を見ることができます。利用の際には注意してください。

type="checkbox"
チェックボックスをつくります。チェックボックスは複数選択が可能です。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。

type="radio"
ラジオボタンをつくります。複数の中から一つしか選択できない点がチェックボックスと異なります。複数を一つのグループとして認識させるには、name属性で同じ名前を付けてください。checked属性を指定すると、その項目についてはあらかじめチェックの付いた状態となります。

type="file"
サーバーへファイルを送信する際に、送信するファイルを選択します。ファイル名の入力フィールドと[参照]ボタンが表示されます。サーバー側にはファイルを受け取るための特別なCGI等が必要です。

type="hidden"
隠しデータをサーバーに送信する際に使用します。このタイプのデータは、画面上には表示されませんが、value属性で指定した値がサーバーへ送信されます。

type="submit"
送信ボタンをつくります。
type="reset"
リセットボタンをつくります。このボタンを押すと、それまでに入力した情報をキャンセルして初期状態に戻します。

type="button"
汎用ボタンをつくります。
type="image"
画像のボタンをつくります。使用する画像ファイルはsrc属性で指定してください。またalt属性が必須となります。

autocomplete属性
入力候補を提示して入力内容を自動補完します。(on・off・default)(初期値はdefault)


HTMLサンプルコード
※上記プロパティ値や下記のタグをクリックして、下のフォーム内に反映させて使用します。
表示結果

▼スポンサー広告
次の広告へ
▼スポンサー広告
次の広告へ

▼スポンサー広告
次の広告へ
スポンサーリンク
▼スポンサー広告
次の広告へ
このページの最終更新日:2021/11/29 12:56