文章目錄

靜態網頁是指可以由瀏覽器解釋執行而生成的網頁，其開發技術主要有：HTML、JavaScript和CSS。
(1)HTML是一組標籤，負責網頁的基本表現形式；
(2)JavaScript是在客戶端瀏覽器運行的語言，負責在客戶端與用戶的互動；
(3)CSS是一個樣式表，起到美化整個頁面的功能。

1 寫在前面

1、靜態網頁是指沒有後臺數據庫、不含程序、不可交互的網頁。
2、靜態網頁是以htm或html結尾的html文件編寫的。在程序設計中一般又把html網頁稱爲靜態網頁。
3、HTML是Hypertext Markup Language的縮寫，中文也就是超文本鏈接標示語言。
4、HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。
5、相關的一系列技術：HTML、JavaScript和CSS。
（1）HTML：HTML是一組標籤，負責網頁的基本表現形式；
（2）JavaScript：JavaScript是在客戶端瀏覽器運行的語言，負責在客戶端與用戶的互動。
（3）CSS：CSS是一個樣式表，起到美化整個頁面的功能。

2 HTML網頁設計

2.1 HTML文檔結構與基本語法

網頁結構：

設計完成該網頁的代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>contentEditable Test</title>
	<meta charset="utf-8">
</head>
<body>
	<!-- 直接指定contentEditable="true"表明該元素是可編輯的 -->
	<div contenteditable="true" style="width: 500px;border: 1px solid black">
		瘋狂Java講義
		<!-- 該元素的父元素有contentEditable="true"屬性，因此該表格也是可編輯的 -->
		<table style="width: 420px;border-collapse: collapse;" border="1">
			<tr>
				<td>瘋狂Java講義</td>
				<td>瘋狂Android講義</td>
			</tr>
			<tr>
				<td>輕量級Java EE企業應用實戰</td>
				<td>經典Java EE企業應用實戰</td>
			</tr>
		</table>
	</div>
	<hr>
	<!-- 這個表格默認是不可編輯的，雙擊之後該表格變爲可編輯狀態 -->
	<table id="target" ondblclick="this.contentEditable=true;" style="width: 420px;border-collapse: collapse;" border="1">
		<tr>
			<td>HTML 5</td>
			<td>Ruby</td>
		</tr>
		<tr>
			<td>C/C++</td>
			<td>Python</td>
		</tr>
	</table>
</body>
</html>

2.1.1 HTML標記

用HTML編寫的超文本文檔稱爲HTML文檔（文件），是一個放置了“標籤”的文本文件，以“.html”或“.htm”爲擴展名，可供瀏覽器解釋執行的網頁文件。

網頁文件是利用HTML所規定的標籤定義網頁中的各種元素的性質和特點，從而完成網頁所要求的功能。

1、標籤的分類（類型）
在網頁上要展示的不同元素，需要採用不同的標籤給出定義和說明。主要有：
（1）定義網頁結構的標籤；
（2）定義網頁頭部的標籤；
（3）定義網頁網體內容的標籤，該類標籤中主要包含：
|——文字、行、段落、列表標籤；
|——表格、圖形；
|——超鏈接、視頻、音頻；
|——表單。
（4）標籤的使用格式
標籤有單表和雙標籤。示例如下：

<!-- 單標籤：例如，換行標記 -->
<br/>
<!-- 雙標籤：例如，標題標記 -->
<h1 屬性及其屬性值>內容</h1>

2、標記的屬性
基本語法：<標記名稱屬性名1="屬性值" 屬性名2="屬性值" ….. >
語法說明：屬性應寫在首標記內，並且和標記名之間有一個空格分隔。
例如：標記<hr>的作用是在網頁中插入一條水平線，但是，要繪製什麼類型（線的粗細、顏色等）的直線呢？對直線的粗細、顏色的限制，就需要標記的屬性。 <hr size="5px" align="center" color="blue" width="80%">，其中：align爲屬性，center爲屬性值（表示居中）；color爲顏色屬性，其屬性值爲blue（藍色）；size爲字體大小屬性，其屬性值爲5px。

3、註釋標記
註釋標記用於在HTML源碼中插入註釋。註釋會被瀏覽器忽略。
基本語法：

2.2 HTML基本標記與使用

2.2.1 結構標籤

