HTML/Sample
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン概論/2025
ソーシャルデザイン演習/2025
情報デザイン論/2025
情報デザイン演習IIA/2025
コンピュータ概論/2025
3DCG演習/2025
情報デザイン研究/2025
卒業研究/2025
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*HTML Sample Code
[[HTML]]|[[HTML/Tags]]|[[HTML/Sample]]|[[HTML/Tips]]
~
見出しと本文、ハイパーリンクなど、必要最小限の要素を含む...
以下に紹介します。構文形式は、HTML5 です。
~
***事例1 [[→DEMO 最も基本的なページ構造の例です。>http...
''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);
~
~
***事例2 [[→DEMO フォームの表示サンプルです。>https://...
''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" si...
MESSAGE : <br>
<textarea name="message" rows="4" cols="40">
ここにメッセージを入力して下さい。
</textarea>
<br>
FILE : <input type="file" name="file"><br>
CHECK : <input type="checkbox" name="check" ...
<input type="checkbox" name="check" ...
<input type="checkbox" name="check" ...
RADIO : <input type="radio" name="radio" val...
<input type="radio" name="radio" val...
DATE : <input type="date" name="date"><br>
TIME : <input type="time" name="time"><br>
NUMBER : <input type="number" min="0" max="1...
RANGE : <input type="range" min="0" max="100...
PASS : <input type="password" name="password...
<input type="submit" name="submit" value="送...
</form>
<p>サンプルです。送信しても何も起こりません.</p>
</main>
</body>
</html>
上のサンプルは、あくまでフォームの表示サンプルです。
送信ボタンを押しても何も起こりません。通常は、
<form action="example.php" method="post" >
:
<input type="submit" value="送信する">
</form>
などのように、送信ボタンの押下に対し、example.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ドライブ|アンケートサンプル>https://docs.google...
アンケートの結果は、即グラフ化して表示可能、Googleドライ...
<iframe>形式でページへの埋め込みコードも提供されますの...
~
~
~
終了行:
*HTML Sample Code
[[HTML]]|[[HTML/Tags]]|[[HTML/Sample]]|[[HTML/Tips]]
~
見出しと本文、ハイパーリンクなど、必要最小限の要素を含む...
以下に紹介します。構文形式は、HTML5 です。
~
***事例1 [[→DEMO 最も基本的なページ構造の例です。>http...
''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);
~
~
***事例2 [[→DEMO フォームの表示サンプルです。>https://...
''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" si...
MESSAGE : <br>
<textarea name="message" rows="4" cols="40">
ここにメッセージを入力して下さい。
</textarea>
<br>
FILE : <input type="file" name="file"><br>
CHECK : <input type="checkbox" name="check" ...
<input type="checkbox" name="check" ...
<input type="checkbox" name="check" ...
RADIO : <input type="radio" name="radio" val...
<input type="radio" name="radio" val...
DATE : <input type="date" name="date"><br>
TIME : <input type="time" name="time"><br>
NUMBER : <input type="number" min="0" max="1...
RANGE : <input type="range" min="0" max="100...
PASS : <input type="password" name="password...
<input type="submit" name="submit" value="送...
</form>
<p>サンプルです。送信しても何も起こりません.</p>
</main>
</body>
</html>
上のサンプルは、あくまでフォームの表示サンプルです。
送信ボタンを押しても何も起こりません。通常は、
<form action="example.php" method="post" >
:
<input type="submit" value="送信する">
</form>
などのように、送信ボタンの押下に対し、example.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ドライブ|アンケートサンプル>https://docs.google...
アンケートの結果は、即グラフ化して表示可能、Googleドライ...
<iframe>形式でページへの埋め込みコードも提供されますの...
~
~
~
ページ名: