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　）

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　）

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

4. 对于<FORM action=″URL″ method=*>标签，其中*代表GET或（　C　）

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

Get和post区别

安全性：POST比GET安全；

编码方式：POST方式提交时可以通过HTML文档中的<META>元素设置实体部分的编码方式，而GET方式提交时URI默认的编码方式为ISO-8859-1，不可以在页面中设置；

传输文件大小：POST方式提交文件放在实体部分传输，大小无上限，而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　）

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　）

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 href="http://www.jb-aptech.com.cn">东软实训</a>';

B. Link.outerText='<a href="http://www.jb-ptech.com.cn">东软实训</a>';

C. Link.innerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>';

D. Link.outerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</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 href="http://www.w3school.com.cn/" 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.举例

您的项目需求