<html>
<head>
	<title></title>
</head> 
<body>
	<!-- 主體部分代碼 -->
</body>
</html>

示例：

2.2.2 文本與段落標記

2.2.3 列表標籤

列表標籤分兩類：有序標籤和無序標籤。
（1）有序列表標記：<ol></ol>
|——格式：

<ol type="序號類型">
<li>...</li>
<li>...</li>
...
</ol>

<ul type="類型樣式">
<li>...</li>
<li>...</li>
...
</ul>

其中，屬性TYPE指定列表項前的項目符號的樣式，其取值爲
|——disc：實心圓點（默認值）；
|——circle：空心圓點；
|——square：實心方塊。

示例：

<html>
	<head>
		<title>有序列表與無序列表</title>
	</head>
	<body>
		<b>班級新聞</b>
		<ul type="disc">
			<li>最新課程表</li>
			<li>關於普通話考試的通知</li> 
			<li>div+css高級應用學習</li>
		</ul>
		<hr width="100%" size="1" color="red"> 
		<strong>報名</strong>
		<ol type="A">
			<li>報名時間：3月16—21 日。</li>
			<li>報名地點：所在院系辦公室。</li>
			<li>報名費用：按物價局規定85元/人/次（含培訓費用），報名時交齊。</li> 
		</ol>
	</body>
</html>

2.2.4 超鏈接標籤

超鏈接是指從一個對象指向另一個對象的指針，它可以是網頁中的一段文字也可以是一張圖片。實現從一個頁面到另一個頁面的跳轉。
格式：<a href="url" >超鏈接名稱或圖片</a>，其中屬性href爲指定鏈接的目標（另一個網頁的路徑）。

2.2.5 圖片標記

格式：<img src="url" height="" width ="">
其中，屬性src：指定圖像源的URL路徑，alt：替代文本，height：圖片的高度，width：圖片的寬度。
示例：

<html>
	<head>
		<title>超鏈接頁面</title>
	</head>
	<body>
		<h4>超鏈接標籤的使用</h4>
		<a href="http://www.mount-tai.com.cn/nature.shtml" >泰山風景介紹</a>
		<hr width="100%" size="1" color="red">
		<h4>圖片鏈接標記的使用</h4>
		<a href="http://www.mount-tai.com.cn/nature.shtml" >
			<img src="image/taishan.jpg" width="80px" height="80px" alt="請點擊該圖片">
		</a> 
		<br/> 泰山風景介紹 
	</body>
</html>

2.2.6 定時刷新或跳轉

（1）定時自刷新
基本語法：<meta http-equiv="refresh" content="1" />，該語句表示，頁面每隔一秒刷新一次，其中屬性content的值，代表間隔的時間。
（2）定時自動跳轉，
基本語法：<meta http-equiv="refresh" content="3;url=http://www.sohu.com" />，該語句表示，頁面3秒後自動轉到搜狐主頁。

注意：上述標籤一般放在head標籤中。

2.2.7 表格

表格由行、列、單元格組成，一個表格是由<table>、<tr>、<td>或<th>標記來定義的，分別表示表格、表格行、單元格。
（1）基本語法：

<table>
	<caption>表格標題</caption>
	<tr><th>列名一</th><th>列名二</th>...</tr>
	<tr><td>數據一</td><td>數據二</td>...</tr>
</table>

（2）表格屬性（<table>屬性）

示例：

<html>
	<head>
		<title>表格標記舉例</title>
	</head>
	<body>
		<table width="70%" border="1" align="center">
			<tr>
				<th colspan="3">期中成績表</th>
			</tr>
			<tr>
				<th>姓名</th>
				<th>語文</th>
				<th>數學</th>
			</tr>
			<tr>
				<td>張三</td>
				<td colspan="2">100</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>98</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王曉彬</td>
				<td rowspan="2">97</td>  
				<td>78</td>
			</tr>
			<tr>
				<td>成大才</td>
				<td>94</td>
			</tr>
		</table>
	</body>
</html>

2.3 HTML表單標籤與表單設計

表單是由文本框、密碼框、多行文本框、單選、複選框、下拉菜單/列表、按鈕、文件域、隱藏域等各種表單元素及其標記組成的。

2.3.1 form標記及其屬性

