LogoMark.png

HTML/Sample

HTML Sample Code

HTMLHTML/TagsHTML/SampleHTML/Tips

見出しと本文、ハイパーリンクなど、必要最小限の要素を含むサンプルを
以下に紹介します。構文形式は、HTML5 です。

事例1 →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>
           &copy;2016 Your Signature
    </footer>
  </div>
</body>
</html>

全体のレイアウトや背景色、文字のサイズといった、ページのビジュアルに関することはすべて外部スタイルシートに書く…という方法を推奨しています。
したがってここでは、ヴィジュアルに関する記述は行っていません。


事例2 →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などのプログラミング技術が必要です)。

事例2の補足

以下のフォームは、Google検索を活用するコードで、実際に動きます。

<form action="http://www.google.com/search" method="get">
  <label >Google: </label>
  <input type="search" name="q">
</form>


事例2の補足 その2

Googleドライブの「フォーム」を利用すると、自力でフォームをつくる手間を省くことができます。Googleのアカウントがあれば、誰でも自由に使えるので、お試し下さい。以下のようなアンケートが簡単に作れます。

アンケートの結果は、即グラフ化して表示可能、Googleドライブ内のスプレッドシートへもまとめられますので、非常に便利です。
<iframe>形式でページへの埋め込みコードも提供されますので、あなたのHTMLに埋め込むのも簡単です。





PAGES

GUIDE

DATA

Last-modified: 2020-02-26 (水) 18:23:55