HTML Sample Code
HTML｜HTML/Tags｜HTML/Sample｜HTML/Tips
見出しと本文、ハイパーリンクなど、必要最小限の要素を含むサンプルを
以下に紹介します。構文形式は、HTML5 です。
事例１ →DEMO 最も基本的なページ構造の例です。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample Site</title>
</head>
<body>
<div id="container">
<header>
<h1>Sample Page</h1>
</header>
<nav>
<ul>
<li><a href="#">top</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
<li><a href="#">about</a></li>
</ul>
</nav>
<article>
<h1>見出し</h1>
<p>
段落本文、段落本文、段落本文、<br>
段落本文、段落本文。
</p>
</article>
<footer>
©2016 Your Signature
</footer>
</div>
</body>
</html>
全体のレイアウトや背景色、文字のサイズといった、ページのビジュアルに関することはすべて外部スタイルシートに書く…という方法を推奨しています。
したがってここでは、ヴィジュアルに関する記述は行っていません。
事例２ →DEMO フォームの表示サンプルです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample Site</title>
</head>
<body>
<header>
<h1>FORM SAMPLE</h1>
</header>
<main>
<form action="" method="">
NAME : <input type="text" name="name"><br>
E-mail : <input type="email" name="email" size="40"><br>
MESSAGE : <br>
<textarea name="message" rows="4" cols="40">
ここにメッセージを入力して下さい。
</textarea>
<br>
FILE : <input type="file" name="file"><br>
CHECK : <input type="checkbox" name="check" value="1">A
<input type="checkbox" name="check" value="2">B
<input type="checkbox" name="check" value="3">C<br>
RADIO : <input type="radio" name="radio" value="1">合格
<input type="radio" name="radio" value="2">不合格<br>
DATE : <input type="date" name="date"><br>
TIME : <input type="time" name="time"><br>
NUMBER : <input type="number" min="0" max="10" name="num"><br>
RANGE : <input type="range" min="0" max="100" name="range"><br>
PASS : <input type="password" name="password" value="******"><br>
<input type="submit" name="submit" value="送信"><br>
</form>
<p>サンプルです。送信しても何も起こりません.</p>
</main>
</body>
</html>
上のサンプルは、あくまでフォームの表示サンプルです。
送信ボタンを押しても何も起こりません。通常は、
<form action="example.php" method="post" >
：
<input type="submit" value="送信する">
</form>
などのように、送信ボタンの押下に対し、example.php のようなプログラムをサーバー内で動かすことで、送信内容が処理されます（PHPなどのプログラミング技術が必要です）。
- action属性：どのようなプログラムを動かすか（どこへ送るか）
- method属性：get / post
- get：データベースにキーワードを送って検索結果を取り出すなど・・
- post：メッセージの書き込み投稿、新規データの登録など・・
事例２の補足
以下のフォームは、Google検索を活用するコードで、実際に動きます。
<form action="http://www.google.com/search" method="get"> <label >Google: </label> <input type="search" name="q"> </form>
事例２の補足 その２
Googleドライブの「フォーム」を利用すると、自力でフォームをつくる手間を省くことができます。Googleのアカウントがあれば、誰でも自由に使えるので、お試し下さい。以下のようなアンケートが簡単に作れます。
アンケートの結果は、即グラフ化して表示可能、Googleドライブ内のスプレッドシートへもまとめられますので、非常に便利です。
＜iframe＞形式でページへの埋め込みコードも提供されますので、あなたのHTMLに埋め込むのも簡単です。