HTML-注冊頁面 212

用table布局和表單元素編寫一個注冊頁面

1)注冊頁面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注冊登錄頁面</title>
</head>
<body>
    <form action="http://www.bd.com/register.aspx" method="get">
        <table cellpadding="5" cellspacing="0" width="380" height="300">
            <tr>
                <td>用戶名:</td>
                <td><input name="txtName" /></td>
            </tr>
            <tr>
                <td>密 碼:</td>
                <td><input type="password" name="txtPwd" /></td>
            </tr>
            <tr>
                <td>選擇省:</td>
                <td>
                    <select name="SS">
                        <option value="HN" selected="selected">河南</option>
                        <option value="HB">河北</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>性 別:</td>
                <td><input type="radio" name="rd" value="1" />男<input type="radio" name="rd" value="0" />女</td>
            </tr>
            <tr>
                <td colspan="2">
                    <fieldset>
                        <legend>興趣愛好</legend>
                        <input name="interest" type="checkbox" value="ppq" />乒乓球
                        <input name="interest" type="checkbox" checked="checked" value="ts" />跳水
                        <input name="interest" type="checkbox" value="pq" />排球
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="middle">
                    <h3>注冊免責協議</h3>
                    <textarea cols="50" rows="3" readonly="readonly">  **提醒您：在使用**搜索引擎（以下簡稱**）前，請您務必仔細閱讀并透徹理解本聲明。您可以選擇不使用**，但如果您使用**，您的使用行為將被視為對本聲明全部內容的認可。
                            鑒于**以非人工檢索方式、根據您鍵入的關鍵字自動生成到第三方網頁的鏈接，除**注明之服務條款外，其他一切因使用**而可能遭致的意外、疏忽、侵權及其造成的損失（包括因下載被搜索鏈接到的第三方網站內容而感染電腦病毒），**對其概不負責，亦不承擔任何法律責任。
                            任何通過使用**而搜索鏈接到的第三方網頁均系他人制作或提供，您可能從該第三方網頁上獲得資訊及享用服務，**對其合法性概不負責，亦不承擔任何法律責任。
                            **搜索結果根據您鍵入的關鍵字自動搜索獲得并生成，不代表**贊成被搜索鏈接到的第三方網頁上的內容或立場。
                            您應該對使用搜索引擎的結果自行承擔風險。**不做任何形式的保證：不保證搜索結果滿足您的要求，不保證搜索服務不中斷，不保證搜索結果的安全性、正確性、及時性、合法性。因網絡狀況、通訊線路、第三方網站等任何原因而導致您不能正常使用**，**不承擔任何法律責任。
                    </textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="middle">
                    <input type="submit" value="注冊" />      
                    <input type="reset" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

action:指定提交到服務器的哪個程序處理,比如asp.net的一般處理程序等

method:提交的方式1)post隱式提交,比較安全 2)get顯示提交如下圖所示

select:selected="selected"與checkbox的checked="checked"表示默認選中項

textarea:rows與cols表示此文本框內容要顯示的行數與列數

注冊頁面;網址信息自己測試

.form 標簽

1）作用

<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中的內容

2）基本格式

<form action="服務器端地址（接受表單內容的地址）" name="表單名稱" method="post|get">...</form>

3）常用屬性

1.name

表單名稱

2.method

傳送數據的方式，分為post和get兩種方式：

get方式：get方式提交時，會將表單的內容附加在URL地址的后面，所以限制了提交的內容的長度，不超過8192個字符，且不具備保密性。
post方式：post方式提交時，將表單中的數據一并包含在表單主體中，一起傳送到服務器中處理，沒有數據大小限制。

3.action

表單數據的處理程序的URL地址，如果為空則使用當前文檔的URL地址，如果表單中不需要使用action屬性也要指定其屬性為”no“。

4.enctype

設置表單的資料的編碼方式。屬性值：

application/x-www-form-urlencoded：在發送前編碼所有字符（默認）
multipart/form-data：不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。
text/plain：空格轉換為 "+" 加號，但不對特殊字符編碼。

5.target

和超鏈接的屬于類似，用來指定目標窗口。

2.input 標簽

1）注意

input 標記沒有結束標記。

2）基本語法

<input type="" name="" value="" size="" maxlength="">

3）屬性

1.type屬性

text：文本輸入域
password：密碼輸入域
submit：提交按鈕
reset：重置按鈕
button：普通按鈕
radio：單選按鈕，可以使用”checked“屬性來設置默認選中項
checkbox：復選框，可以使用”checked“屬性來設置默認選中項
hidden：隱藏表單域
file：文件域

2.name屬性

定義控件的名稱

3.value屬性

初始化值，打開瀏覽器時，文本框中的內容

4.size屬性

設置控件的長度

5.maxlength屬性

輸入框中最大允許輸入的字符數

