フォームの基本

• 一口にフォームと言ってもたくさんの種類があるんです。
  ここでは基本的なフォームの種類を説明してみます。

●ラジオボタン

　　　               　　　YES　　　　NO　　　　

　　　　　※アンケートなどでよく見かけるやつですね。（あくまでもサンプルです）
　　　　◆ソース（書式）

　　　　　　　　　　　　<FORM><INPUT type="radio" value="yes" name="yesno">　YES　　　<INPUT type="radio" value="no" name="yesno">　NO</FORM>

　　　　　※<INPUT〜>を増やせば、項目は無限に作れます。
　　　　　※サンプルは横型ですが、縦に増やしていくこともできます。
　　　　　　　<INPUT〜〜>　言葉
　　　　　　<INPUT〜〜>　言葉　　←のように重ねて書いていけばいいです。

●チェックボックス

　　　　　　　　　　　　　納豆　　　　ゴーヤ　　　ラーメン

　　　　　※これもアンケートで使われる代表的なやつですね。（これもサンプルです）
　　　　◆ソース（書式）

　　　　　　　　　　　　<FORM><INPUT type="checkbox" name="check1" value="soybeans">　納豆　　　<INPUT type="checkbox" name="check2" value="goya">　ゴーヤ　　<INPUT type="checkbox" name="check3" value="ra_men">　ラーメン</FORM>

　　　　　※ここも上と同じで、重ねて組むことで縦に表示できます。

●一行テキストボックス

　　　　　　　　　　お名前　

　　　　　※アンケートや送信フォームなどに使われ、入力可能な設定もできます。
　　　　◆ソース（書式）

　　　　　　　　　　　　<FORM> 　お名前を入力　<INPUT size="30" type="text" name="textbox1" value="お名前を入力" maxlength="30"></FORM>

　　　　　※あくまでもサンプルに忠実にソースにしてますので、あしからず。

●テキストボックス

　　　　　　　　　　　　　　　　　一言ご感想をどうぞ
　　　　　　　　　　使い道の幅が広いです。

　　　　　※とても使い道が広く、重宝するフォームのひとつですね。
　　　　　　 ここでも、ソースの表示用として使っていますね。
　　　　◆ソース（書式）

　　　　　　　　　　　　<FORM>　　　　　　　　　　　　　　　　　一言ご感想をどうぞ<BR> 　　　　　　　　　　<TEXTAREA rows="2" cols="35" name="text01">使い道の幅が広いです。</TEXTAREA></FORM>

　　　　　※入力以外のエリアとして使う場合は、 readonly　と入れるといいですね。
　　　　　　 入力エリアとして使う場合は、入れないようにね。

●リストボックス

　　　　　　　　　　　　　　　　　　　キリ番ゲッターさん

　　　　　　　　　　　　　　 1000番・・・・・・ごんべぇさん 1111番・・・・・・さくらちゃん 1212番・・・・・・矢田部弥太郎さん 1221番・・・・・・夜桜お銀さん 1331番・・・・・・なんでも食う太郎さん

　　　　　※これも使い道は様々ですが、上のような使い方をしてみたり、選択でリンクさせてみ
　　　　　　 たりと、かなり使えるフォームですね。
　　　　◆ソース（書式）

　　　　　　　　　　　　<FORM>　　　　　　　　　　　　　　　　　<B>　　キリ番ゲッターさん</B><BR> 　　　　　　　　　　　　　　<SELECT size="3" name="list1"> <OPTION>1000番・・・・・・ごんべぇさん</OPTION> <OPTION>1111番・・・・・・さくらちゃん</OPTION> <OPTION>1212番・・・・・・矢田部弥太郎さん</OPTION> <OPTION>1221番・・・・・・夜桜お銀さん</OPTION> <OPTION>1331番・・・・・・なんでも食う太郎さん</OPTION> </SELECT></FORM>

　　　　　　※更新記録などに使用している方もよく見かけますね。
　　　　　　※これも<OPTION></OPTION>で無限に増やせます。

●オプションメニュー（プルダウンメニュー）

　　　　　　　　　　　　　　　　　　選択した場所に飛べます

　　　　　　　　　　　　　　　           　 乱ちゃん家 わんこん家 LINK3 LINK4 LINK5 LINK6

　　　　　※実際にはリンクは張ってませんが、こういう使い方をしているところが多いですね。
　　　　　※送信などと対で使うと効果的なフォームと言えます。
　　　　◆ソース（書式）

　　　　　　　　　　　　<FORM>　　　　選択した場所に飛べます<BR> 　　　　　　　　　　　　　　　 　<SELECT name="pru1"> <OPTION>乱ちゃん家</OPTION> <OPTION>わんこん家</OPTION> <OPTION>LINK3</OPTION> <OPTION>LINK4</OPTION> <OPTION>LINK5</OPTION> <OPTION>LINK6</OPTION> </SELECT></FORM>

　　　　　※プルダウンメニューでのジャンプもかなり使われる技ですね。ｗ

●送信・リセットボタン

　　　　　　　　　　　　　　　　　　

　　　　　※こんな風に対で使われることが多いですね。
　　　　　※性質上、主に送信フォームなどに使われています。
　　　　◆ソース（書式）

　　　　　　　　　　　　<FORM><INPUT type="submit" name="sub1" value="送　信">　　　<INPUT type="reset" name="reset1" value="リセット"></FORM>

　　　　　※この二つのボタンは、これだけ単独では機能しないので注意してください。