表單使用<form>和</form>來定義的，<form>標記有屬性：name、method、action、target等屬性。
語法格式：

<form name="表單名" method="提交方法" action="處理程序">
...
</form>

其中，屬性name是表單對象名稱。

2.3.2 input標記及其屬性

基本語法：<input name="輸入域名稱" type="域類型" value="輸入域的值">
<input>標記主要有六個屬性：type，name，size，value，maxlength，check。其中，name和type是必選的兩個屬性。name：屬性的值是響應程序（由form標記中的action屬性指定）中的變量名。type的主要類型如下：

2.3.3 下拉列表框：select、option

在表單中，通過和標記可設計一個下拉式的列表或帶有滾動條的列表，用戶可以在列表中選中一個或多個選項。
基本語法：

<select name="" size="" multiple>
	<option value="" selected>...</option>
	<option value="">...</option>
	...
</select>

2.3.4 多行文本框textarea標記

基本語法：

<textarea name="" rows="" cols="" wrap="off|virtual|physical">
	初始值
</textarea>

其中：
|——rows設置輸入域的行數；
|——cols設置輸入域的列數；
|——wrap設置是否自動換行。

2.4 表單設計案例——學生入校註冊頁面設計

實現代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>學生信息註冊界面</title>
	<meta charset="utf-8">
</head>
<body>
	<h1 align="center">學生信息註冊</h1>
	<form action="" method="">
		<table>
			<tr>
			    <td>姓名:</td>
				<td><input type="text" name="studentname" value="" /></td>
			</tr>
			<tr>
				<td>性別:</td>
				<td>
					<input type="radio" name="gender" value="男" checked>男</input>&emsp;
					<input type="radio" name="gender" value="女">女</input>
				</td>
			</tr>
			<tr>
				<td>出生日期:</td>
				<td><input type="text" name="birthday" value="" />&emsp;按格式yyyy-mm-dd</td>
			</tr>
			<tr>
				<td>學校:</td>
				<td><input type="text" name="school" value="" /></td>
			</tr>
			<tr>
				<td>專業:</td>
				<td>
					<select name="major">
						<option value="ICS">信息與計算科學</option>
						<option value="CS">計算機科學</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>體育特長:</td>
				<td>
					<input type="checkbox" name="PE" value="籃球" />籃球&emsp;
					<input type="checkbox" name="PE" value="足球" />足球&emsp;
					<input type="checkbox" name="PE" value="排球" />排球&emsp;
					<input type="checkbox" name="PE" value="游泳" />游泳
				</td>
			</tr>
			<tr>
				<td>上傳照片:</td>
				<td><input type="file" name="image" size="30" /></td>
			</tr>
			<tr>
				<td>密碼:</td>
				<td><input type="password" name="password" value=""/></td>
			</tr>
			<tr>
				<td>個人介紹:</td>
				<td><textarea name="self-introduction" rows="5" cols="18" wrap="virtual"></textarea></td>
			</tr>
		</table>
		<input type="submit" value="submit" />&emsp;<input type="reset" value="reset" />
	</form>
</body>
</html>

2.5 HTML框架標籤與框架設計

框架將瀏覽器窗口分割爲幾個窗口，下圖就是一個框架，該框架被分爲4個窗口。

2.5.1 窗口的分割與設置

分割框架的語法結構：

<frameset rows="高度1,高度2..." 或者 cols="寬度1,寬度2...">
	<frame src="網頁1">
	<frame src="網頁2">
	...
</frameset>

2.5.2 子窗口的設置

基本語法：< frame src="html文件的位置" name="子窗口名稱" scrolling="yes或no或auto">

2.5.3 target屬性

在框架結構子窗口的HTML文檔中如果含有超鏈接，當用戶點擊該鏈接時，目標網頁顯示的位置由target屬性指定，若沒有指定則在當前子窗口打開。
target屬性使用格式：<a href="目標網頁地址“ target="顯示目標網頁的子窗口名字">超鏈接文字</a>

2.6 框架設計案例——多媒體播放系統設計

設計如圖所示的頁面，被劃分爲3個子窗口，上面的窗口爲頁面功能提示區，下左部分爲不同類型播放的功能選項，下右部分爲播放系統顯示播放信息窗口。圖示顯示的是，當單擊“圖像顯示”時，所顯示的圖像。
將以下文件放在同一個目錄中，運行main.html即可。
main.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>多媒體播放功能</title>
	<meta charset="utf-8">