3.textarea 標簽

1）作用

使用 textarea 標記可以實現一個能夠輸入多行文本的區域。

2）語法格式

rows屬性和cols屬性分別用來指定，顯示的行數和列數，單位是字符個數；value指定傳送到服務器上面的值。

<textarea name="name" rows="value" cols="value" value="value">... ... </textarea>

4.select 標簽

1）作用

菜單下拉列表域，生成一個下拉列表。

2）option 標簽

作用：

option 標記用來指定列表中的一個選項，需要放在 select 之間。

值：

value：給選項賦值，指定傳送到服務器上面的值。
selected：指定默認的選項。

3）語法格式

<select name="" size="value" multiple>    <option value="value1" selected>選項1</option>    <option value="value2">選項2</option>    <option value="value3">選項3</option>    ... ... ...</select>

4)屬性

multiple屬性：multiple屬性不用賦值，其作用是，表示用可以多選的下來列表，如果沒有這個屬性就只能單選。
size屬性：設置列表的高度。
name屬性：定義這個列表的名稱。

5.label 標簽

1）作用

用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

2）語法

<label for="male">Male</label><input type="radio" name="sex" id="male">

6.舉例

<form name="form" method="post" action="no" enctype="multipart/form-data">  <label for="male">賬號：</label><input type="text" name="username" value="admin"  id="male"><br>  密碼：<input type="password" name="password" size="50" maxlength="6"><br>  性別：<input type="radio" name="sex" value="男"> 男    <input type="radio" name="sex" value="女" checked="checked"> 女<br>  興趣：<input type="checkbox" name="interest" value="籃球">籃球    <input type="checkbox" name="interest" value="足球" checked="checked">足球    <input type="checkbox" name="interest" value="羽毛球" checked="checked">羽毛球    <input type="hidden" name="hidden"><br>  頭像：<input type="file" name="file"><br>  簡介：    <textarea rows="10" cols="30">        </textarea><br>  城市：    <select name="city" multiple>      <option value="beijing">北京</option>      <option value="shanghai" selected>上海</option>      <option value="nanjing">南京</option>      <option value="guangdong">廣東</option>    </select>  <br>  <input type="submit" value="注冊">  <input type="reset">  <input type="button" value="普通按鈕"></form>

、選擇題（1-18題各3分19-36題各2分，共92分）

1.在HTML的<TD>標簽中，align 屬性的取值是（　C?。?/p>

A. top ; B. middle ; C. center ; D. bottom

<tr>

</tr>

<tr>

</tr>

</table>

2. CSS樣式表根據所在網頁的位置，可分為（ B ）

A.行內樣式表、內嵌樣式表、混合樣式表; B.行內樣式表、內嵌樣式表、外部樣式表;

C.外部樣式表、內嵌樣式表、導入樣式表; D.外部樣式表、混合樣式表、導入樣式表

行內樣式：

<html>

<body>

</body>

</html>

-----------------------------------------------------------------

內嵌樣式：

<html>

<head>

#div{width:100px;height:100px;background:red;}

</style>

</head>

<body>

</body>

</html>

--------------------------------------------------------------

外部樣式：

<html>

<head>

</head>

<body>

</body>

</html>

---------------------

css文件

#div{width:100px;height:100px;background:red;}

#和.區別

.點是使用class引用的，多個控件可以同時使用一個class，一個控件上也可以使用多個class，比如

.tdRed{border:solid 1px red;}

.tdBKBlue{background-color:blue;}

而ID是在一個頁面中唯一的

總得來說class表示泛性的，id表示個性的

比如你所有的按鈕都是一個顏色的

.normalButton{background-color:blue;border:solid 0px black;}

對于提交按鈕會要做的大一點

#submit{width:100px;height:100px;}

那么你的按鈕就是

普通的按鈕就是

3. 在插入圖片標簽中，對插入的圖片進行文字說明使用的屬性是（　D?。?/p>

A.name; B.id; C.src; D. alt

4. 對于<FORM action=″URL″ method=*>標簽，其中*代表GET或（　C?。?/p>

A.SET; B. PUT; C. POST ; D. INPUT

Get和post區別

安全性：POST比GET安全；

編碼方式：POST方式提交時可以通過HTML文檔中的<META>元素設置實體部分的編碼方式，而GET方式提交時URI默認的編碼方式為ISO-8859-1，不可以在頁面中設置；

傳輸文件大?。篜OST方式提交文件放在實體部分傳輸，大小無上限，而GET方式提交文件內容放在URI部分傳輸，最大為2KB;

請求速度：GET比POST快。

數據傳輸方式：GET：查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的，如：/test/demo_form.asp?name1=value1&name2=value2；POST:查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的。

5. 下列標簽可以不成對出現的是（　B　）

A.〈HTML〉〈/HTML〉 ; B.〈P〉〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

