HTMLの記述の仕方について

INDEX
1. タグの形式
2. HTMLの構造
3. ヘッダー部
4. ボディ部
5. 文章の構造指定
6. テキスト
7. リスト
8. コメント
9. イメージデータ
10. イメージマップ
11. ＢＧＭ
12. リンク
13. 表
14. フレーム
15. フォーム

1.タグの形式
タグ(要素)の一般形式は次のようになります。
    <要素 [属性]…> … </要素> または <要素 [属性]…>
前者の場合、 その有効範囲は、</要素> までとなります。
ただしタグ要素内に入れる要素は、「包含関係」を満たしている必要があります。 これは実際に試してみればよいでしょう。
要素名は大文字でも小文字でもかまいません。

タグには属性を指定できるものがあります（"[属性]…"がそれです。ただし、以下の説明では使用できる全ての属性を書いてはいません。 もしそれらも書くと、説明が煩雑になりすぎますし、また理解を困難にさせることになります。 なお、以下では "[属性]…"という記述は省略します）。その形式は次のようになります。

    属性[=値] または 属性="値"

サイズや太さ、位置等の値を指定する場合、値はピクセルで指定するのが一般的です。 ピクセルというのは、画面上の最小単位であるドットのことです。
共通属性としては、次のものがあります。（もちろんそれらを使用できないものがあります。）
・ALIGN={LEFT | RIGHT | CENTER | JUSTIFY}
LEFT は左寄せ、RIGHT は右寄せ，CENTER は中央、JUSTIFY は均等割付です。
ここで、{ … | … } という記述は、その中のどれか一つを選択するということを意味するものとします。
・LANG="lang"
言語属性を指定します。（通常これはあまり使いません。）
・ID="name"
name はタグ名です。（これも通常あまり使いません。）
・CLASS="name"
クラス名を付けます。（これも通常あまり使いません。）
・CLEAR={LEFT | RIGHT | ALL}
これは文章を、画像や図に回り込ませて表示するのをクリア場合する場合に使うものです。
例えば、次のように使います。
<IMG SRC="link" ALIGN=LEFT>テキスト<BR CLEAR=LEFT>
これは、テキストを画像データの右側に回り込んで表示させ、このBRタグでこの回り込み表示をクリアします。
（IMGタグやBRタグは、以下で説明されます。）

2.HTMLの構造
基本的に、HTML文書は次の構造を持ちます。
    <HTML> …… HTML文書の開始
    <HAED> …… ヘッダー部の開始
    ヘッダー部
    </HEAD> …… ヘッダー部の終了
    <BODY> …… ボディ部の開始
    ボディ部
    </BODY> …… ボディ部の終了
    </HTML> …… HTML文書の終了 ただし、フレームの場合には次のようになります。
    <HTML> …… HTML文書の開始
    <HAED> …… ヘッダー部の開始
    ヘッダー部
    </HEAD> …… ヘッダー部の終了
    <FRAMESET COLS="…" ROWS="…">
    フレーム内の各セルの文書指定
    <NOFRAMES>
    フレーム機能のない場合の表示指定
    </NOFRAMES>
    </FRAMESET>
    </HTML> …… HTML文書の終了
フレーム分割は、横方向の分割を COLS によって、また縦方向の分割を ROWS によって行います。 これらはいずれか一方だけでもかまいません。
その分割によってできたセル毎にその中に表示する文書を順に FRAME タグで指定します。 これは、左方向から右方向へ、そして上方向から下方向に向かって指定します。
NOFRAMESのタグ内にはフレーム表示機能のないブラウザに対する表示を記述します。 これは BODY 部の記述となります。または、BODY のタグを省略することもできます。

3.ヘッダー部
ヘッダー部には次のものを入れます。
    <TITLE>タイトル</TITLE>
他に言語指定とかがありますが、それは省略します。

4.ボディ部
ボディ部は、実際に表示する内容を記述するものです。
<BODY>のタグには次の属性を指定することができます。
・BGCOLOR="color"
これはボディ部の背景色を指定するものです。
colorは "#rrggbb" または color_nameを記述します。
rrggbbは赤・緑・青の各色8bitからなる24bit色（これがフルカラーと呼ばれるものです。 実際にはこれ以上のものがありますが、表示限界がこれになります）の16進値を指定します。 （背景色へ）
・BACKGROUND="link"
ボディ部の背景イメージを指定します。 link は画像データ（へのリンク）を指定します。
HTML文書で扱える画像データの形式は、GIFかJPG(またはJPEG)です。
GIFは256色で表される線画（別に線画である必要はありませんが）に向きます。
JPGは写真などのフルカラーで色が連続的に変化するような絵に向きます。
線画の場合には連続的に変化するものではないので、圧縮率が悪くなります。 　