</head>
<frameset rows="30%,70%">
	<frame src="index.html" name="index">
	<frameset cols="30%,70%">
		<frame src="src.html" name="src">
		<frame src="index.html" name="realize">
	</frameset>
</frameset>

</html>

index.html:

<h1 align="center">多媒體播放系統</h1>

src.html:

<a href="image.html" target="realize">圖像顯示</a><br/>
<a href="video.html" target="realize">視頻播放</a><br/>
<a href="music.html" target="realize">音樂播放</a>

image.html

<img src="D:\Users\victor\Pictures\wallpaper\壁紙.png" width="980px" height="480px"/>

video.html:

<video src="D:\Users\victor\Downloads\某人的目光.mp4" controls="controls" type="video/mpeg">您的瀏覽器不支持 video 標籤。</video>

music.html:

<audio controls="controls">
  <source src="D:\Users\victor\Music\P.S.我愛你 - A-Lin.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

2 CSS樣式表

CSS是Cascading Style Sheets（層疊樣式表），也就是通常說的樣式表。CSS是一種美化網頁的技術。

2.1 CSS樣式表的定義與使用

定義選擇器的基本語法：selector{屬性:屬性值;屬性:屬性值;......}
說明：
|——CSS選擇器分爲3種類型：
|————標記選擇器，通過HTML標籤定義選擇器。
|————類別選擇器，使用class定義選擇器。
|————ID選擇器，使用id定義選擇器。
|——屬性和值被冒號分開，屬性之間用分號間隔，並由花括號包圍。例如：
|————p {background-color:blue;color:red} //定義標記p選擇器
|————.cs1{font-family:華文行楷;font-size:15px} //定義類別選擇器.csl
|————#cs2{color:yellow} //定義ID選擇器#cs2

2.1.1 CSS樣式表的定義

CCS樣式表的定義實際就是定義CCS選擇器。
1、標記選擇器——通過HTML標籤定義樣式表
（1）基本語法格式：引用樣式的對象{標籤屬性:屬性值;標籤屬性:屬性值;標籤屬性:屬性值;......}
2、類別選擇器——使用class定義樣式表
（1）格式1：標籤名.類名{標籤屬性:屬性值;標籤屬性:屬性值;標籤屬性:屬性值;......}
（2）格式2：.類名{標籤屬性:屬性值;標籤屬性:屬性值;標籤屬性:屬性值;......}
3、ID選擇器——使用id定義樣式表
（1）基本語法：#id名稱{標籤屬性:屬性值標籤屬性:屬性值;標籤屬性:屬性值;......}

2.1.2 樣式表的使用

在HTML中使用CSS的方法有4種方式：行內式、內嵌式、鏈接式、導入式。
1、行內式：利用style屬性直接爲元素設置樣式。
示例：

<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文內容1</p>
<p style="color:#000000;font-style:italic;">正文內容2</p>

2、內嵌式
需要先定義有關的選擇器，然後再使用。利用<style>和</style>標籤對，將樣式表（選擇器）定義在<head>和</head>標籤對之間。
示例：

<html>
	<head>
		<title>頁面標題</title>
		<style type="text/css">
			p{
				color:#0000FF;
				text-decoration:underline;
				font-weight:bold; 
				font-size:25px;
			}
			.info{
				font-size:12px;
				color:red;
			}
		</style>
	</head>
	<body>
		<p>這是第1行正文內容...</p>
		<p class="info">這是第2行正文內容...</p>
	</body>
</html>

3、鏈接式
將定義好的CSS單獨放到一個以.css爲擴展名的文件中，再使用<link>標籤鏈接到所需要使用的網頁中，在<head>與</head>之間。<link>標籤鏈接到網頁的格式：<link href="*.css文件路徑" type="text/css" rel="stylesheet">
4、導入式
該方式與鏈接式方法類似，只是通過import導入到頁面中。
import導入格式爲：<style type="text/css">@import url(*.css文件路徑);</style>

2.2 CSS常用屬性

主要有字體屬性、顏色屬性、背景屬性、文本段落屬性等。

2.2.1 字體屬性

2.2.2 顏色和背景屬性

