フォームを定義する

HTML4.01

ファイル名：hollywood_cafe/4t/contact.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="ハリウッド・カフェはクリエイターが集まる創造空間カフェです。">
<meta name="keywords" content="カフェ,クリエイター,CAFE,作品,創造,空間">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Contact | HOLLYWOOD CAFE</title>
</head>
<body>
<!-- ヘッダ要素　ここから -->
<h1><img src="images/top/hc_logo.png" alt="HOLLYWOOD_CAFE" width="140" height="170"></h1>

<h2>クリエイターが集まり、作品が生まれる。創造空間カフェ。</h2>

<p><a href="sitemap.html">Sitemap</a></p>
<!-- ヘッダ要素　ここまで -->
<hr>

<!-- ナビゲーション　ここから -->
<ul>
	<li><a href="top.html"><img src="images/top/navi_home.jpg" alt="Home" width="120" height="30"></a></li>
	<li><a href="about.html"><img src="images/top/navi_about.jpg" alt="About" width="120" height="30"></a></li>
	<li><a href="menu.html"><img src="images/top/navi_menu.jpg" alt="Menu" width="120" height="30"></a></li>
	<li><a href="access.html"><img src="images/top/navi_access.jpg" alt="Access" width="120" height="30"></a></li>
	<li><img src="images/top/navi_on_contact.jpg" alt="Contact" width="120" height="30"></li>
</ul>
<!-- ナビゲーション　ここまで -->
<hr>

Home>Contact

Contact

ご予約、イベント、パーティ開催のお問い合わせ、そのほか当店へのご意見などは、下記お問い合わせフォームをご記入の上、送信ボタンをクリックして下さい。

<form name="form1" id="form1" method="POST" action="xxxxx.php">
<table cellpadding="0" cellspacing="0" summary="お問い合わせフォーム">
	<caption>お問い合わせフォーム</caption>
	<tr>
		<th>お問い合わせ内容</th>
		<td></td>
	</tr>
	<tr>
		<th>お名前</th>
		<td></td>
	</tr>
	<tr>
		<th>電話番号</th>
		<td></td>
	</tr>
	<tr>
		<th>メールアドレス</th>
		<td></td>
	</tr>
	<tr>
		<th>ご連絡方法</th>
		<td></td>
	</tr>
	<tr>
		<th>当店を何でお知りになりましたか</th>
		<td></td>
	</tr>
	<tr>
		<th>自由記入欄</th>
		<td></td>
	</tr>
</table>
</form>

Recommended menu

ハリウッド・バーガー
当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー

ハリウッド・プレート
お酒を飲みながら軽い食事を楽しんでいただける5点盛り合わせ

More

<!-- バナー　ここから -->
<ul>
	<li>お得なセットメニュー</li>
	<li><a href="http://www.sugiyama-style.tv/" target="_blank">オーナーブログ</a></li>
</ul>
<!-- バナー　ここまで -->

<!-- ページトップへのリンク　ここから -->
<p><a href="#pageTop">PageTop</a></p>
<!-- ページトップへのリンク　ここまで -->
<hr>

<!-- フッタ要素　ここから -->
<address>Copyright 2007 HOLLYWOOD CAFE, ALL Rights Reserved.</address>
<!-- フッタ要素　ここまで -->
</body>
</html>

XHTML1.0

ファイル名：hollywood_cafe/xt/contact.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="ハリウッド・カフェはクリエイターが集まる創造空間カフェです。" />
<meta name="keywords" content="カフェ,クリエイター,CAFE,作品,創造,空間" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Contact | HOLLYWOOD CAFE</title>
</head>
<body>
<!-- ヘッダ要素　ここから -->
<h1><img src="images/top/hc_logo.png" alt="HOLLYWOOD_CAFE" width="140" height="170" /></h1>

<h2>クリエイターが集まり、作品が生まれる。創造空間カフェ。</h2>

