トップ 新規 編集 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

HTMLの基本

HTMLの基本

 HTMLとは

  • HTML(えいちてぃーえむえる)とは、Hyper Text Markup Languageの略で、Webページに用いられる言語。
    • タグと呼ばれる"<>"で囲われた文字列から構成される。
  • HTMLエディタが登場し、さらには、ブログなどのCMSの登場により、HTMLを直接入力することは少なくなった
    • しかし、ウェブページがHTMLで書かれていることには変わりはない。
  • HTMLの基本を見る意味でも、HTMLを直接入力することから学習していく。

 基本的なHTML文書

  1. すべてのタグは<tag>から始まり、</tag>で終わる。
  2. HTML文書は<HTML>で始まり、</HTML>で終わる。
  3. ヘッダ部、ボディ部から構成される
  4. ヘッダ部は<HEAD>から</HEAD>で構成され、タイトルなどの情報を記入する
  5. ボディ部は<BODY>から</BODY>で構成され、本文を記入する
  6. 段落タグ<P>や改行タグ<BR>を挿入しない限り、ブラウザでは改行は表示されない
1
2
3
4
5
6
7
8
<HTML>
  <HEAD>
    <TITLE>最初のページ</TITLE>
  </HEAD>
  <BODY>
    ページの内容はないよう〜
  </BODY>
</HTML>

 ウェブフォーム

  • FORMタグでで囲んだ部分(<form>〜</form>)の内側に入力のためのタグを記述する

formタグの書式

    • MethodにはGETあるいはPOST
    • Actionには飛び先
<form method="[GETあるいはPOST]" ACTION="[ウェブフォームを投稿する先−例えばCGIやサーブレット]">

 入力のためのタグ

INPUTタグ[TEXT]

  • テキストフィールドのタグ
    • inputタグのタイプをtextとする
  • 書式
<input type="text" value="[初期の値]">

INPUTタグ[PASSWORD]

  • パスワードフィールドのタグ
    • inputタグのタイプをpasswordとする
  • 書式
<input type="password" value="[初期パスワード]">

INPUTタグ[SUBMIT]

  • 入力ボタン(投稿)のタグ
    • inputタグのタイプをsubumitとする
  • 書式
<input type="submit" value="[ボタンに表示される名前]">

INPUTタグ[RESET]

  • 入力ボタン(投稿)のタグ
    • inputタグのタイプをresetとする
    • フォームの入力内容をクリアし、初期状態に戻す
  • 書式
<input type="reset" value="[ボタンに表示される名前]">

INPUTタグ[BUTTON]

  • ボタンのタグ
    • inputタグのタイプをbuttonとする
    • 投稿するわけではなくJavaScriptの関数を呼ぶ場合に使う

INPUTタグ[CHECKBOX]

  • チェックボックスのタグ
    • inputタグのタイプをcheckboxとする
    • ON/OFF、True/Falseなどの二択を選択させる場合に使う
  • 書式
<input type="checkbox" name="[パラメータ名]" value="[入力される値]">
    • 何もvalueに指定しない場合には、チェックボックスがチェックされた際には"on"が入り、チェックされていない場合にはnull値となる

INPUTタグ[RADIO]

  • ラジオボタンのタグ
    • inputタグのタイプをradioとする
    • 複数の選択肢から一つを選択させる場合に使う
  • 書式
<input type="radio" name="[パラメータ名]" value="[入力される値]">
    • グループ化する複数のラジオボタンのタグを書くさいにname属性は同じ名前とする

select-optionタグ

  • ドロップリスト、複数行リストからの選択のためのタグ
    • 複数の選択肢から一つあるいは複数を選択させる場合に用いる
  • 書式
<select name="[パラメータ名]" size="[行数]">
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
</select>
    • size属性は行数を示し、デフォルトは1でドロップリスト、2以上を指定すると複数行リストとなる

textareaタグ

  • テキストエリアタグ
    • 複数行のテキストを入力させる場合に用いる
  • 書式
<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>

表示例

ファイルが存在しません。


 HTMLを書く上でのインターネット上の情報源

最終更新時間:2007年11月15日 00時06分32秒