taquaki-satwo
11/28/2017 - 2:05 AM

form要素の取得

JS-form要素の取得

// formの取得
console.log(document.forms[0]);
console.log(document.forms.form1);
console.log(document.forms.question);
console.log(document.question);

// 子要素の取得
console.log(document.forms.form1[0]); // -> "<input name='name'>"
console.log(document.forms.form1.name); // -> "<input name='name'>"
console.log(document.forms.form1.nameinput); // -> "<input name='name'>"

// elementsプロパティで取得する
console.log(document.forms.form1.elements[3]); // -> "<select id='menu1' ame='bloodtype'><option>A</option><option>B</option><option>O</option>   <option>AB</option></select>"
console.log(document.forms.form1.elements.bloodtype); // -> "<select id='menu1' ame='bloodtype'><option>A</option><option>B</option><option>O</option>   <option>AB</option></select>"
console.log(document.forms.form1.elements.menu1); // -> "<select id='menu1' ame='bloodtype'><option>A</option><option>B</option><option>O</option>   <option>AB</option></select>"

JS-form要素の取得

A Pen by Takaaki Sato on CodePen.

License.

form#form1(method='post' action='pst.cgi' name='question')
  p
    label 名前
    input#nameinput(type=text name='name')
  p
    label 性別
    label
      input(type='radio' name='sex' value='male')
      | 男
    label
      input(type='radio' name='sex' value='female')
      | 女
  p
    label 血液型
    select#menu1(name='bloodtype')
      option A
      option B
      option O
      option AB
  p
    textarea(name='opinion' row=10 cols=80 placeholder='ご意見')
  p
    input(type='submit' value='送信')
    input(type='reset' value='取消')