<p><a href="sitemap.html">Sitemap</a></p>
<!-- ヘッダ要素　ここまで -->
<hr />

<!-- ナビゲーション　ここから -->
<ul>
	<li><a href="top.html"><img src="images/top/navi_home.jpg" alt="Home" width="120" height="30" /></a></li>
	<li><a href="about.html"><img src="images/top/navi_about.jpg" alt="About" width="120" height="30" /></a></li>
	<li><a href="menu.html"><img src="images/top/navi_menu.jpg" alt="Menu" width="120" height="30" /></a></li>
	<li><a href="access.html"><img src="images/top/navi_access.jpg" alt="Access" width="120" height="30" /></a></li>
	<li><img src="images/top/navi_on_contact.jpg" alt="Contact" width="120" height="30" /></li>
</ul>
<!-- ナビゲーション　ここまで -->
<hr />

Home>Contact

Contact

ご予約、イベント、パーティ開催のお問い合わせ、そのほか当店へのご意見などは、下記お問い合わせフォームをご記入の上、送信ボタンをクリックして下さい。

<form name="form1" id="form1" method="POST" action="xxxxx.php">
<table cellpadding="0" cellspacing="0" summary="お問い合わせフォーム">
	<caption>お問い合わせフォーム</caption>
	<tr>
		<th>お問い合わせ内容</th>
		<td></td>
	</tr>
	<tr>
		<th>お名前</th>
		<td></td>
	</tr>
	<tr>
		<th>電話番号</th>
		<td></td>
	</tr>
	<tr>
		<th>メールアドレス</th>
		<td></td>
	</tr>
	<tr>
		<th>ご連絡方法</th>
		<td></td>
	</tr>
	<tr>
		<th>当店を何でお知りになりましたか</th>
		<td></td>
	</tr>
	<tr>
		<th>自由記入欄</th>
		<td></td>
	</tr>
</table>
</form>

Recommended menu

ハリウッド・バーガー
当店で毎日焼き上げる自家製のパンを使ったオリジナルハンバーガー

ハリウッド・プレート
お酒を飲みながら軽い食事を楽しんでいただける5点盛り合わせ

More

<!-- バナー　ここから -->
<ul>
	<li>お得なセットメニュー</li>
	<li><a href="http://www.sugiyama-style.tv/" target="_blank">オーナーブログ</a></li>
</ul>
<!-- バナー　ここまで -->

<!-- ページトップへのリンク　ここから -->
<p><a href="#pageTop">PageTop</a></p>
<!-- ページトップへのリンク　ここまで -->
<hr />

<!-- フッタ要素　ここから -->
<address>Copyright 2007 HOLLYWOOD CAFE, ALL Rights Reserved.</address>
<!-- フッタ要素　ここまで -->
</body>
</html>

※method属性には、GETとPOSTがあります。GETは、action属性に指定したURIに「?」をつけ、そのあとにフォームの内容を追加したURLをサーバーへ送信します。フォームの内容はブラウザのアドレス欄に表示されるため、大量のデータの送信やセキュリティ上問題があるデータの送信には向きません。POSTはURIではなくフォームの本文として送信されます。一般的にPOSTがよく使用されています。

※一般的に、お問い合わせなどのフォームデータを送信する場合、PHPなどのサーバーサイドで動くプログラムを使用します。

※formからの送信処理の一つに、mailtoを使用した方法もあります。

action属性に「mailto:送信先メールアドレス」と指定することで、「送信」ボタンをクリックした際に、メーラーがmailtoに指定したアドレスを送信先に、入力データを本文に入力された状態で起動します。そのまま、自分のメーラーから送信先へデータを送ります。ただし、この方法は、ブラウザとメーラー、およびその文書の文字コードなどとの相性もあるので、利用される機会は少ないですが、気軽に使える方法なので個人ユーザのWebページなどで見かけることがあります。

フォームを定義する

HTML4.01

XHTML1.0

Copyright © 2012 YOHSUKE NAKANO