SAMPLE№５．フレーム、画像、リンク、フォーム

●HTMLのサンプル例→ > №01 > №02 > №03 > №04 > №05 > №06 > №07 > №00 > END

№５．フレーム、画像、リンク、フォーム

№５．フレーム、画像、リンク、フォーム

01<frameset>要素は、ウィンドウのフレーム分割を定義する要素です。

<frameset>要素は、ウィンドウのフレーム分割を定義する要素です。フレーム分割したウィンドウの表示設定は、<frame>要素を使用します。 <frameset>～</frameset>は、<head>～</head>の後に記述し<body>要素は使用しません。ただし、フレームに対応していないブラウザ用に代替内容を表示する場合は、<noframes>要素の中に<body>要素を記述します。

strict dtd-

tranasitional dtd-

frameset dtd○

xhtml 1.1-

xhtml basic-

汎用属性：id、class、title、style

`<frameset>～</frameset> 属性`

属性名	値	解説
col	ピクセル	フレームの横幅を指定
	%	フレームの横幅の割合を指定
	*	フレームの横幅の残りのサイズを指定
	<frameset cols="200,*">
rows	ピクセル	フレームの横幅を指定
	%	フレームの横幅の割合を指定
	*	フレームの横幅の残りのサイズを指定
	<frameset rows="130,*">

※HTML

※HTML
①サンプルコード（横分割） HTML <frameset cols="200,"> <frame src="left.html" /> <frame src="main.html" /> <noframes> <body> <p>フレームの代替内容</p> </body> </noframes> </frameset> ②サンプルコード（縦分割） HTML <frameset rows="130,"> <frame src="top.html" /> <frame src="main.html" /> <noframes> <body> <p>フレームの代替内容</p> </body> </noframes> </frameset> ③サンプルコード（ネスト横） HTML <frameset cols="200,"> <frame src="left.html" /> <frameset rows="130,"> <frame src="top.html" /> <frame src="main.html" /> </frameset> <noframes> <body> <p>フレーム未対応のブラウザでは、サンプルを表示できません。</p> </body> </noframes> </frameset> ④サンプルコード（ネスト縦） HTML <frameset rows="130,"> <frame src="top.html" /> <frameset cols="200,"> <frame src="left.html" /> <frame src="main.html" /> </frameset> <noframes> <body> <p>フレーム未対応のブラウザでは、サンプルを表示できません。</p> </body> </noframes> </frameset>


①サンプルコード（横分割）
HTML
<frameset cols="200,*">
	<frame src="left.html" />
	<frame src="main.html" />
<noframes>
<body>
<p>フレームの代替内容</p>
</body>
</noframes>
</frameset>
 

②サンプルコード（縦分割）
HTML
<frameset rows="130,*">
	<frame src="top.html" />
	<frame src="main.html" />
<noframes>
<body>
<p>フレームの代替内容</p>
</body>
</noframes>
</frameset>
 

③サンプルコード（ネスト横）
HTML
<frameset cols="200,*">
<frame src="left.html" />
	<frameset rows="130,*">
		<frame src="top.html" />
		<frame src="main.html" />
	</frameset>
	<noframes>
	<body>
	<p>フレーム未対応のブラウザでは、サンプルを表示できません。</p>
	</body>
	</noframes>
</frameset>
 

④サンプルコード（ネスト縦）
HTML
<frameset rows="130,*">
<frame src="top.html" />
	<frameset cols="200,*">
		<frame src="left.html" />
		<frame src="main.html" />
	</frameset>
	<noframes>
	<body>
	<p>フレーム未対応のブラウザでは、サンプルを表示できません。</p>
	</body>
	</noframes>
</frameset>

※★sample ★①011サンプル > ★②012サンプル > ★③013サンプル > ★④014サンプル >

属性名	値	解説
src	url	フレームに表示するhtml文書のurlを指定
src	<frame src="main.html" />
name	フレーム名	フレーム名を指定
name	<frame src="main.html" name="content" />
id	id名	id名を指定
id	<frame src="main.html" name="content" id="content" />
frameborder	1またはyes	フレームの境界線を表示（デフォルト）
	0またはno	フレームの境界線を非表示
	<frame src="main.html" frameborder="0" />
