、表單標簽Form

1. 什么是表單

表單在網(wǎng)頁中負責數(shù)據(jù)采集功能的。表單是有3部分組成：

（1）表單標簽 <form></form>

（2）表單域

（3）表單按鈕

2. Form標簽、

語法格式：

<form action=”url” method=”get|post”>

</form>

件

一、什么是事件？

JavaScript和HTML之間的交互是通過用戶和瀏覽器操作頁面時引發(fā)的事件來處理的。頁面載入完成時，會觸發(fā)一個事件。用戶點擊按鈕時，點擊也是一個事件。

二、怎樣將事情處理程序綁定到特定的事件中？

方法1. 使用HTML標記創(chuàng)建事件處理程序;

例：給圖片添加點擊事件

<img src="01.jpg"onclick="alert(this.src);"/>

方法2：使用對象的事件屬性創(chuàng)建事件處理程序

語法：object.onEventName = eventHandler;

例1：給document對象添加點擊事件

function sayHello(){

alert(‘hello’);

}

document.onclick = sayHello;

例2：給所有的圖片都添加一個單擊事件，用于在新窗口中打開圖片

function new_pic_window(){

window.open(this.src);

}

var img_obj = document.getElementByTagName(‘img’);

for(var i = 0; i < img_obj.length; i++){

img_obj[i].onclick = new_pic_window;

}

表單對象

一、表單

表單(Form)是Web頁面中最常用的元素之一，它通常由一個或多個表單域組成，這些表單域接收用戶的輸入，并通過表單的提交功能將數(shù)據(jù)傳遞到服務器端，由服務器端對這些數(shù)據(jù)進入處理。

在Javascript中可以很方便的操作表單，例如獲取表單域的數(shù)據(jù)進行有效驗證、自動給表單域賦值、處理表單域的事件等。些時每對<form>...</form>標記被解析為一個對象，即form對象，可以通過document.forms集合來引用這些對象，例如一個名為"form1"的表單可以用如下語句獲得：var myform = document.forms["form1"];不僅如此，還可以通過表單在文檔中的索引來引用表單對象，

例如：

下面代碼表示引用文檔中的第一個表單對象。

var myform = document.forms[0];

二、引用表單域

表單域是指用于接收用戶輸入或操作的一些頁面元素，例如文本框、按鈕、復選框等。它們通常包含在一個表單中，要在Javascript中引用一個表單元素，可以采用以下兩種方法：

var element = theForm.elements[index];

var element = theForm.elements["elementName"];

在第一種方法中，index表示表單域的索引，第一個出現(xiàn)的索引為0,依次遞增;

第二種方法中，elementName表示表單域name屬性所指定的表單域名稱;

有時需要指定遍歷某種類型的表單域，可以使用表單域的type屬性來獲取表單域類型，例如要處理所有的復選框，可以使用如下語句

for(var i=0; i < theForm.elements.length; i++){

if("checkbox" == theForm.elememts[i].type){

//處理程序

}

}

三、表單域的通用屬性

1. disabled

有時希望表單域不能接收用戶操作，如有些文本框要設定為只讀; 當所有的表單域輸入完成之前，設定提交按鈕為灰的，不可單擊等。這些都可以通過表單域的disable屬性來實現(xiàn)：

例：element.disabled = true;

2. 使用name屬性獲取或者設置表單域的名稱

3. 使用form屬性獲取該表單域所屬的表單

4. 使用value屬性來獲取和設置表單域的值

四、表單域的通用方法

1. 使用focus() 方法讓表單域獲得焦點

2. 使用 blur()方法讓表單域失去焦點

五、表單域的通用事件

事件是處理用戶操作的一項重要機制，在Javascript中，表單域提供了豐富的事件以方便程序捕獲用戶行為。

1. 使用onfocus事件和onblur事件，該事件在表單獲得焦點和失去焦點時觸發(fā)。

2.使用 onclick、onkeydown、onkeyup、onkeypress 事件，這4個事件分別對應于鼠標和鍵盤的幾個操作。click事件表示鼠標單擊該表單域;

3. 使用 onmouseover、onmouseout、onmousedown、onmouseup事件，這些事件對應于鼠標的不同動作

4.使用onchange事件捕獲表單域值的變化

每個表單域都有一定的值，在這些值發(fā)生變化的時候會觸發(fā)onchange事件，例如：文本域文本的變化，復選框從選中變?yōu)槲催x中，下拉列表框選項發(fā)生變化。

六、表單驗證

在Javascript誕生之前，所有的驗證工作都在服務器端完成，這需要將數(shù)據(jù)發(fā)送到服務器，增加了用戶等待時間，用戶體驗差。使用Javascript在瀏覽器端進行驗證則可以較好的解決這些問題。

表單驗證一般發(fā)生于用戶單擊提交按鈕、數(shù)據(jù)被提交到服務器之前，這時如果用戶輸入的數(shù)據(jù)不全或無效，則取消提交，同時提示用戶重新輸入。例如函數(shù)validate()是用于檢驗表單的用效性，返回值為true或者false。在程序中有兩種方式來調(diào)用validate();

方法1：<input type="submit" onclick="return validate();" />

