JavaScript對表單的操作（一）

單的HTML代碼

一、獲得表單的引用

A、通過直接定位的方式

1.document.getElementById("");

var aa=document.getElementById("form1");

alert(aa.name);.//myform

2.document.getElementsByName("");

var aa=document.getElementsByName("myform")[0];

alert(aa.id);//form1

3.document.getElementsByTagName("");

var aa=document.getElementsByTagName("form");

alert(aa.length);//1

B、通過集合的方式來獲取引用

1.document.forms[下標]

var aa=document.forms[0];

alert(aa.length)//10

2.document.forms["name"]

var aa=document.forms["myform"];

alert(aa.id);//form1

3.document.forms.name

var aa=document.forms.myform;

alert(aa.id);//form1

C、通過name直接獲取(只適用于表單)

var aa=document.myform;

alert(aa.name);//myform

二、獲得表單元素的引用

A、直接獲取

1.document.getElementById("")

var names=document.getElementById("names");

alert(names.name);//names

2.document.getElementsByName("");

var ag=document.getElementsByName("age")[0];

alert(ag.name);//age

3.document.getElementsByTagName("");

var oName=document.getElementsByTagName('input')[0];

alert(oName.name);//names

B、通過集合的方式來獲取

1. 表單元素.elements--獲得表單里面所有元素的集合

alert(document.getElementById("form1").elements.length);//10

2.表單元素.elements[下標]

alert(document.forms[0].elements[2].name);//sex

3.表單元素.elements["name"]

alert(document.myform.elements["sex"].length)//2

4.表單元素.elements.name

alert(document.myform.elements.school.name);//school

C、通過name形式

表單對象.name

alert(document.myform.age.value);//22

三、表單元素共同的屬性和方法

A、獲取表單元素的值

表單元素對象.value--獲取或是設置值

alert(document.myform.age.value=18);//18

B、屬性

disabled--獲取或設置表單控件是否禁用 true false

var names=document.forms[0].elements[0].disabled=true;

var school=document.forms[0].elements[7].disabled=true;

姓名和畢業院校變成了灰色，不可選擇

form--指向包含本元素的表單的引用

var age=document.forms[0].elements.age.form;

alert(age.name);//myform

C、方法

blur()--失去焦點

focus()--獲得焦點

var aa=document.forms.myform.elements.names.focus();

、表單：

網頁僅有表單才能接收用戶輸入信息、并將信息提交到服務器進行處理。

表單在網頁中主要負責數據采集功能。一個表單有三個基本組成部分：表單標簽：這里面包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

二、制作規范的表單

一系列的表單對象

提交按鈕:<input type="submit" value="提交" name="sum" />

</form>

注意：表單必須要有提交按鈕,作用:當點擊提交鈕時，會自動將表單中的數據提交到表單action屬性所指定的地址進行處理.

三、定義表單對象

1.使用input標簽定義表單對象

1.1 type的類型:

text(文本框)、password(密碼框)、checkbox(復選框)、radio(單選按鈕)

submit(提交按鈕)、reset(重置按鈕)、file(文件域)、button(按鈕)、

image(圖片域：具備提交按鈕)、hidden(隱藏域)、

date(日期控件:html5新增的)、number(數字調節器:html新增的)

2.使用select標簽定義下拉列表

....

</select>

3.使用textarea定義文本域:

<textarea cols="80" rows="8">請輸入內容</textarea>

四、常用表單對象的屬性

1.文本框:

2.設置單選框和復選框的默認選中

checked="checked"屬性

3.使用selected屬性設置下拉列表的選中項

來自網絡

五、css(Cascading style sheet):級聯（層疊）樣式表。

1.作用：修飾html標簽

2.優勢：

內容與表現分離；

網頁的表現統一，容易修改；

豐富的樣式，使得頁面布局更加靈活；

減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡帶寬；

運用獨立于頁面的CSS，有利于網頁被搜索引擎收錄。

六、在html文檔添加css樣式的方法。

1.行內樣式：使用標簽的style屬性添加樣式

<標簽 style="一系列的樣式規則">

樣式規則的格式:樣式屬性:樣式屬性值;

2.內部樣式:使用style標簽定義樣式

一系的樣式選擇器(選擇器必需先定義，后引用)

</style>

注意：通常情況style標簽放在head標簽中。

