テキストフィールド（1行）を作成する

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><input type="text" name="name" id="name" value="" size="20"></td>
	</tr>
	<tr>
		<th>電話番号</th>
		<td><input type="text" name="tel" id="tel" value="" size="20"></td>
	</tr>
	<tr>
		<th>メールアドレス</th>
		<td><input type="text" name="email" id="email" value="" size="20"></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><input type="text" name="name" id="name" value="" size="20" /></td>
	</tr>
	<tr>
		<th>電話番号</th>
		<td><input type="text" name="tel" id="tel" value="" size="20" /></td>
	</tr>
	<tr>
		<th>メールアドレス</th>
		<td><input type="text" name="email" id="email" value="" size="20" /></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>

※1行のテキストフィールドを作成するには、input要素のtype属性に"text"と指定します。フィールドにはname属性とid属性で名前を指定することができます。

※名前（name属性、id属性）は送信先プログラムでキーに使われるため、項目にあった名前をつけるとわかりやすくなります。名前は半角英数字で指定しましょう。

※どのブラウザでも同じ幅で表示させる場合には、スタイルシートを使用します。

テキストフィールド<input name="～">: テキストフィールドに付ける、固有の名前を入力します。
文字幅<input size="～">: テキストフィールドの長さを、表示できる文字数（半角文字）で指定します。ただし入力されたテキストがテキストフィールドの幅を超えて、テキストはカットされるワケではなくスクロール表示されます。
最大文字数<input maxlength="～">: 入力できる最大文字数を指定します。全角文字に対しては正しく機能しないようです。
タイプ<input type="～">: テキストフィールドのタイプを設定します。"text"が単一行、"password"が入力した文字が伏せられるテキストフィールドになります。
初期値<input value="～">: テキストフィールドに最初に表示されるテキストを入力します。例えばURLを入力するためのテキストフィールドに「http://」とあらかじめ入力しておくことで、利用者の入力を支援します。

テキストフィールド（1行）を作成する

HTML4.01

XHTML1.0

Copyright © 2012 YOHSUKE NAKANO