文章目錄
一、訪問表單與表單元素
表單是實現動態網頁的一種主要的外在形式，可以收集在客戶端用戶提交的信息，是實現網站互動功能的重要組成部分。
Form對象代表了HTML文檔中的表單，因爲表單對象是由表單元素組成的，因爲Form對象也包含多個子對象
1、JavaScript訪問表單
一個HTML文檔中可能會包含很多<form>標記，JS會爲每個<form>標記創建一個Form對象，並存儲到一個forms[]數組中。
在操作form對象之前首先要確定要訪問的表單，有三種訪問表單的方式，比如我們定義了一個表單：
<form id="form1" name="myForm" method="post" action="">
用戶名：<input type="text" id="user" name="username" size="15"><br>
密碼：<input type="password" name="password" maxlength="8" size="15"><br>
<input type="submit" name="sub1" value="登錄">
</form>
document.forms[]按編號進行訪問，訪問上面的表單：document.forms[0]document.formname按名稱進行訪問，訪問上面的表單：document.myFrom- 在支持DOM的瀏覽器中：
document.getElementById("formID")，比如上面的表單：document.getElementById("form1")
2、JavaScript訪問表單元素
每個表單都是一個表單元素的聚集，訪問表單元素也是三種方式，拿上面的表單代碼來看一下：
- 通過
elemnts[]按元素編號進行訪問，訪問上面的表單：document.form1.elements[0] - 通過
name屬性進行訪問，訪問上面的表單：document.form1.text1 - 在支持DOM瀏覽器中，使用
document.getElementByID("elementID")來定位要訪問的表單元素，訪問上面的表單：document.getElementById("user")
二、表單對象的屬性、方法與事件
1、屬性
下表列出了表單對象的屬性：
| 屬性 | 說明 |
|---|---|
name |
返回或設置表單名稱 |
action |
返回或設置表單提交的URL |
method |
返回或設置表單提交方式，可取值爲get或post |
encoding |
返回或設置表單信息提交的編碼方式 |
id |
返回或設置表單id |
length |
返回表單元素個數 |
target |
返回或設置提交表單時目標窗口的打開方式 |
elements |
返回表單對象中的元素構成的數組，數組中的元素也是對象 |
2、方法
表單對象只有兩個方法：
reset()： 將所有表單對象的元素全部重置爲初始值，相當於單擊了重置按鈕submit()：提交表單數據，相當於單擊提交按鈕
3、事件
表單對象的事件只有兩個，與兩個方法類似：
reset：重置表單時觸發的事件submit：提交表單時觸發的事件
三、表單元素
1、文本框
文本框主要包含單行文本框和多行文本框兩種，多行的又叫做文本域，密碼框被看成是一種特殊的單行文本框（輸入的時候以*顯示）。
無論哪種文本框他們的屬性和方法大多都是相同的，
（1）文本框屬性
下表列出了文本框常用屬性及說明：
| 屬性 | 說明 |
|---|---|
id |
返回或設置文本框id屬性值 |
name |
返回文本框的名稱 |
type |
返回文本框類型 |
value |
返回或設置文本框中的文本 |
rows |
返回或設置多行文本框的高度 |
cols |
返回或設置多行文本框寬度 |
disabled |
返回或設置文本框是否被禁用，值爲true表示被禁用 |
（2）文本框方法
下表給出了文本框的常用方法及說明：
| 方法 | 說明 |
|---|---|
blur() |
用於將焦點從文本框中移開 |
focus() |
用於將焦點賦給文本框 |
click() |
模擬文本框被鼠標單擊 |
select() |
選中文本框中的文字 |
（3）例子1：驗證表單內容是否爲空
步驟1： 設計登錄界面，用HTML寫一個下面的簡單的表單（HTML不再給出）
步驟2： 寫JS腳本來判斷用戶名和密碼是否爲空：
<script type="text/javascript">
function Check() {
if(demo.UserName.value==""){
alert("請輸入用戶名！");
demo.UserName.focus();
return false;
}if(demo.UserPwd.value==""){
alert("請輸入密碼！");
demo.UserPwd.click();
demo.UserPwd.focus();
return false;
}
return true;
}
</script>
步驟3： 綁定按鈕提交和重置所響應的方法
<input type="button" value="提交" onclick="return Check()">
<input type="button" value="重置" onclick="demo.reset()">
效果如下：
（4）例子2：對文本框的文字加入字數限制
步驟1： 寫好表單，向表單裏面添加一個單行文本框一個多行文本框
步驟2： 開始寫JS代碼
<script type="text/javascript">
var limit_Tle = 10;
var limit_Text = 1000;
function CheckTitle() {
var x = demo.Title.value;
if(x.length>limit_Tle){
alert("標題不能超過10個字！");
return false;
}
}
function CheckText() {
var x = demo.Text.value;
if(x.length>limit_Text){
alert("內容不能超過1000字！");
return false;
}
}
</script>
步驟3： 向表單中的<textarea>和<input type="text">添加onBlur（當焦點失去執行指定方法）事件：
<input name="Title" type="text" size="50" onblur="CheckTitle()">
<textarea name="Text" rows="6" cols="52" value="這裏填寫新聞內容" onblur="CheckText()"></textarea>
效果如下：
2、按鈕
按鈕分爲三種，分別是：
普通按鈕：用於調用自定義函數提交按鈕：用於提交表單重置按鈕：用於重置表單
但是，無論哪一種按鈕，他們都具有相同的屬性和方法
（1）按鈕屬性
下表展示了按鈕的屬性：
| 屬性 | 說明 |
|---|---|
id |
返回或設置按鈕的id屬性值 |
name |
返回按鈕的名稱 |
type |
返回按鈕的類型 |
value |
返回或設置顯示在按鈕上的文本，即按鈕的值 |
disabled |
返回或設置按鈕是否被禁用，值爲true則被禁用 |
（2）按鈕方法
下面展示了按鈕的一些方法：
| 方法 | 說明 |
|---|---|
blur() |
用於將焦點從按鈕中移開 |
focus() |
用於將焦點賦給按鈕 |
click() |
模擬按鈕被鼠標單擊 |
（3）例子：獲取表單元素的值
步驟1： 在HTML文檔中寫入一個表單，包含三個文本框~，然後添加兩個按鈕和一個隱藏域按鈕，展示HTML部分代碼：
<form name="demo" id="demo" method="post" action="" onsubmit="return Check(demo)">
<input type="hidden" name="hid" value="文章添加成功" id="hid">
<input type="submit" name="add" id="add" value="添 加">
<input type="reset" value="重置">
</form>
步驟2： 編寫JS代碼，代碼如下：
<script type="text/javascript">
function Check(demo) {
var str="獲取內容如下：";
if(demo.AuthorName.value!="")
str+="作者名稱："+demo.AuthorName.value+"\n";
else return false;
if(demo.TextTheme.value!="")
str+="文章主題："+demo.TextTheme.value+"\n";
else return false;
if(demo.TextMain.value!="")
str+="文章內容："+demo.TextMain.value+"\n";
else return false;
if(demo.hid.value!="")
str+=demo.hid.value;
alert(str);
return true;
}
</script>
效果如下：
3、單選按鈕和複選框
單選按鈕用於進行單一的選擇，在頁面中以圓框的表示；複選框能夠進行多項選擇，在頁面在以一個方框表示。單選按鈕和複選框一般情況下會以組的形式出現在頁面中。創建單選按鈕組或者複選框組只需要將所有單選按鈕或所有複選框的name屬性值設置爲一致即可。
單選按鈕和複選框雖然在功能上不相同，但是他們的屬性和方法幾乎相同
（1）屬性
下表列出了單選按鈕和複選框常用的屬性：
| 屬性 | 說明 |
|---|---|
id |
返回或設置id屬性值 |
name |
返回名稱 |
type |
返回類型 |
value |
返回或設置單選框或複選框的值 |
length |
返貨一組單選按鈕或複選按鈕中包含元素的個數 |
checked |
返回或設置一個單選按鈕或複選框是否處於被選中狀態，該屬性值爲true時，單選按鈕或複選框處於被選中狀態；反之，未選中 |
disabled |
返回或設置按鈕是否被禁用，值爲true則被禁用 |
（2）方法
下標列出了單選按鈕和複選框一些常用方法：
| 方法 | 說明 |
|---|---|
blur() |
用於將焦點從按鈕中移開 |
focus() |
用於將焦點賦給按鈕 |
click() |
模擬按鈕被鼠標單擊 |
（3）例子：獲取單選按鈕和複選框的值
步驟1： 設計如效果圖所示表單。
步驟2： 定義getInfo()函數，在函數中湖片區用戶信息，代碼如下：
<script type="text/javascript">
function getInfo() {
var res="";
res+="姓名：" + demo.name.value + "\n";
res+="性別：";
for(var i = 0 ; i < demo.sex.length ; i ++ ){
if(demo.sex[i].checked)
res += demo.sex[i].value;
}
res+="\n愛好：";
for(var i = 0 ; i < demo.hobby.length ; i ++ )
if(demo.hobby[i].checked)
res+=demo.hobby[i].value+" ";
res+="\n自我評價："+demo.judge.value + "\n";
alert(res);
}
</script>
效果如下：
4、下拉菜單
下拉菜單通過<select>和<option>標記來實現。
（1）下拉菜單屬性
下表展示了下拉菜單的一些屬性：
| 屬性 | 說明 |
|---|---|
id |
返回或設置id屬性值 |
name |
返回名稱 |
type |
返回類型 |
value |
返回或設置下拉菜單被選中的值 |
multiple |
該值設爲true時，下拉菜單中的選項會以列表的方法顯示，此時可以多選；該值爲false時，只能單選 |
length |
返回下拉菜單元素的個數 |
options |
返回一個數組，數組中的元素爲下拉菜單中的選項 |
selectedIndex |
返回或設置下拉菜單中當前選中的選項在options[]數組中的下標 |
disabled |
返回或設置下拉菜單是否被禁用，值爲true則被禁用 |
（2）下拉菜單方法
下表展示了下拉菜單的一些常用方法：
| 方法 | 說明 |
|---|---|
blur() |
用於將焦點從按鈕中移開 |
focus() |
用於將焦點賦給按鈕 |
click() |
模擬按鈕被鼠標單擊 |
remove(i) |
刪除下拉菜單中的選項，其中，參數i爲options[]數組中的下標 |
（3）Option對象
在HTML中，創建下拉菜單需要使用select元素或option元素，select用於聲明，option用於創建下拉菜單中的選項，在JS中，下拉菜單中的每一個選項都可以看作是一個Option對象，創建下拉菜單選項的構造函數如下：
new Option(text,value,defaultSelected,selected)
其中defaultSelected是一個布爾值，用於聲明該選項是否是下拉菜單中的默認選項，如果他的參數爲true，那麼表單重置的時候，這個選項會被自動選中。
另一個元素selected也是一個布爾值，用於聲明該選項是否處於被選中的狀態
在創建對象之後，可以直接將其賦值給下拉菜單的Option數組元素，例如：
document.myform.myselect.options[0] = new Option("text","value");
該對象也有自己的屬性，下表展示了Option對象常用的屬性：
| 屬性 | 說明 |
|---|---|
defaultSelected |
布爾值，用於聲明在創建該對象時，該選項是否是默認選項 |
index |
返回當前對象在options[]數組中的下標 |
selected |
是否被選中 |
text |
返回或設置選項中的文字 |
value |
返回或設置選項中的值 |
（4）例子：製作簡單選擇職位的網頁
步驟1： 懟一個表單，分別放兩個下拉菜單，分別是：
可選職位：
<select name="job" size="6" multiple="multiple">
<option value="歌手">歌手</option>
<option value="演員">演員</option>
<option value="畫家">畫家</option>
<option value="教師">教師</option>
<option value="公務員">公務員</option>
<option value="職員">職員</option>
</select>
已選職位：
<select name="myjob" size="6" multiple="multiple">
</select>
兩個中間按鈕：
<input type="button" value=">>" onclick="myJob()"><br>
<input type="button" value="<<" onclick="toJob()">
步驟2： 寫JS代碼：
<script type="text/javascript">
function myJob() {
var jobLength = demo.job.options.length;
for(var i = jobLength-1;i>=0;i--){
if(demo.job[i].selected){
var myOption = new Option(demo.job[i].text,demo.job[i].value);
demo.myjob.options[demo.myjob.options.length]=myOption;
demo.job.remove(i);
}
}
}
function toJob() {
var myjoblength = demo.myjob.options.length;
for(var i = myjoblength-1;i>=0;i--){
if(demo.myjob[i].selected){
var myOption = new Option(demo.myjob[i].text,demo.myjob[i].value);
demo.job.options[demo.job.options.length]=myOption;
demo.myjob.remove(i);
}
}
}
</script>
效果如下：
