网页制作09-html,css,javascript初认识のhtml如何使用表单

表单主要用来收集客户端提供的相关信息。,使网页具有交互作用。在网页制作的过程中，常常需要使用表单，如进行会员注册，网上调查和搜索等

访问者可以使用如文本域列表框，复选框以及单选按钮之类的表单对象输入信息，然后单击某个按钮提交这些信息。

示例：

示例操作：

STEP1:准备好示例资源和网页：

STEP2:代码示例

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AI选衣橱</title>
</head><frameset rows="25%,5%,*" frameborder="yes"   bordercolor="#A13BE4" ><frame src="top.html" width="100%" scrolling="no"></frame><!--上1--><frame src="navigation.html" width="100%" marginheight="0" marginwidth="0"></frame><!--上2--><!--下31--><frameset cols="19%,*" border="3" bordercolor="#A13BE4">
<!--下左1--><frameset rows="38%,8%,*" border="1"><frame src="会员登录.html"></frame><frame src="mode.html"></frame><frame src="上衣.html" name="navi2"></frame></frameset>
<!--下右1-->		  <frame src="main.html" name="main" marginheight="0" marginwidth="0"></frame></frameset><noframes></noframes></frameset>
</html>

top.html

<!doctype html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--根据设备调整内容宽度--><style type="text/css">img{opacity: 0.7}/*div1下面 包含着1个图片和1段文字*/#div{position: relative;/*相对定位*/}/*图片部分的设置*/#img{/*position: static;默认定位,可以省略*/width: 100%;height: 100%;}/*文字的设置*/#span{position: absolute;/*绝对定位*/width: 100%;top: 10px;left: 10px;/*离底下0像素*/text-align: center;font-size: 24px;color: #981EF2;}  </style>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><div id="div" ><img src="衣帽间背景.png" id="img"><span id="span"><h1  align="center" ><font face="Aa剑豪体" >AI选衣帽间</font></h1></span></div></body>
</html>

nabigation.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body bgcolor="#BD6CFE"><table bgcolor="#BD6CFE" border="3" width="100%" ><tbody align="center" valign="middle"><tr><td>首页</td><td><a href="上衣.html" target="navi2">上衣</a></td><td>裤子</td><td>裙子</td><td>外套</td><td>帽子</td><td>连衣裙</td><td>内衬</td><td>袜子</td><td>配饰</td></tr></tbody></table>
</body>
</html>

会员登录.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body background="flower.jpg" ><font color="#D27879"><h5 align="center">会员登录</h5><form name="formID" method="post" action="会员登录.html">用户名：<input name="username" type="text" size="15"><br/>密码：&emsp;<input name="password" type="password" value="abcdef" size="15" maxlength="6"></form><p align="center"><input type="submit" value="提交"><input type="submit" value="注册" ></p></font></body>
</html>

mode.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><form action="index.html" method="post" name="mode" ><input name="radiobutton" type="radio" value="radiobutton" checked="checked"/>AI mode<input type="radio" name="radiobutton" value="radiobutton"/>普通mode</form>
</body>
</html>

上衣.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body background="flower.jpg"><h5 align="center" valign="middle">——上衣style——</h5><ul><li><a href="休闲款.html" target="main">——休闲款——</a></li><li>——通勤款——</li><li>——休闲款——</li><li>——礼服款——</li><li>——运动款——</li><li>——睡衣款——</li></ul></body>
</html>

main.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body><h1 align="center">WELCOME</h1>
</body>
</html>

以下是功能介绍：

一、表单标记form

form标记用来创建一个表单，即定义表单的开始和结束位置。

1、提交表单action

Action用于指定表单数据提交到哪个地址进行处理,这个地址可以是绝对地址，也可以是相对地址，还可以是其他形式的地址。

2、表单名称name

用于给表单命名，这一属性不是表单的必要属性，但是为了防止表单提交到后台处理程序时出现混乱，一般需要给表单命名。,表单的名称不能包含特殊字符和空格。

3、传送方式method

