js入门·表单详解一（修改表单属性，修改表单元素值）
生活随笔
收集整理的這篇文章主要介紹了
js入门·表单详解一（修改表单属性，修改表单元素值）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實在javascript入門·Document對象入門講解(訪問表單，創建新頁，獲取頁標題) 一文中，我們已經把表單的一些基本訪問等弄清楚了，下面我們深入的學下表單的屬性以及對表單元素的簡單操作！
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>表單詳解一（修改表單屬性，修改表單元素值）</title>
<script?language="javascript">
function?gaibian()
{
????var?acti=document.getElementById("select").value;//得到ID為select元素的值
????var?mont=document.getElementById("select2").value;//同上
????document.form1.action=acti;//設置值
????document.form1.method=mont;//同上
}
function?bian()
{
????var?form=document.forms[1];//將當前頁第二個表單賦給變量form，以便以后引用
????for(var?i=0;i<form.elements.length;i++)//循環表單內的元素數組的最大項
????{
????????if(form.elements[i].type=="text")//如果當前元素的類型是text
????????{
????????????form.elements[i].value="田洪川";//那就把他的值賦成?田洪川
????????}????
????????if(form.elements[i].type=="checkbox")//如果是復選框
????????{
????????????if(form.elements[i].checked)//如果是選中的
????????????{
????????????????form.elements[i].checked=null;//取消選擇
????????????}
????????????else
????????????{
????????????????form.elements[i].checked="checked"????//就給他選中
????????????}????
????????}
????}
}
</script>
</head>
<body>
<p>其實在<a?href="http://www.cnblogs.com/thcjp/archive/2006/08/08/470997.html">javascript入門·Document對象入門講解(訪問表單，創建新頁，獲取頁標題)</a>?一文中，我們已經把表單的一些基本訪問等弄清楚了，下面我們深入的學下表單的屬性以及對表單元素的簡單操作！</p><hr?/>
<p><strong>演示一?：?根據需求，定做表單</strong></p>
<p>你先按下提交提交表單，后退，然后再點修改表單，然后再提交表單，看效果</p>
<form?id="form1"?name="form1"?method="post"?action="http://127.0.0.1/">
??現在的指向是?test.asp?，方法是??post?
??<input?type="submit"?name="Submit2"?value="提交表單"?/>
</form>
<p>其實做那么多都沒有，直接作兩個屬性吧?
??<select?name="select">
????<option?value="http://thcjp.cnblogs.com/">田洪川的博客</option>
????<option?value="http://163.com/">網易</option>
??</select>
??<select?name="select2">
????<option?value="GET">get</option>
????<option?value="post">post</option>
??</select>
??<input?type="submit"?name="Submit"?value="修改表單"?onclick="gaibian()"?/>
</p><hr?/>
<p><strong>演示二?：修改表單內特定類型元素的值</strong></p>
<p>form.elements[]屬性：除了跟蹤表單中每種類型的元素外，瀏覽器還保留了一張表單中所有控件元素的列表，元素的順序就是在HTML中的位置，所以對引用相當的方便。</p>
<p>注意，這個表單使用了動作?οnsubmit="return?false"動作，你可以去掉試下?</p>
<form?name="form2"?onsubmit="return?false">
??<table?width="371"?border="0"?cellspacing="5"?cellpadding="5">
????<tr>
??????<td?width="168"><input?type="text"?name="textfield"?/></td>
??????<td?width="197"><input?type="text"?name="textfield2"?/></td>
????</tr>
????<tr>
??????<td?align="center"><input?name="checkbox"?type="checkbox"?value="checkbox"?/></td>
??????<td?align="center"><input?name="checkbox2"?type="checkbox"?value="checkbox"?checked="checked"?/></td>
????</tr>
????<tr>
??????<td?colspan="2"?align="center"><input?name=""?type="button"?value="提交"?onclick="bian()"?/></td>
????</tr>
??</table>
</form>
<p> </p>
</body>
</html>
演示一 ： 根據需求，定做表單
你先按下提交提交表單，后退，然后再點修改表單，然后再提交表單，看效果
現在的指向是 test.asp ，方法是 post
其實做那么多都沒有，直接作兩個屬性吧 田洪川的博客 網易 get post
演示二 ：修改表單內特定類型元素的值
form.elements[]屬性：除了跟蹤表單中每種類型的元素外，瀏覽器還保留了一張表單中所有控件元素的列表，元素的順序就是在HTML中的位置，所以對引用相當的方便。
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/>
<title>表單詳解一（修改表單屬性，修改表單元素值）</title>
<script?language="javascript">
function?gaibian()
{
????var?acti=document.getElementById("select").value;//得到ID為select元素的值
????var?mont=document.getElementById("select2").value;//同上
????document.form1.action=acti;//設置值
????document.form1.method=mont;//同上
}
function?bian()
{
????var?form=document.forms[1];//將當前頁第二個表單賦給變量form，以便以后引用
????for(var?i=0;i<form.elements.length;i++)//循環表單內的元素數組的最大項
????{
????????if(form.elements[i].type=="text")//如果當前元素的類型是text
????????{
????????????form.elements[i].value="田洪川";//那就把他的值賦成?田洪川
????????}????
????????if(form.elements[i].type=="checkbox")//如果是復選框
????????{
????????????if(form.elements[i].checked)//如果是選中的
????????????{
????????????????form.elements[i].checked=null;//取消選擇
????????????}
????????????else
????????????{
????????????????form.elements[i].checked="checked"????//就給他選中
????????????}????
????????}
????}
}
</script>
</head>
<body>
<p>其實在<a?href="http://www.cnblogs.com/thcjp/archive/2006/08/08/470997.html">javascript入門·Document對象入門講解(訪問表單，創建新頁，獲取頁標題)</a>?一文中，我們已經把表單的一些基本訪問等弄清楚了，下面我們深入的學下表單的屬性以及對表單元素的簡單操作！</p><hr?/>
<p><strong>演示一?：?根據需求，定做表單</strong></p>
<p>你先按下提交提交表單，后退，然后再點修改表單，然后再提交表單，看效果</p>
<form?id="form1"?name="form1"?method="post"?action="http://127.0.0.1/">
??現在的指向是?test.asp?，方法是??post?
??<input?type="submit"?name="Submit2"?value="提交表單"?/>
</form>
<p>其實做那么多都沒有，直接作兩個屬性吧?
??<select?name="select">
????<option?value="http://thcjp.cnblogs.com/">田洪川的博客</option>
????<option?value="http://163.com/">網易</option>
??</select>
??<select?name="select2">
????<option?value="GET">get</option>
????<option?value="post">post</option>
??</select>
??<input?type="submit"?name="Submit"?value="修改表單"?onclick="gaibian()"?/>
</p><hr?/>
<p><strong>演示二?：修改表單內特定類型元素的值</strong></p>
<p>form.elements[]屬性：除了跟蹤表單中每種類型的元素外，瀏覽器還保留了一張表單中所有控件元素的列表，元素的順序就是在HTML中的位置，所以對引用相當的方便。</p>
<p>注意，這個表單使用了動作?οnsubmit="return?false"動作，你可以去掉試下?</p>
<form?name="form2"?onsubmit="return?false">
??<table?width="371"?border="0"?cellspacing="5"?cellpadding="5">
????<tr>
??????<td?width="168"><input?type="text"?name="textfield"?/></td>
??????<td?width="197"><input?type="text"?name="textfield2"?/></td>
????</tr>
????<tr>
??????<td?align="center"><input?name="checkbox"?type="checkbox"?value="checkbox"?/></td>
??????<td?align="center"><input?name="checkbox2"?type="checkbox"?value="checkbox"?checked="checked"?/></td>
????</tr>
????<tr>
??????<td?colspan="2"?align="center"><input?name=""?type="button"?value="提交"?onclick="bian()"?/></td>
????</tr>
??</table>
</form>
<p> </p>
</body>
</html>
轉載于:https://www.cnblogs.com/czh-liyu/archive/2007/11/27/974090.html
總結
以上是生活随笔為你收集整理的js入门·表单详解一（修改表单属性，修改表单元素值）的全部內容，希望文章能夠幫你解決所遇到的問題。
