- HTML(えいちてぃーえむえる)とは、Hyper Text Markup Languageの略で、Webページに用いられる言語。
- タグと呼ばれる"<>"で囲われた文字列から構成される。
- HTMLエディタが登場し、さらには、ブログなどのCMSの登場により、HTMLを直接入力することは少なくなった
- しかし、ウェブページがHTMLで書かれていることには変わりはない。
- HTMLの基本を見る意味でも、HTMLを直接入力することから学習していく。
- すべてのタグは<tag>から始まり、</tag>で終わる。
- HTML文書は<HTML>で始まり、</HTML>で終わる。
- ヘッダ部、ボディ部から構成される
- ヘッダ部は<HEAD>から</HEAD>で構成され、タイトルなどの情報を記入する
- ボディ部は<BODY>から</BODY>で構成され、本文を記入する
- 段落タグ<P>や改行タグ<BR>を挿入しない限り、ブラウザでは改行は表示されない
1
2
3
4
5
6
7
8
|
<HTML>
<HEAD>
<TITLE>最初のページ</TITLE>
</HEAD>
<BODY>
ページの内容はないよう〜
</BODY>
</HTML> |
- FORMタグでで囲んだ部分(<form>〜</form>)の内側に入力のためのタグを記述する
- MethodにはGETあるいはPOST
- Actionには飛び先
<form method="[GETあるいはPOST]" ACTION="[ウェブフォームを投稿する先−例えばCGIやサーブレット]">
<input type="text" value="[初期の値]">
<input type="password" value="[初期パスワード]">
<input type="submit" value="[ボタンに表示される名前]">
- 入力ボタン(投稿)のタグ
- inputタグのタイプをresetとする
- フォームの入力内容をクリアし、初期状態に戻す
- 書式
<input type="reset" value="[ボタンに表示される名前]">
- ボタンのタグ
- inputタグのタイプをbuttonとする
- 投稿するわけではなくJavaScriptの関数を呼ぶ場合に使う
- チェックボックスのタグ
- inputタグのタイプをcheckboxとする
- ON/OFF、True/Falseなどの二択を選択させる場合に使う
- 書式
<input type="checkbox" name="[パラメータ名]" value="[入力される値]">
- 何もvalueに指定しない場合には、チェックボックスがチェックされた際には"on"が入り、チェックされていない場合にはnull値となる
- ラジオボタンのタグ
- inputタグのタイプをradioとする
- 複数の選択肢から一つを選択させる場合に使う
- 書式
<input type="radio" name="[パラメータ名]" value="[入力される値]">
- グループ化する複数のラジオボタンのタグを書くさいにname属性は同じ名前とする
- ドロップリスト、複数行リストからの選択のためのタグ
- 複数の選択肢から一つあるいは複数を選択させる場合に用いる
- 書式
<select name="[パラメータ名]" size="[行数]">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
- size属性は行数を示し、デフォルトは１でドロップリスト、2以上を指定すると複数行リストとなる
<textarea name="[パラメータ名]" cols="[1行の文字数]" rows="[行数]"></textarea>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ユーザ情報の入力</title>
</head>
<body>
<form action="dispParams.jsp" method="POST">
ユーザー名：
<!-- テキストボックス：一般的なテキスト入力 -->
<input type="text" name="ユーザ名" value="" />
<br />
パスワード：
<!-- パスワード用テキストボックス：パスワードなど内容を見せたくないものの入力に -->
<input type="password" name="パスワード"/>
<br />
性別：
<!-- ラジオボタン：複数選択肢の中で一つ -->
<input type="radio" name="性別" value="男" />男
<input type="radio" name="性別" value="女" />女
<br />
年代：
<select name="年代">
<option value="20代" selected="selected">20代かそれ以下</option>
<option value="30代">30代、40代</option>
<option value="50代">50代、60代</option>
<option value="60代">70代かそれ以上</option>
</select>
<br />
眼鏡をかけている？：
<!-- チェックボックス：trueかfalseか -->
<input type="checkbox" name="眼鏡" />
<br />
顔写真：
<!-- ファイルの入力：データをファイルの形で送信させたい場合に -->
<input type="file" name="顔写真" />
<br />
その他：<br />
<!-- テキストエリア：複数行にわたるデータの入力に -->
<textarea rows="20" cols="80" name="その他"></textarea>
<br />
<!-- 投稿ボタン：フォームの内容を投稿するボタン -->
<input type="submit" value="登録" />
<!-- 単なるボタン：何らかの機能を持たせたボタン -->
<input type="button" value="確認" />
<!-- リセットボタン：フォームの内容をクリアするボタン -->
<input type="reset" value="リセット"/>
<!-- 非表示入力：値を埋め込んで送信したい場合に -->
<input type="hidden" name="隠されたパラメータ" value="隠された値"/>
</form>
</body>
</html> |
ファイルが存在しません。
最終更新時間：2007年11月15日 00時06分32秒