2.2.3 文本段落屬性

2.3 案例——利用CCS對註冊頁面實現修飾

設計如圖所示的註冊網頁，該頁面沒有修飾，不夠美觀，採用CCS修飾頁面，重新設計頁面。

第1步：按所給出的原始界面，設計HTML文檔；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>註冊界面</title>
	<meta charset="utf-8">
</head>
<body>
	<h1>填寫註冊信息</h1>
	<form action="" method="">
		<table>
			<tr>
			    <td>用戶名:*</td>
				<td><input type="text" name="studentname" /><span>用戶名由字母開頭，後跟字母、數字或下劃線！</span></td>
			</tr>
			<tr>
				<td>密碼:*</td>
				<td><input type="password" name="password1" /><span>設置登錄密碼，至少6位！</span></td>
			</tr>
			<tr>
				<td>確認密碼:*</td>
				<td><input type="password" name="password2" /><span>請重新輸入你的密碼！</span></td>
			</tr>
			<tr>
				<td>性別:</td>
				<td>
					<input type="radio" name="gender" value="男" checked>男</input>&emsp;
					<input type="radio" name="gender" value="女">女</input><span>請選擇你的性別!</span>
				</td>
			</tr>
			<tr>
				<td>郵箱地址:*</td>
				<td><input type="text" name="email" />請填寫您的常用郵箱，可以用此郵箱找回密碼!</td>
			</tr>
			<tr>
				<td>基本情況: </td>
				<td><textarea name="self-introduction" rows="5" cols="50" wrap="physical"></textarea></td>
			</tr>
		</table>
		<input type="radio" name="agreement" />我已經仔細閱讀並同意用戶使用協議<br/>
		<input type="submit" value="submit" />&emsp;<input type="reset" value="reset" />
	</form>
</body>
</html>

第2步：設計CCS文檔。在該文檔中包含所需要的格式控制，從而形成修飾後的頁面；

h1{
	text-align:center;
	color:orange;
}

table tr span{
	color:red;
}

form span{
	color:blue;
}

.input{
	text-align:center;
}

第3步：利用CSS文檔中定義的樣式重新設計原始網頁，形成新網頁。
在第一步中添加<link href="style.css" type="text/css" rel="stylesheet">

3 JavaScript腳本語言

JavaScript是一種腳本語言，可以在瀏覽器中直接運行，是一種在瀏覽器端實現網頁與客戶交互的技術。

JavaScript代碼可以直接嵌套在HTML網頁中，它響應一系列的事件，當一個JavaScript函數響應的動作發生時，瀏覽器就執行對應的JavaScript代碼。

3.1 JavaScript的基本語法

1、數據類型
JavaStript有主要數據類型有：int、float、string（字符串）、boolean、null(空類型)。
2、變量
（1）變量聲明，格式：var 變量名=值;（變量聲明可以省略）
（2）數組的聲明：數組的聲明有三種方式
|——var array1=new Array(); //array1是一個默認長度的數組
|——var array2=new Array(10); //array2是長度爲10的數組
|——var array3=new Array(" aa",12,true); //array1是一個長度爲3的數組，且元素類型不同
3、運算符
在JavaScript中提供了算術運算符、關係運算符、邏輯運算符、字符串運算符、位操作運算符、賦值運算符和條件運算符等運算符。這些運算符與Java語言中的支持的算符運算符及其功能相同。
4、控制語句
JavaScript中的控制語句有：分支語句（if、switch），循環語句（while 、do-while、for），這些語句的語法規則和使用與java語言中的要求一樣。
5、函數的定義和調用
在JavaScript中，函數需要先聲明定義，然後再調用函數。在JavaScript定義函數，有兩種實現方式：
（1）在Web頁面中直接嵌入JavaScript；
（2）鏈接外部JavaScript文件。

3.2 JavaScript的事件

在瀏覽器中網頁與客戶的交互都是通過“事件”引發的，當一個事件發生時，例如“用戶單擊某個按鈕”，瀏覽器認爲在這個按鈕上發生了一個click事件，然後根據該按鈕所定義的事件處理函數，執行相應的JavaSript腳本。

3.2.1 JavaScript的事件

3.2.2 在HTML中引用（指定）事件處理函數