表单的属性用于指定，在数据提交到服务器的时候使用哪种提交方法可以取值为get或者post。

get:表单数据被传送到action属性指定的URL，然后这个新URL被送到处理程序上。

Post:表单数据被包含在表单主体中，然后被送到处理程序上。

4、编码方式enctype

enctype属性用于设置表单信息提交的编码方式

Application/x-www-form-urlencoded:默认的编码形式。

Multipart/form-data: Mime编码上传文件的表单必须选择该项。

5、目标显示方式，target

用来指定目标窗口的打开方式，表单的目标窗口往往用来显示表单的返回信息。

blank:将链接的文件载入一个未命名的新浏览器窗口中。

parent:将链接的文件载入含有该链接框架的副框架结果副窗口中。

self:将链接的文件载入该链接所在的同一框架或窗口中。

top:在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。

二、插入表单对象

1、文字字段

语法：

<input name="控件名称" type="text" value="文字字段的默认取值。" size="长度" maxlength="最长字符数"/>

用户可以在文字字段内输入字符或者单行文本。参数类型如下:

type:用来指定插入哪种表单元素如type等于text及文字字段？

name:文字字段的名称用于和页面中其他控件加以区别，名称有英文或数字以及下划线组成，但有大小写之分。

value:用来定义文本框的默认值。

size:用来确定文本框，在页面中显示的程度以字符为单位。

maxlength:用来设置文本框中最多可以输入的字符数。

2、密码域password

语法：

<input name="password" type="password" value="默认值" size="15" maxlength="6">

密码域是一种特殊的文字字段。它的各属性和文字字段是相同的所不同的是密码一输入的字符全部以星号显示。size以字符为单位。

3、单选按钮radio

语法：

<input name="radiobutton" type="radio" value="radiobutton" checked="checked"/>

单选按钮是小而圆的按钮，它可以使用户从选择列表中选择一个选项。

value值对于一个选择列表的所有单选按钮来说，都设置为相同的名称

只有一个段暄按钮可以这只为checked

4、复选框checkbox

grammer:

<input name="01" type="checkbox" value="checkbox" checked="checked" />

复选框可以让用户从一个选择列表中选择超过一个的选项。

5、普通按钮button

grammer:

<input type="submit" name="submit " value="close windows" οnclick="window.close()"/>

在网页中提交页面，清除内容时常常会用到。普通按钮一般情况下要配合脚本来进行表单处理。

的取值就是显示在按钮上的文字。

6、提交按钮submit

提交按钮，单击可以实现表单内容的提交。操作同5

7、重置按钮reset

<input type="reset" name="submit " value="重置" />

重置按钮，用来清除用户在页面中输入的信息。

8、图像域image

<input name="图像域名城 " type="image" src="图像路径“>

还可以使用一幅图像作为按钮，这样做可以创建能想象到的任何外观的按钮。

9、隐藏域hidden

<input name="隐藏域名城 " type="hidden" value="隐藏域取值“>

有时候可能想传送一些数据，这些数据对于用户来说是不可见的，可以通过一个隐藏域来传送这样的数据隐藏域，包含那些要提交处理的数据，但这些数据并不显示在浏览器中。

10、文件域file

<input name="文件域名城 " type="file" size="控件长度“ maxlength="最长字符数”>

在上传文件的时候常常用到它，用于查找硬盘中的文件路径，然后通过表单将选中的文件上传，在上传图像时也常常用到。

三、菜单和列表

下拉菜单select /option

<form action="index.html" method="post" name="menu">area
   <select name="地址">
       <option value="beijing" selected="selected">beijing</option>
       <option value="shanghai">上海</option>
       <option value="tianjin">天津</option>
       <option value="guangzhou">广州</option>
       <option value="shenzhen">深圳</option></select> </form>

列表项select/option/size/multiple

<select name="滚动" size="2" multiple="multiple">
       <option value="yellow" selected="selected">黄色</option>
       <option value="RED">红色</option>
       <option value="ORANGE">橙色</option>
       </select></form>

size是显示的最多列表项数