方法2：<form action="" onsubmit="return validate();" />

第一種方法中，將validate()綁定到提交按鈕的單擊事件，如果返回false,則按鈕會終擊單擊的效果，即表單不會提交。

第二種方法中，將validate()綁定到表單的提交事件，它發(fā)生在提交之前，如果返回false，則表單不會提交。

注意：盡管Javascript幾乎可以完成所有的數(shù)據(jù)驗證上，但這終究是一種客戶端技術(shù)，技術(shù)成熟的黑客可以很容易繞過這些驗證而將非法的數(shù)據(jù)直接提交到服務器，給服務器帶來威脅。所以在服務器端重復驗證是非常有必要的。但Javascript驗證以快速提示用戶可能的錯誤，給用戶帶來良好體驗，這也是采用客戶端驗證的重要原因。

天小編帶大家學習一下HTML中非常重要的標簽<form>標簽，也就是表單標簽，<form>標簽在HTML中即必不可少，幾乎每個頁面有至少一個<form>標簽，話不多說，直接進入今天的主題；

什么是表單標簽？就是指能夠和用戶進行交互的控件，簡單的來說就是你要輸入或許選擇的地方，那這個地方就是表單拉，后臺會獲取你輸入的內(nèi)容或者選擇的內(nèi)容進行相應的操作。

常用的表單標簽有3類：input標簽、select標簽、textare標簽、以及其他標簽；以下是各個標簽的詳解：

首先，input標簽，它是非封閉型標簽，簡單的寫法就是<input /> 小編提醒大家，這里的/ 千萬不能丟了，input標簽頁需要它自有屬性來實現(xiàn)的、type屬性、value屬性、name屬性、id屬性；其中type屬性是指這個表單標簽的類型，比如說文本框、單選，多選（也可稱為：復選）,按鈕等；

！！！注意 如果type不寫，那么默認是文本框類型；

類型也分為：text、pass、radio、checkbox、submit、file、hidden(后面2類不常用)

1.text類型：語法規(guī)范：<input type="text">;可以有name屬性、id屬性、value屬性、還可以有maxLength屬性就是規(guī)定你輸入的內(nèi)容最長不能超過多少個數(shù)；readongly屬性就是規(guī)定這個表單只能只讀，改變內(nèi)容。

2.password類型：語法規(guī)范：<input type="password">。效果就是用戶輸入的內(nèi)容會用******代替，所以小伙伴們在輸入一些密碼或者出現(xiàn)*****的時候，那么這個表單的類型就是password類型啦；這個表單的屬性和上述的text屬性一致

3.radio類型：語法規(guī)定：<input type="radio">,是實現(xiàn)單選的效果，這個表單屬性有name屬性、value屬性、checked屬性；需要特別注意的是在radio類型下，多個radio表單的name屬性的值必須是完全一致，這樣才能實現(xiàn)單選；check屬性即表示選中；

4.checkbox類型：語法規(guī)范：<input type="checkbox">；這個表單屬性有name屬性、value屬性、checked屬性；

5.按鈕類型：按鈕類型分為：submit（提交）、reset（重置）、button（普通按鈕）語法規(guī)范：<input type="submit" value="按鈕上的文字">

6.file類型：語法規(guī)范： <input type="file" />；這標簽就是當需要用戶上傳一些本地文件時用到

！??！特別注意：如果有文件上傳的話，必須將表單的enctype更改為 multipart/form-data,同時method必須為post

7、隱藏域類型：語法規(guī)范：<input type="hidden" name="" value="" />

使用場合：隱藏域在頁面中是看不到的，一般會配合后臺開發(fā)一起使用，從來不單獨使用。

其次，select標簽，就是下拉框列表，簡單的寫法就是<select></select>，這個標簽也需要相關(guān)的屬性，name屬性、size屬性、multip屬性、value屬性、selected屬性；

multip屬性：可以設置這個下拉列表可以多選；

selected屬性：表示選中；

完整的語法規(guī)范如下：

<select name="languages">

<option value="01">html</option>

<option value="02">css</option>

<option value="03">javascript</option>

</select>

再者：<textarea>標簽，語法規(guī)范：<textarea> 文本內(nèi)容</textarea>常用屬性：name屬性、cols屬性、rows屬性

cols屬性：規(guī)定這個文本域的列數(shù)，就是這個文本域一行最多能輸入幾個文字；

rows屬性：規(guī)定這個文本域的行數(shù)，就是這個文本域最多能輸入幾行文字；

完整的語法規(guī)范如下：

<textarea cols=“10” rows“20”> 文本內(nèi)容</textarea> 表示這個文本域可以輸入20行10列的文本；

最后：分享一下在表單中能提高用戶體驗的標簽<label>標簽；這個標簽作用在于點擊表單前的文本時，表單標簽會主動獲取焦點，而不需要點擊表單的時候才獲取焦點；<label>有一個非常重要的屬性for屬性，它是必須存在，for屬性值就是你要對應的那個表單

語法規(guī)范：<label for=""某個表單的id值"></label>

在實際的編碼過程中，小編強烈建議用<label>包裹表單前的文字

預告：下一篇：你所不知道的css（一）