LogoMark.png

HTML/Sample の変更点


#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 です。
~

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

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

~
***事例2 [[→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:メッセージの書き込み投稿、新規データの登録など・・
~

***事例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ドライブ|アンケートサンプル>https://docs.google.com/forms/d/1cRbLz8hVL7VbyzQFnjdmuY_AkOXV6EBxq1JlBJ8Tdsg/viewform]]

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