在HTML中指定事件處理程序，需要在HTML標記中添加相應的事件處理程序的屬性，並在其中指定作爲屬性值的代碼或是函數名稱。
使用格式：<標籤各有關屬性及其屬性值 on事件名稱="函數名稱(參數)">
示例：通過input輸入標籤，引發一個單擊事件，該事件的處理函數名是onClick()，其要完成的功能是通過函數test()實現的，而函數test()的功能是顯示一個提示窗口（由windows的alert方法完成），並提示“事件引發一操作，併成功執行了這個操作！”。

<html>
	<head> 
		<title>單擊按鈕事件示例</title>
		<script language="javascript">
			function test(){
			window.alert("事件引發一操作，併成功執行這個操作！");
			}
		</script> 
	</head>
	<body>
		<form action="">
			<input type="Button" value="警告對話框" onclick="test()"><br/>  
		</form> 
	</body>
</html>

3.3 JavaScript的對象

JavaScript中設有內置對象，常用的內置對象：String，Date；瀏覽器的文檔對象：window 、navigator、screen、history、location、 documen等對象。

3.3.1 window對象屬性常用方法

3.3.2 location對象

Location對象實現網頁頁面的跳轉。在HTML中使用標記<a>和</a>來實現頁面的跳轉，在JavaScript中，利用location對象實現頁面的自動跳轉。使用格式：window.location.href="網頁路徑";
例如：跳轉到搜狐網頁：window.location.href="http://www.sohu.com";

3.3.3 history對象

history對象可以訪問瀏覽器窗口的瀏覽歷史，通過go、back、forward等方法控制瀏覽器的前進和後退。

3.3.4 document對象

每個HTML文檔被加載後都會在內存中初始化一個document對象，該對象存放整個網頁HTML內容，從該對象中，可獲取頁面表單的各種信息。
1、獲取表單域對象
獲得表單域對象的主要方法：通過表單訪問、直接訪問。假設有表單：

<form action="" name="form1">
	<input type="text" name="t1" value="">
</form>

則獲取輸入域對象：
（1）通過表單訪問
|——var fObj=document.form1.t1;
|——var fObj=document.form1.elements["t1"]
|——var fObj=document.forms[0].t1;
（2）直接訪問
|——var fObj=document.getElementsByName("t1")[0]
|——var fObj=document.getElementsById("t1");
|——var fObj=document.all("t1").value
2、獲取表單域的值
由於表單域類型不同，其獲取表單域值的方法也不同，常用的方法有(若表單域對象爲fObj)：
（1）獲取文本域、文本框、密碼框的值
|——var v=fObj.value;
（2）獲取複選框的值
|——例如：對於如下的一組複選框：

<input type="checkbox" name="c1" value="1"/>
<input type="checkbox" name="c1" value="2"/>

利用JavaScript取值的方法：

var fObj=document.form1.c1; //form1爲表單的名字
var s="";
for(var i=0;i<fObj.length;++i){
	if(fObj[i].checked==true){
		s=s+fObj[i].value;
	}
}

（3）獲取單選按鈕的值
例如：對於如下的一組單選按鈕：

<input type="radio" name="p" checked/>加
<input type="radio" name="p"/>減

利用JavaScript取值的方法如下：