<p>是段落標簽。

在HTML4.01中某些標簽（<p><br>,<hr>,<img>, <input>,<link>等）允許不成對出現，但是不推薦。在現在的瀏覽器里，都會“兼容”這些單標簽。瀏覽器解釋<p>標簽后，碰到一個不對應的標簽時，會自動填補</p>。所以<p>標簽可以單標簽使用，但不推薦。

在HTML5中規定了元素必須始終關閉，也就是標簽必須成對出現。

6. 對于標簽〈input type=*〉，如果希望實現密碼框效果，*值是（ C ）

A. hidden; B.text ; C. password ; D. submit

7. HTML代碼<select name=“name”></select>表示？（ D ）

A. 創建表格 ; <table>

B. 創建一個滾動菜單; <marquee>

C. 設置每個表單項的內容;

D.創建一個下拉菜單

8. BODY元素用于背景顏色的屬性是（　C　）

A. alink ; B. vlink ; C. bgcolor; D. background

9. 在表單中包含性別選項，且默認狀態為“男”被選中，下列正確的是（　A?。?/p>

A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

C.<input type=checkbox name=sex checked>男；

D.nput type=checkbox name=sex enabled>男

性別(單選框)：<input type="radio" value="1" name="sex" checked="checked"/>男

<input type="radio" value="2" name="sex"/>女

角色（下拉框）：<select name="role">

</select>

10. 在CSS中下面哪種方法表示超鏈接文字在鼠標經過時，超鏈接文字無下劃線？（　B?。?/p>

A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

11. JavaScript代碼： 'abcdefg'.indexOf('D') 結果是（ B ）

A：0 B：-1 C：3 D：4

Js常用方法

1.substr

substr(start,length)表示從start位置開始，截取length長度的字符串。

var src="images/off_1.png";

alert(src.substr(7,3));

彈出值為：off

2.substring

substring(start,end)表示從start到end之間的字符串，包括start位置的字符但是不包括end位置的字符。

var src="images/off_1.png";

alert(src.substring(7,10));

彈出值為：off

3.indexOF

indexOf() 方法返回某個指定的字符串值在字符串中首次出現的位置（從左向右）。沒有匹配的則返回-1，否則返回首次出現位置的字符串的下標值。

var src="images/off_1.png";

alert(src.indexOf('t'));

alert(src.indexOf('i'));

alert(src.indexOf('g'));

彈出值依次為：-1,0,3

4.lastIndexOf

lastIndexOf()方法返回從右向左出現某個字符或字符串的首個字符索引值（與indexOf相反）

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

彈出值依次為：6,15

5.split

將一個字符串分割為子字符串，然后將結果作為字符串數組返回。

以空格分割返回一個子字符串返回

var s, ss;

var s = "1,2,3,4";

ss = s.split(",");

alert(ss[0]);

alert(ss[1]);

12. <img src="name">的意思是？（ A ）

A. 圖像相對于周圍的文本左對齊; B. 圖像相對于周圍的文本右對齊;

C. 圖像相對于周圍的文本底部對齊; D. 圖像相對于周圍的文本頂部對齊

13. 點擊按鈕，在ID為“Link”的DIV標簽內顯示東軟實訓超鏈接, 下面對該按鈕的onClick事件函數描述正確的是：C

A. Link.innerText='<a ;

B. Link.outerText='<a ;

C. Link.innerHTML='<a ;

D. Link.outerHTML='<a

innerHTML 設置或獲取位于對象起始和結束標簽內的

HTML

outerHTML 設置或獲取對象及其內容的 HTML 形式

innerText 設置或獲取位于對象起始和結束標簽內的文本

outerText 設置(包括標簽)或獲取(不包括標簽)對象的文本

innerText和outerText在獲取時是相同效果，但在設置時，innerText僅設置標簽內的文本，而outerText設置包括標簽在內的文本

14.(“24.7” + 2.3 ) 的計算結果是（ C ）

A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

15. （ B ）事件處理程序可用于在用戶單擊按鈕時執行函數

A. onSubmit; B. onClick; C. onChange; D. onExit

屬性當以下情況發生時，出現此事件onabort圖像加載被中斷onblur元素失去焦點onchange用戶改變域的內容onclick鼠標點擊某個對象ondblclick鼠標雙擊某個對象onerror當加載文檔或圖像時發生某個錯誤onfocus元素獲得焦點onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標按鍵被按下onmousemove鼠標被移動onmouseout鼠標從某元素移開onmouseover鼠標被移到某元素之上onmouseup某個鼠標按鍵被松開onreset重置按鈕被點擊onresize窗口或框架被調整尺寸onselect文本被選定onsubmit提交按鈕被點擊onunload用戶退出頁面

16. 用戶更改表單元素 Select 中的值時，就會調用（ D ）事件處理程序