2.1基本選擇器分類：類選擇器、Id選擇器、標簽選擇器

2.2使用類選擇器

定義類選擇器

.類選擇器名{一系列樣式}

引用類選擇器:使用標簽的class屬性引用類選擇器名稱

2.3使用Id選擇器

定義id選擇器

#id選擇器名{一系列樣式規則}

引用ID選擇器:使用標簽的ID屬性引用ID選擇器名稱

2.4定義標簽選擇器

標簽名稱{一系列樣式規則}

引用標簽選擇器:當使用該標簽時自動套動標簽樣式

3.外部樣式:

外部樣式是將一系列樣式選擇器定義在外部樣式文件（**.css）中

3.1在網頁使用link標簽引用外部樣式文件

七、樣式優先級（就近原則）

行內樣式>內部樣式>外部樣式

id選擇器>類選擇器>標簽選擇器

八、高級選擇器(復合選擇器)

1.層選選擇器

1.1后代選擇器

定義后代選擇器

選擇器1 選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在層次關系

1.2子選擇器

定義子選擇器

選擇器1>選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且選擇器存在父子關系

1.3相鄰兄弟選擇器

定義相鄰兄弟選擇器

選擇器1+選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰的

1.4通用相鄰兄弟選擇器

定義通用相鄰兄弟選擇器

選擇器1~選擇器2{一系列樣式規則}

使用：必需先用選擇器1,再使用選擇器2,且相鄰之后的所有兄弟

2.交集選擇器

定義交集選擇器

標簽選擇器類選擇器|id選擇器

使用：使用標簽的同時還引用類或者id選擇器

3.并集選擇器

定義并集選擇器

選擇器1,選擇器2

使用：使用選擇器1 或者選擇器2 都行

九、span標簽

文本標簽，由內容決定自身大小。

html5 中，在增加了大量的表單元素與屬性的同時，也增加了大量在提交時對表單與表單內新增元素進行內容有效性驗證的功能，接下來我們來說1下自動驗證。

在html5中，通過對元素使用屬性的方法，可以實現在表單提交時履行自動驗證的功能，在履行代碼后，將在表單提交時自動驗證輸入的內容是不是為數字，如果驗證通不過，將顯示毛病信息文字。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            <input type="text" name="text" required pattern="^\w.*$">
            <input type="submit" value="提交">
    </form>
</body>
</html>

接下來我們來看1下在html5 中追加的關于對元素內輸入內容進行限制的屬性的指定。

1.required屬性

html5 中新增的required屬性可以利用在大多數輸入元素上（除隱藏元素，圖片元素按鈕上）。在提交時，如果元素中內容為空白。則不允許提交，同時在閱讀器中顯示信息提示文字，提示用戶這個元素中必須輸入內容，效果如圖

2.pattern屬性之條件到的新增的input元素，比如email，number，URL等，要求輸入內容符合1定的格式，對input元素使用pattern屬性，并且將屬性值設置為某個格式的正則表達式，在提交時會檢查其內容是不是符合給定格式。當輸入的內容不符合給定格式時，則不允許提交，同時在閱讀器中顯示信息提示文字，提交輸入的內容必須符合給定格式，代碼以下，要求輸入內容為1個數字與3個大寫字母：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            請輸入指定內容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="輸入:1個數字3個大寫字母">
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

3.min屬性與max屬性

min與max這兩個屬性是日期類型或數值類型的input元素的專用屬性，他們限制了在input元素中輸入的數值與日期的范圍。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="post">
            請輸入數值:<input type="number" name="point" min="0" max="100" />
            <input type="submit" value="提交">
    </form>
</body>
</html>

履行效果以下：

4.step屬性

step屬性控制input元素中的值增加過減少時的步驟。例如當你想讓用戶輸入的值在0與100之間，但必須是5的倍數時，你可以指定step為5，代碼以下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>表單驗證示例</title>
</head>
<body>
    <form action="#" method="get">
      <input type="number" name="point" step="5" />
      <input type="submit" />
    </form>
</body>
</html>

效果以下：

原文：http://www.wfuyu.com/htmlcss/27520.html

在線咨詢

上一篇：為容器的邊框添加圖片，CSS3新增的邊框圖片屬性，一
下一篇：Canvas繪制扇形統計圖，50行代碼的統計圖

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript對表單的操作（一）

您的項目需求