HTML - Form

■ページ目次

フォーム
実習

■フォーム

 <form name="名前" 
       method="メソッド"  ... "GET", "POST"
       action="アクション">
        :
 </form>

 <input type="タイプ"  ... "submit", "reset", "text", "radio", "checkbox", 
                              "password", "hidden"
        name="名前" 
        value="値" 
        onclick="関数名"  ... JavaScript の関数
        maxlength="値" 
        size="値" 
        readonly 
        checked /> 

 <textarea name="名前"  
           rows="行数" 
           cols="幅" 
           readonly >
        初期値になる文字列
 </textarea>

 <select name="名前"  
         size="行数" 
         multiple >
   <option value="値" 
           selected> 
          オプション文字列
   </option> 
 </select>

■指定例

フォーム	<form name="food10" method="POST" action="program-name"> : </form>
サブミット･ボタン	<input type="submit" value="submit" ... />
リセット･ボタン	<input type="reset" value="reset" ... />
テキスト・ボックス	<input type="text" name="food11" ... />
パスワード・ボックス	<input type="password" name="food12" ... />
テキスト･エリア	<textarea name="food13" ... >りんご</textarea>	りんご
ラジオ・ボタン	<input type="radio" name="food14" value="orange" ... />オレンジ <input type="radio" name="food14" value="apple" ... />りんご <input type="radio" name="food14" value="melon" ... />メロン	オレンジりんごメロン
チェック・ボックス	<input type="checkbox" name="food15" value="orange" ... />オレンジ <input type="checkbox" name="food15" value="apple" ... />りんご <input type="checkbox" name="food15" value="melon" ... />メロン	オレンジりんごメロン
隠しフィールド	<input type="hidden" name="food16" ... />
コンポ・ボックス	<select name="food17" ...> <option value="orange" ... />オレンジ <option value="apple" ... />りんご <option value="melon" ... />メロン </select>
リスト･ボックス	<select name="food18" multiple ...> <option value="orange" ... />オレンジ <option value="apple" ... />りんご <option value="melon" ... />メロン </select>

Top

■例題

フォームを指定したサンプルHTML "form01.html" です。


 <!-- form01.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 女の子で、誕生日は12月14日です。<br/>
 <img src="pic_0036.jpg" alt="ホイップ"/>
 <br/>
 感想を送ってくださいね。
 <form name="question" action="mailto:marunomarunola@yahoo.co.jp">
   お名前:　<input type="text" name="name" size="20"/>
   <br/>
   email:　<input type="text" name="email" size="30"/>
   <br/>
   かわいいですか?
   <input type="radio" name="lovely" value="1" checked/>すごくかわいい 
   <input type="radio" name="lovely" value="2" />とてもかわいい
   <input type="radio" name="lovely" value="3" />かわいい
   <br/>
   なにか、飼っていらっしゃいますか?
   <input type="checkbox" name="pet" value="dog" />犬 
   <input type="checkbox" name="pet" value="cat" />猫 
   <input type="checkbox" name="pet" value="ferret" />フェレット 
   <input type="checkbox" name="pet" value="other" />その他 
   <br/>
   年代は?
   <select name="age">
     <option value="10"/>未成年
     <option value="20" selected/>20代
     <option value="30"/>30代
     <option value="40"/>40代
     <option value="50"/>50代以降
   </select>
   <br/>
   <textarea name="comment" rows="6" cols="60">コメントをご記入ください。</textarea>
   <br/>
   <input type="submit" value="送信"/>
   <input type="reset" value="クリアー"/>
   <br/>
 </form>
 </body>
 </html>

□ 実行結果

Top

■実習

フォームを指定したサンプルHTML "form01.html" のレイアウトを、table タグなどを利用してもう少し、見やすくしてみましょう。("form02.html", 罫線つき: "form03.html")


 <!-- form02.html -->
 <html>
 <head>
 <title>わたしのホーム･ページ</title>
 <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"/>
 </head>
 <body>
 <h1>わたしのホーム･ページ</h1>
 <h2>ホイップ</h2>
 女の子で、誕生日は12月14日です。<br/>
 <img src="pic_0036.jpg" alt="ホイップ"/>
 <br/>
 感想を送ってくださいね。
 
   <!-- ここに、コードを記述してください。-->
 
 </body>
 </html>

□ 実行結果

Top