A. onClick; B. onFocus; C. onMouseOver; D. onChange

17.onMouseUp 事件處理程序表示（ A ）

A. 鼠標被釋放; B. 鼠標按下; C. 鼠標離開某個區域; D. 鼠標單擊

18. 下列哪一項表示的不是按鈕（ C ）

A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

19.下面哪一項是換行符標簽？（ C ）

A. <body>; B. <font>; C. <br>; D. <p>

font規定文本字體、大小和顏色：

20. 下列哪一項是在新窗口中打開網頁文檔。（ B ）

A. _self; B. _blank; C. _top; D. _parent

_blank在新窗口中打開被鏈接文檔；

_self是指在本身這個網頁窗口來打開新的網頁鏈接；

_top表示在頂層窗口打開網頁鏈接，即在整個窗口中打開被鏈接文檔；

_parent表示在父窗口打開網頁鏈接；

<a target="_blank">Visit W3School!</a>onclick="javascript：window.open('Default.aspx','_blank');"

21. 下面說法錯誤的是( D )

A. CSS樣式表可以將格式和結構分離;

B. CSS樣式表可以控制頁面的布局;

C. CSS樣式表可以使許多網頁同時更新;

D. CSS樣式表不能制作體積更小下載更快的網頁

CSS樣式表能為我們實現些什么樣的功能?

1、你可以將格式和結構分離。

2、你可以以前所未有的能力控制頁面布局。

3、你可以制作體積更小下載更快的網頁。

4、你可以將許多網頁同時更新，比以前更快更容易。

5、瀏覽器將成為你更友好的界面

將格式和結構分離

HTML從來沒打算控制網頁的格式或外觀。這種語言定義了網頁的結構和各要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。但是網頁設計者要求的更多。所以當 Netscape推出新的可以控制網頁外觀的HTML標簽時，網頁設計者無不歡呼雀躍。我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然后我們將所有東西都放入表格，用隱式GIF空格產生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什么內容迅速加到網頁中變得越來越難。串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。

以前所未有的能力控制頁面的布局

<FONT SIZE>能使我們調整字號，表格標簽幫助我們生成邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地生成80象素的高度，不可能控制行間距或字間距，我們不能在屏幕上精確定位圖象的位置。但是現在，樣式表使這一切都成為可能。

可以制作出體積更小下載更快的網頁還有更好的消息：

樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執行程序，不需要插件，不需要流式。它就象HTML指令那樣快。有了CSS之后，以前必須求助于GIF的事情現在通過CSS就可以實現。還有，正如我先前提到的，使用串接樣式表可以減少表格標簽及其它加大HTML體積的代碼，減少圖象用量從而減少文件尺寸。

可以更快更容易地維護及更新大量的網頁

沒有樣式表時，如果我想更新整個站點中所有主體文本的字體，我必須一頁一頁地修改每張網頁。即便站點用數據庫提供服務，我仍然需要更新所有的模板，而且更新每一模板中每一個實例實例的 <FONT FACE>。樣式表的主旨就是將格式和結構分離。利于樣式表，我可以將站點上所有的網頁都指向單一的一個CSS文件，我只要修改CSS文件中某一行，那么整個站點都會隨之發生變動。

瀏覽器將成為你更友好的界面

不象其它的的網絡技術，樣式表的代碼有很好的兼容性，也就是說，如果用戶丟失了某個插件時不會發生中斷，或者使用老版本的瀏覽器時代碼不會出現雜亂無章的情況。只要是可以識別串接樣式表的瀏覽器就可以應用它。

22. 要使表格的邊框不顯示，應設置border的值是( B )

A. 1; B. 0; C. 2; D. 3

23. 如果要在表單里創建一個普通文本框，以下寫法中正確的是( A )

A. <INPUT>; B. <INPUT type="password">;

C. <INPUT type="checkbox">; D. <INPUT type="radio">

24. 以下有關按鈕的說法中，錯誤的是( B )

A. 可以用圖像作為提交按鈕; B. 可以用圖像作為重置按鈕;

C. 可以控制提交按鈕上的顯示文字; D. 可以控制重置按鈕上的顯示文字。

function fangfa(){

document.formname.submit();

document.formname.reset();

}

在線咨詢

您的項目需求

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

整合營銷服務商

HTML-注冊頁面 212

.form 標簽

1）作用

2）基本格式

3）常用屬性

1.name

2.method

3.action

4.enctype

5.target

2.input 標簽

1）注意

2）基本語法

3）屬性

1.type屬性

2.name屬性

3.value屬性

4.size屬性

5.maxlength屬性

3.textarea 標簽

1）作用

2）語法格式

4.select 標簽

1）作用

2）option 標簽

3）語法格式

4)屬性

5.label 標簽

1）作用

2）語法

6.舉例

您的項目需求