form要素 (フォームの定義)

フォームはform要素は action="URL()"、method="HTTPメソッド(getまたはpost)"などの属性をもち、最上位要素として次の要素を指定できる。

1.input要素(基本的なフォームコントロール)
2.serect要素(セレクトメニュー)/option要素(選択肢)
3.textarea要素(テキストエリア)
4.button要素(汎用的なボタン)
5.label要素(フォームコントロールにつけるラベル)
6.fieldset要素 / legend要素(フォームコントロールのグループ化)


例:以下の条件、パラメータでフォームを制作する。

action:https://sample.jp/form.php
method:post
お名前:name
フリガナ:kana
性別:gender(男は「1」女は「2」)
電話番号:tel[0],tel[1],tel[2](「-」で繋ぐ)
郵便番号:zip
ご住所:address
アンケート:以下の好きな妖怪人間を選択 ※()は値
べム(01)ベラ(02)べロ(03)

◆ html

<div class="form">
  <form action="https://sample.jp/form.php"
   method="post">
  
    <div class="form1">
    お名前 : 
    <input type="text" name="name" size="12"
    value="" />
    </div>
    
    <div class="form1">
    フリガナ : 
    <input type="text" name="kana" size="12"
    value="" />
    </div>
    
    <div class="form1">
    性別 :  
    <input type="radio" name="gender" value="1"
     />男
    <input type="radio" name="gender" value="2"
     />女
    </div>
    
    <div class="form1">
    電話番号 : 
    <input type="text" name="tel[0]" size="4"
     value="" />-
    <input type="text" name="tel[1]" size="4"
     value="" />-
    <input type="text" name="tel[2]" size="4"
     value="" />
    </div>
    
    <div class="form1">
    郵便番号 : 
    <input type="text" name="zip" size="7"
     value="" />
    </div>
    
    <div class="form1">
    ご住所 : 
    <input type="text" name="address" size="50"
     value="" />
    </div>
    
    <div class="form1">
    アンケート:好きな妖怪人間は?
    <select name="lecture">
      <option value="01">べム</option>
      <option value="02">ベラ</option>
      <option value="03">べロ</option>
    </select>
      
    </div>
    <div class="form1">
    <input type="reset" name="clear" 
     value="リセット" />
    <input type="submit" name="submit" 
     value="送信" />
    </div>
    
  </form>
</div>

◆ CSS

.form1	{	
	margin: 8px ;
}

◆実際の表示例

go to top