#author("2020-02-26T18:23:55+09:00;2020-02-02T17:37:04+09:00","default:inoue.ko","inoue.ko") #author("2020-05-11T13:44:55+09:00;2020-02-26T18:23:55+09:00","default:inoue.ko","inoue.ko") *HTML Sample Code [[HTML]]｜[[HTML/Tags]]｜[[HTML/Sample]]｜[[HTML/Tips]] ~ 見出しと本文、ハイパーリンクなど、必要最小限の要素を含むサンプルを 以下に紹介します。構文形式は、HTML5 です。 ~ ***事例１ [[→DEMO 最も基本的なページ構造の例です。>https://design.kyusan-u.ac.jp/SampleSite/HTML01/]] ''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> 全体のレイアウトや背景色、文字のサイズといった、ページのビジュアルに関することはすべて外部スタイルシートに書く…という方法を推奨しています。 したがってここでは、ヴィジュアルに関する記述は行っていません。 &aname(html_form); ~ ~ ***事例２ [[→DEMO フォームの表示サンプルです。>https://design.kyusan-u.ac.jp/SampleSite/HTML02/]] ''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ドライブ｜アンケートサンプル>https://docs.google.com/forms/d/1cRbLz8hVL7VbyzQFnjdmuY_AkOXV6EBxq1JlBJ8Tdsg/viewform]] アンケートの結果は、即グラフ化して表示可能、Googleドライブ内のスプレッドシートへもまとめられますので、非常に便利です。 ＜iframe＞形式でページへの埋め込みコードも提供されますので、あなたのHTMLに埋め込むのも簡単です。 ~ ~ ~