読書と技術となんか色々のログ

Formオブジェクト
formオブジェクトはhtml要素のフォームを表している。
formオブジェクトはdocumentオブジェクトのforms[]配列プロパティから
参照できる。

formオブジェクトへの参照
formオブジェクトへの参照は、document.forms[]に添え字を指定する
ことで得られる。

例）ドキュメント内の最初に現れるformへの参照は添え字に0を指定する。
document.forms[0]


例）formタグにname属性で名前が付けられている場合は、name属性の値で
参照できる。
<form name="frm1">

document.frm1


フォーム要素
formオブジェクトにはelements[]配列プロパティがあり、フォーム内の
全てのフォーム要素への参照を保持する。
（elements[]プロパティはHTMLCollection）

フォーム要素を参照するには、elements[]に添え字を指定する。
例）最初のフォームの最初のフォーム要素
document.forms[0].elements[0]

例）フォーム要素にname属性で名前が付けられている場合は、name属性の
値で参照できる。

document.frm1.txt1.value

<form name="frm1">
  <input name="txt1" value="">
</form>

【Input】
inputオブジェクトはinputタグに対応
プロパティ
type　･･･　フォーム要素の種類
name　･･･　name属性で指定された値
value　･･･　フォーム要素の値（button、submitなどはラベルが格納されている）

【Textarea】
textareaオブジェクトはtextareaタグに対応
プロパティ
type　･･･　フォーム要素の種類（通常、textarea）
name　･･･　name属性で指定された値
value　･･･　テキストエリアの値
cols　･･･　列の幅
rows　･･･　行数

【Select】
selectオブジェクトはselectタグに対応
プロパティ
type　･･･　multipleプロパティがtrueの場合はselect-multiple、true以外の場合はselect-one
name　･･･　name属性で指定された値
size　･･･　一度に表示するアイテム(option)の数
multiple　･･･　true、false
options　･･･　optionタグを表すOptionオブジェクトを格納したHTMLCollection型の配列。

【Option】
optionオブジェクトはselectタグ内のアイテムを表す。
プロパティ
text　･･･　選択肢のラベルとして表示される値
value　･･･　選択されているoptionタグの値
selected　･･･　選択状態、trueの場合そのアイテムが選択されている。

例）Optionオブジェクトは、Option()コンストラクタで生成できる。 (DOM Level0)
new Option(text, value, defaultSeleted, selected);

---

サンプル

function checkForm(evnt){

  var frm = document.getElementById("frm1");

  var str = "";
  for (var i=0; i<frm.elements.length; i++){
    str += "No[" + i + "] " +
           "type=" + frm.elements[i].type + "\t" +
           "name=" + frm.elements[i].name + "\t" +
           "value=" + frm.elements[i].value + "\t";
    if (frm.elements[i].type == "radio"){
      str += "checked=" + frm.elements[i].checked + "\t";
    } else if (frm.elements[i].type == "checkbox"){
      str += "checked=" + frm.elements[i].checked + "\t";
    } else if (frm.elements[i].type == "select-one" ||
               frm.elements[i].type == "select-multiple"){
      str += "length=" + frm.elements[i].options.length + "\t";
    }
    str += "\n";
  }

  str += "\n";
  alert(str);

  var str2 = "";
  var opts = document.formName.slt1.options;
  for (var i=0; i<opts.length; i++){
    str2 += "text=" + opts[i].text + "\t" +
            "value=" + opts[i].value + "\t" +
            "selected=" + opts[i].selected + "\n";
  }
  alert(str2);

  return false;
}



<form action="#" id="frm1" name="formName">
    Fld1:<input type="text" name="fld1" value="aaa"><br>
    Fld2:<input type="text" name="fld2" value="bbb"><br>
    Fld3:<textarea rows="3" cols="30" name="fld3">TEXT AREA VALUE</textarea><br>
    Rdo1:
    <input type="radio" name="rdo1" value="R1">R1
    <input type="radio" name="rdo1" value="R2">R2
    <input type="radio" name="rdo1" value="R3">R3<br>
    Cbx1:
    <input type="checkbox" name="cbx1" value="C1">C1
    <input type="checkbox" name="cbx1" value="C2">C2
    <input type="checkbox" name="cbx1" value="C3">C3<br>
    Slt1:<select name="slt1">
        <option value="Opt1">Opt1</option>
        <option value="Opt2">Opt2</option>
        <option value="Opt3" selected="selected">Opt3</option>
    </select><br>
    <input type="submit" value="送信" onclick="checkForm(event);">
</form>


送信ボタンを押した時のalertの内容

No[0]  type=text  name=fld1  value=aaa
No[1]  type=text  name=fld2  value=bbb
No[2]  type=textarea  name=fld3  value=TEXT AREA VALUE
No[3]  type=radio  name=rdo1  value=R1  checked=false
No[4]  type=radio  name=rdo1  value=R2  checked=false
No[5]  type=radio  name=rdo1  value=R3  checked=false
No[6]  type=checkbox  name=cbx1  value=C1  checked=false
No[7]  type=checkbox  name=cbx1  value=C2  checked=false
No[8]  type=checkbox  name=cbx1  value=C3  checked=false
No[9]  type=select-one name=slt1  value=Opt3  length=3
No[10]  type=submit name=  value=送信


---

Document Node-Document CORE1
Element Node-Element CORE1
Form Node-Element-HTMLElement-Form HTML2
HTMLCollection Object-HTMLCollection HTML2
HTMLDocument Node-Document-HTMLDocument 0
HTMLElement Node-Element-HTMLElement HTML2