noresize	なし	フレームサイズの変更を禁止
noresize	<frame src="main.html" noresize />
scrolling	yes	スクロールバーを表示
	no	スクロールバーを非表示
	auto	必要に応じてスクロールバーを表示・非表示する（デフォルト）
	<frame src="main.html" scrolling="no" />
marginwidth	ピクセル	フレームの左右の余白を指定
marginwidth	<frame src="main.html" marginwidth="30" />
marginheight	ピクセル	フレームの上下の余白を指定
marginheight	<frame src="main.html" marginheight="30" />

属性名	解説
src	フレームに表示するHTML文書のURLを指定します。
src	src="example.html"
name	フレーム名を指定します。
name	name="main"
width	フレームの幅を指定します。
width	width="500"
height	フレームの高さを指定します。
height	height="250"
srcdoc	インラインフレーム内に表示させる文書のソースコードを直接この属性の値として指定できます。
srcdoc	srcdoc="HTMLソースコード"
sandbox	セキュリティ対策上、インラインフレーム内に表示させる文書に制限をつける際に使用します。この属性を使用するとフォームやスクリプト、その他コンテンツへのリンクやプラグインが無効になります。
sandbox	allow-forms…フォームを有効にする allow-scripts…スクリプトを有効にする allow-same-origin…同一オリジンとして扱う allow-top-navigation…トップレベル文書へのtarget属性の指定可 sandbox="allow-forms allow-scripts" *半角で区切って複数指定することもできます
seamless	いずれかの書式を指定するとインラインフレームではなく、通常のコンテントのようにシームレスに表示されます。
seamless	seamless seamless="seamless" seamless=""

属性名	値	解説
src	ファイル名	画像ファイルを指定
src	<img src="sample.gif" />
alt	画像代替文章	画像の代わりに表示する文章を指定
alt	<img src="sample.gif" alt="sample" />
width	ピクセルまたは%	画像の横サイズを指定
width	<img src="sample.gif" width="100" />
height	ピクセルまたは%	画像の縦サイズを指定
height	<img src="sample.gif" height="100" />

属性名	値	解説
target	_self	現在のフレーム、ウィンドウに表示
	_parent	親フレームに表示
	_top	フレームを解除してウィンドウ全体に表示
	_blank	新しいウィンドウに表示
	フレーム、ウィンドウ名	任意のフレーム、ウィンドウに表示
	<a href="example.html" target="_self">リンク</a> <a href="example.html" target="_parent">リンク</a> <a href="example.html" target="_top">リンク</a> <a href="example.html" target="_blank">リンク</a> <a href="example.html" target="任意のフレーム名">リンク</a> <a href="example.html" target="任意のウィンドウ名">リンク</a> * target属性はstrict dtdで使用できません。

属性名	値	解説
name	文字列	イメージマップの名前を指定
name	<map name="sample">

属性名	値	解説
shape	rect	領域の形状（四角形）を指定
	circle	領域の形状（円形）を指定
	poly	領域の形状（多角形）を指定
	<area shape="circle" />
coords	ピクセル	領域の座標を指定 rectの場合：四角形の左上のx座標・y座標、右下のx座標・y座標の順番で指定 circleの場合：円の中心のx座標・y座標半径の順番で指定 polyの場合：多角形の各頂点のx座標・y座標の順番で指定
coords	<area shape="circle" coords="50,50,80" />
alt	文字列	代替で表示されるテキストを指定
alt	<area alt="サンプル" />
href	url	リンク先を指定
href	<area href="sample.html" />
nohref	なし	リンク先がない場合指定
nohref	<area nohref />
tabindex	0～3276	タブキーを押して移動する順番を指定
tabindex	<area tabindex="1" />

属性名	値	解説
action	プログラム名	実行ボタンをクリックした時に動作するプログラム名を指定
action	<form action="example.php">
method	get,post	サーバーに送るデータの形式を指定 getは、検索結果を表示する等小さいデータ postは、書き込みや情報を登録する等大きなデータを設定するのが一般的です。
method	<form action="example.php" method="post">
enctype	mimeタイプ	フォームのデータを送信する際ののmimeタイプを指定
enctype	<form action="example.php" method="post" enctype="multipart/form-data">
accept-charset	文字コード	使用可能な文字コードを指定
accept-charset	<form accept-charset="shift-jis">
accept	mimeタイプ	データの受付け可能なmimeタイプを指定
accept	<form accept="text/html">
name	名前	名前を指定
name	<form name="message">