・TEXT="color"
これはテキストの色を指定します。デフォルトでは黒になります。
・LINK="color"
未参照のリンクの色を指定します。
・VLINK="color"
参照済みのリンクの色を指定します。 あるリンクが参照済みが否かということは、ブラウザの、訪れたリンクの情報を持っているデータベースにより決定されます。 一般にこれはある日数の経過によって削除されるようになっています。
したがって、以前に読み込んだものであっても、その日数経過後はデータベースより削除されるため、ブラウザは未参照であると認識することになります。

ボディ部には以下のものを入れることができます。

5.文章の構造指定
HTMLでは、文章の構造指定がされない限り、一連の長い文として扱われます。 （改行コードによって文が改行されることはありません。 改行コードは空白文字として扱われるようです。このためそれが位置ずれの原因となるのですが、これを解消するには改行コードを入れないようにします。） また、連続した空白文字は一つの空白として扱われます。 （もし複数の空白文字を入れたい場合には、漢字の空白文字を使用するのが効果的です。）
このため、改行したり、空白を空けたりするには、そのことを指定する必要があります。
このような指定タグとしては、以下のものがあります。

・<HR>
横罫線を描きます。これには以下の属性を指定できます。
・SIZE=n
罫線の幅のサイズをピクセル値で指定します。
・WIDTH=n%
罫線の幅を画面の幅のｎ％で指定します。
・NOSHADE
影を消します。
・<CENTER>…</CENTER>
テキスト等を中央に配置します。
・<BR>
改行を行ないます。 属性としては、CLEAR="ALL/LEFT/RIGHT"を指定できます。
・<P>…[</P>]
段落を定義します。属性としてはALIGN"LEFT/CENTER/RIGHT"を指定できます。
これは直前の文を改行し、１行空白を空けます。 つまり、これは表示上は改行２つを指定したのと同じになるので、文の終わりに指定することもできますが、 文の構造定義としては、段落の先頭に置くのがよいでしょう。 </P>は<P>に属性指定していない場合には省略しても構いません。
・<DIV>…</DIV>
段落の区切り。属性としてはALIGN="LEFT/CENTER/RIGHT"を指定できます。
ただしこれは<P>と違って空白行を入れません。
・<BLOCKQUOTE>…</BLOCKQUOTE>
タグ内を引用として表示します。 これは、タグ内のものをインデントをつけて表示するものです。
インデントは後に述べる<UL>…</UL>によっても行なうことができますが、これは行頭を引っ込めるだけでなく、行末も（中に）引っ込める点が異なります。
・<PRE>…</PRE>
タグ内を整形済みのものとして表示します。 つまり、空白や改行はそのままに表示されます。 ただし、開始位置は文の構造定義によって決められる位置となります。

6.テキスト
表示するテキスト（文字列）を書きます。
テキストは一部の文字を除いてそのまま書くことができますが、表示の仕方などを変えるために以下のタグが用意されています。