var fObj=document.form1.p;     //form1爲表單的名字
for(var i=0;i<fObj.length;++i){
	if(fObj[i].checked){
		break;
	}
}
switch(i){
case 0:...;break;
case 1:...;break;
case 2:...;break;
case 3:...;

（4）獲取列表框的值
|——對於單選列表框，用如下方法取出值：

var index=fObj.selectedIndex; //fObj爲列表對象，取出所選項的索引，索引從0開始
var val=fObj.options[index].value; // 取出所選項目的值

|—— 對於多選列表，取值需要循環：

var fObj=document.form1.s1;   //form1爲表單的名字
var s="";
for(var i=0;i<fObj.options.length;++i){
	if(fObj[i].options[i].selected==true){
		s=s+fObj.options[i].value;
	}
}

3.4 案例——JavaScript實現輸入驗證

根據圖所給出的不同信息的輸入要求，利用JavaScript進行表單數據有效性驗證，當不符合要求時，通過警告框，給出提示，並重新輸入。

【分析】輸入表單的驗證就是對錶單中輸入的數據進行檢驗，如果表單中填入的數據不符合要求，則禁止提交，並給用戶適當的提示信息，以便用戶重新輸入。只有當所有輸入的數據符合所要求後，才允許提交，並進入表單標籤的action屬性所指定的處理程序，即：<form action="提交後，進入的處理頁面">。
（1）需要驗證的表單輸入域和要求：
|——用戶名：用戶名是否爲空，是否符合規定的格式（用戶名由字母開頭，後跟字母、數字或下劃線！）；
|——密碼：密碼長度是否超過6，兩次密碼輸入是否一致。
|——郵箱地址：郵箱地址必須符合郵箱格式。
（2）必須注意提交表單並實現輸入驗證的方式
提交方式爲：<input type="button" value="提交" onClick="響應函數">，另外，在驗證函數中，當都滿足格式後，實現提交：document.forms[0].submit();
代碼：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>註冊界面</title>
	<meta charset="utf-8">
	<link href="style.css" type="text/css" rel="stylesheet">
	<script>
		function test(){
			var username = document.getElementsByName('username')[0].value;
			var password1 = document.getElementsByName('password1')[0].value;
			var password2 = document.getElementsByName('password2')[0].value;
			var email = document.getElementsByName('email')[0].value;
			var n=0;
			var regusername = /[a-zA-Z][\w]+$/;
			var regemail = /[a-zA-Z0-9][\w]+@[a-zA-Z]+[\\.](com|org|cn)$/;
			if(!regusername.test(username)){
				document.getElementById('usernameError').innerHTML='用戶名格式錯誤';
			}else{
				document.getElementById('usernameError').innerHTML='';
				n = n + 1;
			}
			if(password1.length < 6){
				document.getElementById('password1Error').innerHTML='密碼少於6位';
			}else{
				document.getElementById('password1Error').innerHTML='';
				n = n + 1;
			}
			if(password1!=password2){
				document.getElementById('password2Error').innerHTML='前後密碼不一致';
			}else{
				document.getElementById('password2Error').innerHTML='';
				n = n + 1;
			}
			if(!regemail.test(email)){
				document.getElementById('emailError').innerHTML='郵箱格式錯誤';
			}else{
				document.getElementById('emailError').innerHTML='';
				n = n + 1;
			}
			if(n == 4){
				document.foms[0].submit;
			}
		}
		function testreset(){
			document.getElementById('usernameError').innerHTML='';
			document.getElementById('password1Error').innerHTML='';
			document.getElementById('password2Error').innerHTML='';
			document.getElementById('emailError').innerHTML='';
		}
	</script>
</head>
<body>
	<h1>填寫註冊信息</h1>
	<form action="" method="">
		<table>
			<tr>
			    <td>用戶名:*</td>
				<td><input type="text" name="username" /><span>用戶名由字母開頭，後跟字母、數字或下劃線！</span><strong id='usernameError'></strong></td>
			</tr>
			<tr>
				<td>密碼:*</td>
				<td><input type="password" name="password1" /><span>設置登錄密碼，至少6位！</span><strong id='password1Error'></strong></td>
			</tr>
			<tr>
				<td>確認密碼:*</td>
				<td><input type="password" name="password2" /><span>請重新輸入你的密碼！</span><strong id='password2Error'></strong></td>
			</tr>
			<tr>
				<td>性別:</td>
				<td>
					<input type="radio" name="gender" value="男" checked>男</input>&emsp;
					<input type="radio" name="gender" value="女">女</input><span>請選擇你的性別!</span>
				</td>
			</tr>
			<tr>
				<td>郵箱地址:*</td>
				<td><input type="text" name="email" /><span>請填寫您的常用郵箱，可以用此郵箱找回密碼!</span><strong id='emailError'></strong></td>
			</tr>
			<tr>
				<td>基本情況: </td>
				<td><textarea name="self-introduction" rows="5" cols="50" wrap="physical"></textarea></td>
			</tr>
		</table>
		<div class="input">
			<input type="radio" name="agreement" /><span>我已經仔細閱讀並同意用戶使用協議</span><br/>
			<input type="button" value="submit" onclick="test()"/>&emsp;<input type="reset" value="reset" onclick="testreset()" />
		</div>
	</form>
</body>
</html>

00 01JavaWeb之靜態網頁開發技術