属性名	値	解説
for	部品idで指定した値	フォームの部品とラベルの関連付けを設定
for	<label for="name">
accesskey	キー	入力フィールドに割り当てるショートカットキーを指定ブラウザにより異なりますが、[alt]キー＋指定したキー（もしくは[alt]＋[shift]＋指定したキー）を同時に押すと選択されます（windowsの場合）
accesskey	<label for="no" accesskey="n">

属性名	値	解説
type	text	テキスト入力エリアを作成
	password	パスワード入力エリアを作成入力された文字列は「●」や「*」等で表示されます。
	checkbox	チェックボックスを作成
	radio	ラジオボタンを作成
	submit	送信ボタンを作成
	reset	リセットボタンを作成
	button	汎用ボタンを作成
	image	画像ボタンをクリックすると座標を送信
	file	ファイルを送信
	hidden	ブラウザ上には表示せずにサーバーへデーターを送信
	<input type="text" />
name	名前	部品の名前を指定
name	<input type="text" name="example" />
value	文字列	デフォルト値やボタンに表示する文字列を指定
value	<input type="text" name="example value="入力エリア" />
size	文字数またはピクセル数	サイズ（幅）を指定
size	<input type="text" name="example size="10" />
maxlength	文字数	最大入力文字数を指定
maxlength	<input type="text" name="example maxlength="30" />
checked	なし	ラジオボタンやチェックボックスの初期選択値を指定
checked	<input type="radio" name="example value="a" checked />
disabled	なし	選択・変更不可を設定
disabled	<input type="text" name="example" disabled />
readonly	なし	変更不可を設定
readonly	<input type="text" name="example" readonly />
accept	mimeタイプ	mimeタイプを指定
accept	<input type="text" name="example" readonly />
tabindex	数値	tabキーを押した時、移動する順番を指定
tabindex	<input type="text" name="example" tabindex="1" />
accesskey	キー	入力フィールドに割り当てるショートカットキーを指定ブラウザにより異なりますが、[alt]キー＋指定したキー（もしくは[alt]＋[shift]＋指定したキー）を同時に押すと選択されます（windowsの場合）
accesskey	<input type="text" name="example" accesskey="t" />
src	ファイル名	ボタンとして利用する画像のurlを指定
src	<input type="image" name="example" src="example.gif" />
alt	代替テキスト	画像が表示されない時の代替テキストを指定
alt	<input type="image" name="example" src="example.gif alt="代替テキスト" />
usemap	uri	クライアントサイド・イメージマップを指定
usemap	<input type="image" usemap="#imagemap" />
ismap	なし	サーバーサイド・イメージマップを指定
ismap	<input type="image" ismapexample.gif alt="代替テキスト" />

属性名	値	解説
rows	数値	入力エリアの行数を指定
rows	<textarea rows="10 cols="30">
cols	数値	入力エリアの1行の文字数を指定
cols	<textarea rows="10 cols="30">
name	名前	入力エリアの名前を指定
name	<textarea name="example rows="10 cols="30">
disabled	なし	選択・変更不可を設定
disabled	<textareaname="example rows="10 cols="30" disabled>
readonly	なし	変更不可を設定
readonly	<textareaname="example rows="10 cols="30" readonly>
tabindex	数値	tabキーを押した時、移動する順番を指定
tabindex	<textareaname="example rows="10 cols="30" tabindex="1">
accesskey	キー	入力フィールドに割り当てるショートカットキーを指定ブラウザにより異なりますが、[alt]キー＋指定したキー（もしくは[alt]＋[shift]＋指定したキー）を同時に押すと選択されます（windowsの場合）
accesskey	<textareaname="example rows="10 cols="30" accesskey="t">

属性名	値	解説
selected	なし	初期状態で選択されている選択肢を設定
selected	<option value="example"selected>
value	値	サーバーに送信する値を指定
value	<option value="example">
disabled	なし	選択・変更不可を設定
disabled	<option disabled>

属性名	値	解説
label	文字列	第一階層に表示される選択肢を指定
label	<optgroup label="example">
disabled	なし	選択・変更不可を設定
disabled	<optgroup disabled>