・<Hn>…</Hn>
nは１から６までの数値を指定します。 これはこのタグ内の論理的レベルを示すものですが、実際はテキストの大きさを指定することになります。 レベル番号が小さいほど、大きな文字として表示されます。 （もっともこのことはブラウザに依存することですが。ブラウザには、Netscape (Navigator) やＩＥ(Internet Explore) だけでなく、 Mosaicその他のものがあり、それらは必ずしも同じように編集するとは限りません。）
・<BLINK>…</BLINK>
ブリンク表示にします。
・<FONT COLOR="color">…</FONT>
色を指定して表示します。
・<FONT SIZE=n>…</FONT>
フォントサイズを指定して表示します。もちろん色とサイズの両方も指定できます。
・<BIG>…</BIG>
タグ内を大きな文字で表示します。
・<SMALL>…</SMALL>
タグ内を小さな文字で表示します。
・<I>…</I>
タグ内を斜体で表示します。
・<STRONG>…</STRONG>
タグ内を強調して（太字で）表示します。
・<S>…</S>
タグ内を取り消し線を付けて表示します。
ただし、ブラウザが Netscape の場合、ver 3.0以上でなければなりません。
・<U>…</U>
タグ内を下線を付けて表示します。
ただし、ブラウザが Netscape の場合、ver 3.0以上でなければなりません。
・<SUP>…</SUP>
タグ内を上付添字として表示します。
・<SUB>…</SUB>
タグ内を下付添字として表示します。
・<TT>…</TT>
タグ内を等幅フォントで表示します。
・<ADDRESS>…</ADDRESS>
タグ内を署名として表示します。
・特殊文字の表示。
HTML文書内では、「<，>，&，"」は特別な意味をもつので、その文字を表示させるには、以下のように指定する必要があります。
・&lt;
'<' を表示します。
・&gt;
'>' を表示します。
・&amp;
'&' を表示します。
・&quot;
'"' を表示します。

7.リスト
リスト形式で記述するものには、以下のタグがあります。

・<OL> … </OL>
タグ内を番号付きリストとして表示します。
このタグには次の属性を指定することができます。
・TYPE="{A | a | 1 | I | i}"
リスト番号の属性を指定します。
'A'は A,B,C,… で、'a'は a,b,c,… で、'1'は 1,2,3,…で、'I'は I,II,III,… で、'i'は i,ii,iii,… で表示します。
ただし、これはＩＥでは対応していません。
・START=n
リスト番号の初期値を指定します。

各リストは、<LI>より開始します。
リストは入れ子にすることができます。

・<UL>…</UL>
タグ内を番号なしリストとして表示します。
各リストは、<LI>より開始します。

・<DL>…</DL>
タグ内を用語定義リストとして表示します。 
この中に定義したいものと、その説明を書きます。
   定義する用語は、「<DT>テキスト等」で書きます。
   その説明は、「<DD>テキスト等」で書きます。
これは単に次のように段をつけて表示するものです。
   定義１
          説明１
   定義２
          説明２
   ………………

8.コメント
文書のある範囲をコメント化するには、次のようにします。
　　<!-- … -->

9.イメージデータ
イメージデータの指定は、次のようにします。
　　<IMG SRC="link">
link は画像データを指定します。

このタグには次の属性も指定できます。

