从表单元素中提取信息并设置其一些属性 - 在线编辑器

          <form name="formA" action="/cgi-bin/test" method="post">
 <p>点击 “信息” 查看表单详细信息，或点击 “设置” 更改这些详细信息。</p>
 <p>
  <button type="button" onclick="getFormInfo();">信息</button>
  <button type="button" onclick="setFormInfo(this.form);">设置</button>
  <button type="reset">重置</button>
 </p>

 <textarea id="form-info" rows="15" cols="50"></textarea>
</form>

<script>
  function getFormInfo(){
    // 通过名称获取对表单的引用
    var f = document.forms["formA"];
    // 我们感兴趣的表单属性
    var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];
    // 遍历属性，将它们转换为我们可以向用户显示的字符串
    var info = properties.map(function(property) {
      console.log(f)
      return property + ": " + f[property]; 
    }).join("\n");

    // 设置表单的 <textarea> 值以显示表单的属性
    document.forms["formA"].elements['form-info'].value = info;
  }

  function setFormInfo(f){ // 参数应该是表单元素引用。
    f.action = "a-different-url.cgi";
    f.target   = "_blank";
    getFormInfo();
  }
</script>

        