<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=x-euc-jp">
<TITLE>form layout</TITLE>
</HEAD>
<BODY BGCOLOR="#FCFCFC">
<CENTER>
<H2>フォームの見た目が綺麗なように</H2>
</FONT>
</CENTER>
<HR>
PREタグやTABLEを使って<CODE>formtag.html</CODE>を綺麗にしてみました。
特に断りがない場合は、TABLEタグを使っています。
<HR>
<FORM METHOD="POST" ACTION="/cgi-isc/cgiwrap/miuraj/post1.pl">
<P>
<TABLE>
<TR><TD COLSPAN=2>
以下は&lt;INPUT&gt;タグを使っています。文字の入力に対しては、TYPE属性をtextに指定します。
</TD></TR>
<TR><TD ALIGN=RIGHT>NAME</TD><TD><INPUT TYPE="text" NAME="NAME" SIZE=20></TD></TR>
<TR><TD ALIGN=RIGHT>Email</TD><TD><INPUT TYPE="text" NAME="EMAIL" SIZE=30></TD></TR>
<TR><TD ALIGN=RIGHT>URL</TD><TD><INPUT TYPE="text" NAME="URL" SIZE=10></TD></TR>
</TABLE>
<HR>
<TABLE>
<TR>
<TD>以下は&lt;INPUT&gt;タグでTYPE属性にcheckboxを指定しています。
複数選択が可能です。</TD>
<TD>以下は&lt;INPUT&gt;タグでTYPE属性にradioを指定しています。
複数選択はできません。</TD>
<TD>
以下は&lt;SELECT&gt;タグを使っています。
</TD>
</TR>
<TR>
<TD ALIGN=CENTER>
<INPUT TYPE="checkbox" NAME="film" VALUE="FUJI">富士<BR>
<INPUT TYPE="checkbox" NAME="film" VALUE="KONICA">コニカ<BR>
<INPUT TYPE="checkbox" NAME="film" VALUE="KODAK">コダック<BR>
<INPUT TYPE="checkbox" NAME="film" VALUE="AGFA">アグファ<BR>
ここは変でしょ?
</TD>
<TD>
<INPUT TYPE="radio" NAME="lens" VALUE="35">35mm<BR>
<INPUT TYPE="radio" NAME="lens" VALUE="50">50mm<BR>
<INPUT TYPE="radio" NAME="lens" VALUE="90">90mm<BR>
<INPUT TYPE="radio" NAME="lens" VALUE="135">135mm<BR>
こっちはいいですよね?
</TD>
<TD ALIGN=CENTER>
<SELECT NAME="camera" size=3>
<OPTION SELECTED>Nikon
<OPTION>Canon
<OPTION>Olympus
<OPTION>Contax
<OPTION>Mamiya
<OPTION>Leica
<OPTION>Balda
</SELECT>
<BR>
TDタグのALIGN属性にCENTERを
指定するなら、こういう時に
</TD>
</TR>
</TABLE>
<HR>
<PRE>
(ここではPREタグを使ってみました。)
以下は&lt;INPUT&gt;タグでTYPE属性にhiddenを指定しています。
ソースを見て下さい。
<INPUT TYPE="hidden" NAME="naisho" VALUE="hogehoge">
</PRE>
<HR>
<TABLE>
<TR>
<TD>
(恰好悪い例)<BR>
以下は&lt;TEXTAREA&gt;タグを使っています。
</TD>
<TD>
<TEXTAREA NAME="comment" COLS=40 ROWS=4>
何を入れても動きまへんでぇ。
</TEXTAREA>
</TD></TR>
</TABLE>
<HR>
(もう一度、PREタグを使ってみました。)
<PRE>
以下は&lt;INPUT&gt;タグのTYPE属性に、SUBMIT,RESETを指定しています。
<INPUT TYPE="SUBMIT" VALUE="申込み">	<INPUT TYPE="RESET" VALUE="取り止め">
</PRE>
</FORM>
<HR>
<A HREF="../index.html">三浦のページ</A><P>
<HR>
<ADDRESS>
miuraj@isc.meiji.ac.jp
</ADDRESS>
</BODY>
</HTML>