・ALIGN={TOP | MIDDLE | BOTOM} または {LEFT | RIGHT | CENTER}
画像データの配置を指定します。
TOP は画像データをテキストとは上の端で一致させます。
MIDDLE は画像データをテキストとは中央で一致させます。
BOTOM は画像データをテキストとは下の端で一致させます。省略時にはこれになります。
LEFT は画像データを左端に配置させます。
RIGHT は画像データを右端に配置させます。
CENTER は画像データを中央に配置させます。
・ALT="text"
画像データの代わりに表示させるテキストを記述します。
・BORDER=n
枠の太さを指定します。
リンク指定の画像の枠を表示しないようにするには、"BORDER=0"と指定します。
・HSPACE=n
横の間隔を指定します。
・VSPACE=n
縦の間隔を指定します。
・WIDTH={n|n%}
画像データの表示の横幅を指定します。
・HEIGHT={n|n%}
画像データの表示の縦幅を指定します。
・USEMAP="[html]#name"}
イメージマップとの関連付けをします。[htmlは文書ファイルのURL、nameはイメージマップの名称です。

10.イメージマップ
イメージマップは、これに関連付けしているイメージデータを元にして、各エリア内をクリックして、該当のイメージを表示させるようにするためのものです。 　

イメージマップの指定は、次のようにします。
　　<MAP NAME="name"> … </MAP>
name は当マップの名称です。

このタグ内には各エリアを定義する AREAタグを記述します。
AREAタグの指定は、次のようにします。
　　<AREA 属性>
このタグの属性としては、次のものを記述します。

・SHAPE={RECT | CIRCLE | POLY | DEFAULT}
エリアの形を定義します。
RECT はrectangleの略で、四角形にします。
CIRCLE は、円形にします。
POLY はpolygonの略で、多角形にします。
・COORDS="x1,y1,x2,y2[,…]"
エリアの座標位置を指定します。
四角形の場合には、左上と右下の二点の座標を、円形の場合には、中央の座標と円上の任意の座標一つを、多角形の場合には、各角の座標をリスト形式で指定します。
・HREF=url
クリックしたときに表示する画像データや文書を urlで指定します。
・NOHREF
クリックの除外領域を指定したい場合に使用します。

11.BGM(バックグラウンドミュージック)
BGMの指定は次のようにします。
　　<BGSOUND SRC="link" [LOOP={n | INFINITE}]>
link はBGMソースの指定です。

12.リンク
リンク関連のタグには以下のものがあります。

・<A NAME="name">
文書内に name という名前を付けます。これはアンカーと呼ばれます。
・<A HREF="html">…</A>
他の文書の参照です。つまり、他の文書へのリンクです。ここで、html はその文書へのリンク名です。
リンクの指定には相対指定と絶対指定とがあります。
相対指定は、現在の文書がある場所からの指定です。
例えば、'images/a.gif' は現文書があるディレクトリ（フォルダとも）の images という
ディレクトリにある a.gif を指します。
大抵、多くの文書は相対指定になってします。その為、それをパソコン上にコピーして、
それをブラウザから読み込んでもうまくリンクされないということがよくあります。
これは、文書の場所が変わったことによるものです。

絶対指定は、URL(Uniform Resource Locator) で指定します。 （もっとも相対指定もURL形式とみなされます。） つまり、URLというのはインターネット上の資源識別のための一定形式のことで、これは次の形式のものです。

    access://server/path

access はアクセス方法を指定するもので、普通は 'http' です。
'http' は HyperText Transfer Protocolの略です。他には 'ftp' がありますが、これは File Transfer Protocolの略です。
server はサーバーを指定するものです（サーバーとはクライアントの要求に対して応えるものという意味のものです）。
世界中の（WWWサーバーとなる）コンピュータは番号が付けられ、一意的に管理されています。そこで、この番号を指定します。
また、それには名前も付けられています。したがって、この名前でも指定できます。

path はサーバー内のパス名です。このパスの指定の仕方には次の二種類があります。

・path
これは実際には、/usr/local/etc/httpd/pathを指します。
・~user/path
これは実際には、/home/user/public_html/pathを指します。
ここで、public_html はサーバーによって異なることがあります。
もし path を省略した場合には、~user/index.html が読み込まれます。
一般にファイル名を省略した場合には、そのディレクトリに index.html があれば、 それが読み込まれ、もしなければそのディレクトリ配下のファイルのリストが表示されます （ただし、これはそのディレクトリが任意のユーザーに対してアクセス権限がある場合ですが）。
ここで注意しなければならない点を挙げると、Windows95の出現によって、パソコン上（ここではMicrosoftのＯＳを仮定しています）でも ８．３形式のファイル名から解放されて、UNIX(ほとんどのサーバーはワークステーションであり、 そのOSはUNIXとなっています）のファイル名と同じようになりましたが、まだ決定的に違うのは、 パソコン上ではファイル名の大文字と小文字を区別しないのに対して、UNIX上ではその区別があることです。 したがって、パソコン上でテストしてうまくいっても、実際にUNIX上にコピーして動かした場合、 必ずしも正常に動くということにはなりません（ですからこのテストも必要となります）。
余談ながら、UNIXでは ~(チルダ)は、ユーザーのホームディレクトリである/home/userを指します。

リンク指定としては、文書だけでなく、メールアドレスも指定することができます。
これは次のように指定します。
    <A HREF="mailto:user@host_name"> … </A>
user: ユーザＩＤ
host_name: ホスト名(domain name)

・<A HREF="#name"> …</A>
文書内の name というアンカーに移動します。

・<A HREF="html#name">…</A>
html 文書内の name(アンカー)へのリンクです。

・<A HREF="html[#name]" TARGET="cell_name">…</A>
これは指定文書をフレーム内のcell_nameというセルに表示させるものです。
注，この指定は、<HEAD>内で、BASEタグを用いて行なうこともできます。
　　例えば、<BASE TARGET="right">とすると、rightというセルに表示することになります。

・<A HREF="html" TARGET={_top | _blank | _self | _parent}>…</A>
これは、指定文書を表示させる場合、下記のように行なうものです。
・_top
文書をフルウィンドウで表示します。
・_blank
文書を別のウィンドウを開いて表示させます。
・_self
文書を現在のフレームに表示させます。
・_parent
文書を一つ上の親フレームに表示します。

13.表
表を表示するには、次のタグを使用します。
　　<TABLE>…</TABLE>

このタグには（共通属性以外に）次の属性を記述することができます。

・BORDER[=n]
nピクセルの外枠を表示します。
この指定がない場合には、テーブルの枠は表示されません。
・CELLPADDING=n
セル枠とセルの文字列との間をｎピクセル空けます。 このデフォルトは、"CELLPADDING=2" になります。
・CELLSPACING=n
nピクセルのセル枠を表示します。
・WIDTH=n%
表の横幅を画面の幅のｎ％にします。
・HIGHT=n%
表の縦幅を画面の幅のｎ％にします。

このタグ内には次のものを記述します。

・<CAPTION>タイトル等</CAPTION>
表のタイトル等を記述します。これは省略できます。
・<TR>… </TR>
TRタグで各行を記述します。
このタグには次の属性を指定することができます。 　
・ALIGN={LEFT | RIGHT | CENTER}
セル（テーブルの各欄のこと）の横方向の配置を指定します。
・VALIGN={TOP | MIDDLE | BOTOM}
セルの縦方向の配置を指定します。 　
・BGCOLOR="color"
セルの背景色を指定します。

このタグ内には以下のものを記述します。　

・<TH>［見出し］</TH>
行または列の見出しを記述します。これは太字で、中央に配置されて表示されます。これには次の属性を記述できます。
・ALIGN={LEFT | RIGHT | CENTER}
セルの横方向の配置を指定します。
・VALIGN={TOP | MIDDLE | BOTOM}
セルの縦方向の配置を指定します。
・WIDTH=n[%]
セルの横の長さを指定します。
・HEIGHT=n[%]
セルの縦の長さを指定します。
・NOWRAP
セル内で改行しないようにさせます。
・ROWSPAN=n
ｎ行にまたがったセルを作ります。この場合、次の該当行の指定ではこの欄は飛ばして指定します。
例えば、２行にまたがる場合、次の行の当セルに対する指定はしません。
・COLSPAN=n
ｎ列にまたがったセルを作ります。
・<TD>データ</TD>
データを記述します。これには次の属性を記述できます。
・ALIGN={LEFT | RIGHT | CENTER}
セルの横方向の配置を指定します。
・VALIGN={TOP | MIDDLE | BOTOM}
セルの縦方向の配置を指定します。
・WIDTH=n[%]
セルの横の長さを指定します。
・HEIGHT=n[%]
セルの縦の長さを指定します。
・NOWRAP
セル内で改行しないようにさせます。
・ROWSPAN=n
ｎ行にまたがったセルを作ります。
・COLSPAN=n
ｎ列にまたがったセルを作ります。

見出しやデータには、文字だけでなく、画像データやアンカーなども書くことができます。

例えば、以下は
    <TABLE BORDER=3 WIDTH=60% CELLPADDING=3 CELLSPACING=2>
    <CAPTION>曲名リスト</CAPTION>
    <TR><TH>artist name</TH><TH>album title</TH><TH>song name</TH></TR>
    <TR><TH>Carpenters</TH><TD>Close to you</TD><TD>Close to you</TD></TR>
    <TR><TH>Pink Floyd</TH><TD>The dark side of the moon</TD><TD>Speak to me</TD></TR>
    </TABLE>
次のようになります。
    曲名リスト
    artist namealbum titlesong name
    CarpentersClose to youClose to you
    Pink FloydThe dark side of the moonSpeak to me

14.フレーム
文書を分割して表示するには、フレームを使用します。
これは文書の分割の仕方を指定し、その分割によってできる各セル内の文書を指定します。

フレームは、次のタグで指定します。
　　<FRAMESET COLS="{n|n%|*},…" ROWS="{n|n%|*},…">…</FRAMESET>
フレームの分割は、ピクセルで指定する場合と、比率で指定する場合、そして * で残りを指定するという３つのものが可能です。
このタグには、COLS や ROWS の属性の他に次のものも指定することができます。

・BORDER="n"
セルの枠線の太さを指定します。
・FRAMEBORDER="NO"
フレームの枠線の影を消します。
・BORDERCOLOR="color"
セルの枠線の色を指定します。

次に、フレーム内のセルの定義ですが、これは FRAME タグによって指定します。 このタグには次の属性を指定することができます。

・SRC="html"
セル内に表示する文書を指定します。
・NAME="cell_name"
セルに名称を付けます。セル内の文書からある文書をフレーム内に表示する場合、 どのセルかということは、この名前によって識別されます。 例えば、
    <A HREF="a.html" TARGET="CELL_A">…</A>
とした場合、a.html は CELL_A というセル内に表示されます。
・MARGINWIDTH="n"
セル内に表示する文書とセル枠との横方向の間隔をピクセルで指定します。
・MARGINHEIGHT="n"
セル内に表示する文書とセル枠との縦方向の間隔をピクセルで指定します。
・NORESIZE
セルサイズを変更不可にします。
・SCROLLING="{YES|NO|AUTO}"
スクロールの指定をします。

15.フォーム
フォームはホームページを見ている人から情報を受け取ったり、動作をインタラクティブに行うことを可能とするものです。

これは、次のタグで指定します。
　　<FORM ENCTYPE="type" METHOD="method" ACTION="action"> … </FORM>

type は、フォームデータを送信するContent-Typeの指定です。
ディフォルトは、'application/x-www-form-urlencoded'になっていて、これはFORMの各入力要素を一つのファイルとして送信します。 ただし、これはASCIIコード以外は全て16進数に変換されるので文字化けします。
これに対して、'multipart/form-data'は各入力要素に分けて送信します。 また、符号化方式もセットで送信されますが、メールを受け取るソフト側がそのエンコードに対応していないと文字化けしてしまいます。

method は、通常 'POST'を指定します。

action は、サーバー側のプログラムを指定します。
普通、これはHTMLのテキストを返すようなプログラムを指定します。 これには、シェルやPERLで書かれたスクリプトファイルがありますが、ユーザーは勝手にそのようなプログラムを登録することはできません。 というのは、コンピュータ上のセキュリティ問題が生じるからです。

このタグ内には次のものを入れることができます。

・<INPUT NAME="input_name" [SIZE="n1"] [MAXLENGTH="n2]">
テキスト入力フィールドを記述します。input_name はこのフィールドの名前です。
・<TEXTAREA NAME="textbox_name" [ROWS="n1"] [COLS="n2"]></TEXTAREA>
テキストボックスフィールドを記述します。textbox_name はこのフィールドの名前です。
・<INPUT TYPE="PASSWD" NAME="password" SIZE="1" MAXLENGTH="1">
パスワード入力フィールドを記述します。password はこのフィールドの名前です。
・<INPUT NAME="button_name" TYPE=RADIO VALUE="value" [CHECKED]>テキスト等
１つだけの選択ボタンを記述します。button_name はこのボタンの名前です。
一般にこれは複数指定します。それらはボタン名によって分類されます。
value は、このボタンの値を記述します。
CHECKEDは、初めにこのボタンを選択状態にします。
テキスト等は、このボタンの説明等を記述します。もちろん、これはこのボタンの前に書いてもかまいません。
・<INPUT NAME="button_name" TYPE=CHECKBOX VALUE="value" [CHECKED]>テキスト等
これは、チェックボタンを記述します。パラメータの意味は選択ボタンと同じです。
・<SELECT NAME="select_name" [SIZE=n] [MULTIPLE]> …</SELECT>
ポップアップメニューを表示します。
MULTIPLE を指定した場合、複数の選択になります。 この中には、次のものを記述します。
<OPTION [VALUE="value"] [SELECTED]> 表示内容 </OPTION>
value は、このオプションにつけられる値です。これを省略した場合には、表示内容が設定されます。
SELECTEDは初期選択項目を指定するものです。これを省略した場合は、先頭のものが選択されます。
ポップアップメニューの例を示すと、

    科目名<SELECT NAME="list1" SIZE=1>
    <OPTION>数学</OPTION>
    <OPTION>英語</OPTION>
    <OPTION>国語</OPTION>
    </SELECT>

では、次のようになります。
    科目名
・<INPUT TYPE=SUBMIT VALUE="text">
これは送信ボタンを記述します。text はこのボタン表示のテキストです。
少なくともこれだけは必要です。
・<INPUT TYPE=RESET VALUE="text">
これはリセットボタンです。text はこのボタン表示のテキストです。
すなわち、これはフォーム内をリセットします。