shangrila-xiu

112
文章
101
分类
33
标签

html_chuangtiAndHouduanChuli

窗体与后端处理

建立窗体

form元素

form元素用来HTML文件中插入窗体，属性如下：

1、accept-charset=”utf-8”：指定窗体数据的字符编码方式，Web服务器必须根据指定的字符编码方式处理窗体数据。

2、action=”uri”：指定窗口处理程序的相对地址和绝对地址。

1
<form action="handler.php" method="post"></form>

3、accept=”…”：指定mime类型（超过一个的话，。中间用逗号隔开），如accept=”image/gif,image/jpeg”。

4、enctype=”…”：指定将窗口数据传回Web服务器所采用的编码方式，默认值为”applicaiton/x-www-form-urlencoded”；若要允许上传文件给web服务器，则它的值要指定为”multipart/form-data”；若要将窗体数据传送到电子邮件地址，则enctype属性的值要指定为”text/plain”。

5、

1
method="{get,post}"：指定窗体数据传送给窗体处理程序的方式。当它的值为"get"时，窗体数据会被存放在HTTP GET变量（$_GET），窗体处理程序可以通过这个变量获取窗体数据；当它的值为"post"时，，，，，，，，，，，放在HTTP POST变量 ($_POST)。默认值是get

6、name=”…”：指定窗体的名称（限英文且唯一），此名称不会显示出来，但是后端可以用来处理，供Script使用。

7、target=”…”：指定用来显示窗体处理程序的结构的目标框架。

*8、autocomplete=”{on,off,default}”：指定是否启用自动完成功能，默认为on

1
2
3
<p>
  UserName:<input type="text" autocomplete="on">
</p>

input元素

input元素用来在窗体中插入输入的字段或按钮，没有结束标签。属性如下：

1、align=“{left,center,right}”：（禁用了）指定对其方式

2、accept=”…”：Mime类型

3、checked：将单选按钮或复选框默认为已选状态

4、disabled：取消窗体字段，使窗体数据无法被接受或提交，也就是不可用状态

5、maxlength=”n”：指定单行文本框、密码字段、搜索字段等窗体字段的宽度（n为字符数）

6、name=”…”：指定窗体字段的名称（限英文且唯一）

7、notab：不允许用户以按【Tab】键的方式移至窗体字段。

8、readonly：不允许用户变更窗体字段的数据

9、size=”n”：指定单行文本框、密码字段、搜索字段等窗体字段的宽度（n为字符数）

注意：

size和maxlength的区别？

答：size并不是指定用户可以输入的字符数，而是指定用户在画面上可以看到的字符数。

10、src=”uri”：指定图片提交按钮的地址（当type=”image”时）。

11、usemap：指定浏览器端影像地图所在的文件地址及名称。

12、value=”…”：指定窗体字段的初始值。

*13、form=”formid”：指定窗体字段隶属于ID为formid的窗体

*14min=”n”、max=”n”、step=”n”：指定数字输入类型或日期输入类型的最小值、最大值、间隔值。

*15、required：指定用户必须在窗体字段中输入数据

*16、multiple：（如：

1
2
<input type="file" multiple><!--允许用户提交多个文件-->
<input type="email" multiple><!--允许用户提交多个电子邮件,用逗号隔开-->

）

*17、pattern=”…”：针对窗体字段指定进一步的输入格式，如：

1
<input type="tel" pattern="[0-9]{4}(\-[0-9]){6}"><!--是指输入的格式必须为xxxx-xxxxxx-->

*18、autocomplete=”{on,off,default}”：同form元素的一样

*19、autofocus：指定在加载网页的当下，令焦点自动移至窗体字段。

*20、placeholder=”…”：指定在窗体字段内显示的提示文字，待用户将焦点移至窗体字段时，自动消失。

*21、list：它和html5的新增的”datalist“元素搭配，让用户从预先输入的列表中选择数据或自行输入其他数据。

*22、还有比较重要的：

1
2
3
4
onfocus=""：指定当用户将焦点移至窗体的时候索要执行的Script
onblur=""：指定当用户将焦点从窗体字段移开时索要执行的Script
onchange=""：指定当用户在窗体字段选取文字时索要执行的Script
onselect="..."：指定当前用户在窗体字段选取文字时要执行的Script

*23、type=”state”属性，html4.01提供如下表的输入类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
HTML4.01现有的type属性值  |    输入类型
type="text"              |     单行文本框
type="password"		     |       密码字段
type="radio"			|		单选框	
type="checkbox"			|		复选框
type="submit"			|		提交按钮
type="email"					电子邮件地址
type="url"						网址
type="search"					搜索字段
type="tel"						电话号码
type="reset"					重新输入类型
type="file"						上传文件
type="image"					图片提交按钮
type="hidden"					隐藏字段
type="button"					一般的按钮
type="date"						日期
type="time"						时间
type="datetime"					UTC世界标准时间
type="month"					月份
type="week"						一年的第几周
type="date-local"				本地日期时间
type="number"					数字
type="range"					指定范围内的数字
type="color"					颜色
注意：
为了维持旧浏览器的向下兼容，type属性的默认值是”text”，当浏览器不支持HTML5新增的type属性值时，就会显示默认的单行文本框。

HTML4.0现有的输入类型

1、按钮

1.1在body元素里面是有from元素

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="aliceblue">
		<p>按钮</p>
		<form></form>
	</body>
</html>

1.2在form里面使用input元素插入提交和重置按钮，type属性分别为submit和reset

1
2
3
4
<form action="#" method="post">
	<input type="submit" value="提交" />
	<input type="reset" value="重置" />
</form>

单行文本框

1
2
3
4
<form action="#" method="post">
	姓名：<input type="text" name="UserName" size="40" /><br />
	Email：<input type="text" name="UsernEmail" size="40" value="username@mailserver"/><br />
</form>

单选按钮

1
2
3
4
5
6
7
8
9
10
<form action="#" method="post">
	姓名：<input type="text" name="UserName" size="40" /><br />
	Email：<input type="text" name="UsernEmail" size="40" value="username@mailserver"/><br />
	性别：<input type="radio" value="女" name="sex" />女
		<input type="radio" value="男" name="sex"/>男<br />
	年龄：<input type="radio" value="0" name="age" />未满18岁
	     <input type="radio" value="1" name="age" />18岁以上<br />
	<input type="submit" value="提交" />
	<input type="reset" value="重置" />
</form>

多行文本框：可以使用textarea元素在窗体插入多行文本框，标记 * 的为HTML5新增属性

1、cols=”n” ：宽度

2、disabled ：取消多行文本框，使之无法存取

3、name=”…”：名称，（限英文且唯一）

4、readonly：不允许用户变更多行文本框的资料

5、rows=”n”：高度

*6、form=”formid”：

*7、required：指定用户必须在多行文本框中输入资料

*8、autofocus：指定在网页加载的当下，令焦点自动移至多行文本框。

*9、placeholder=”…”：指定在多行文本框内显示提示文字，等到用户将焦点移至多行文本框，该提示文字会自动消失

*10、

1
2
3
4
onfocus=""：指定当用户将焦点移至窗体的时候索要执行的Script
onblur=""：指定当用户将焦点从窗体字段移开时索要执行的Script
onchange=""：指定当用户在窗体字段选取文字时索要执行的Script
onselect="..."：指定当前用户在窗体字段选取文字时要执行的Script
1
<textarea cols="20" rows="7" readonly>欢迎到达秀秀的博客！</textarea><!--在form元素里面写-->
：注意：
######            在默认情况下，多行文本框是呈现空白不显示任何资料，若要在多行文字方块显示默认的资料，可以将资料放在*textarea*元素里面。

下拉菜单：允许用户从下拉式列表中选择项目，可以使用select 元素搭配option 元素在窗体中插入

1、multiple：指定用户可以在下拉菜单中选择多个项目

2、name=”…”：下拉菜单的名称（英文且唯一）

3、readonly：不允许用户变更下拉菜单项目

4、size=”n”：指定下拉菜单的高度

*5、form=”formid”

*6、required：用户必须在下拉菜单中选择项目

*7、autofocus：指定在加载网页的当下，令焦点自动移至多行文本框

*8。、

1
2
3
4
onfocus=""：指定当用户将焦点移至窗体的时候索要执行的Script
onblur=""：指定当用户将焦点从窗体字段移开时索要执行的Script
onchange=""：指定当用户在窗体字段选取文字时索要执行的Script
onselect="..."：指定当前用户在窗体字段选取文字时要执行的Script

option元素是放在select元素的里面的，用来指定下拉菜单的项目，其属性如下

1、disabled：取消下拉菜单的项目，使之无法存取

2、selected：指定预先选取的项目

3、value=”…”：指定下拉菜单项目的值，在用户单击【提交】按钮后，被选取至下的下拉菜单的值会被传入服务器，若没有指定value属性，那么下拉菜单项目的数据会传入服务器。

1
2
3
4
5
<select name="select" readonly size="1" >
	<option value="请选择" disabled="disabled" selected="selected">请选择</option>
	<option value="男">男</option>
	<option value="女">女</option>
</select><!--在form元素里面写-->

窗体的后端处理

在用户输入窗体数据并单击【提交按钮】后，窗体的数据会传入Web服务器，至于窗体数据的传回方式则取决于form元素的method 属性，当它的值为“get”时，窗体数据会被存放在HTTP GET变量（“$_GET”）;

当它的值为“post”时，窗体数据会被存放在HTTP POST变量（“$_POST”）。

将窗体数据以E-mail的形式传送给指定的收件人

1
<form method="post" action="mailto:jeanchen@mail.lucky.com.tw"></form>

读取窗体数据并制作成确认网页

1
<form method="post" action="confirm.php"></form>
confirm.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
$Name=$_POST["UserName"];
$Mail=$_POST["UsernEmail"];
//$Sex=$_POST["UserSex"];
//$Age=$_POST["UserAge"];
switch($_POST["UserSex"]){//读取单选按钮的选项
	case '男':$Age="男";break;
	case '女':$Age="18岁以上";break;
}
switch($_POST["UserAge"]){//读取单选按钮的选项
	case 0:$Age="未满18岁";break;
	case 1:$Age="18岁以上";break;
}
$Welcome=$_POST["userWelcome"];
$Number=$_POST["UserNumber"];
?>
<p>
	<i><?php echo $Name;?>您好！您输入的信息如下：</i>
	电子邮件：<?php echo $Mail;?><br>
	性别：<?php echo $Sex?>
	年龄：<?php echo $Age;?>
	欢迎：<?php echo $Welcome;?>
	打招呼：<?php foreach($Number as $Value) echo $Value.'&nbsp;';?>
	
</p>

密码字段

1
2
3
<form method="post" action="">
  密码：<input type="password" name="UserPwd" size="10">
</form>

隐藏字段

1
<inputtype="hidden" name="Author" value="Xiu"

上传文件字段

1
<input type="file" name="myfile" size="50">

html5新增的输入类型

email类型

1
2
3
4
<form>
	<input type="email">
	<input type="submit">
</form>

注意事项：

1、不同的浏览器对于输入类型的显示方式不同，报错方式也不尽相同；

2、email类型只能验证用户输入的数据是否符合正确的电子邮件的地址格式，但无法检查该地址是否存在。

3、若要允许用户输入多个地址，就必须加上multiple属性.

4、若要用户必须填写，就加上required

url类型

1
2
3
4
<form>
	<input type="url">
	<input type="submit">
</form>

search类型:它与text类型的区别在于，字段的外观不同。

1
2
3
4
<form>
	<input type="search">
	<input type="submit">
</form>

tel类型:很难验证用户输入的电话号码是否有效。但是tel输入类型和text输入类型的字段外观是一样的。

1
2
3
4
<form>
	<input type="tel">
	<input type="submit">
</form>

number类型

1
2
3
4
<form>
	<input type="number">
	<input type="submit">
</form>

用户使用了number类型，另外还有搭配的三个属性：min(最小值)、max（最大值）、step（间隔值）。它们三个必须为有效的浮点

number类型是用来限制用户只能输入0~10之间的数字，而且向上和向下按钮，所递增和递减的间隔值默认为“1”。

range类型：要求用户通过滑杆的接口输入指定范围内的数字。

1
2
3
4
<form>
	<input type="range">
	<input type="submit">
</form>

用户使用了range类型，另外还有搭配的三个属性：min(最小值)、max（最大值）、step（间隔值）。若没有指定，那么最小默认值是0，最大默认值是100，间隔值为1，默认的时候，滑杆默认指向中间值，若要指定初始值，那么用value属性来指定。

color类型

1
2
3
4
<form>
	<input type="color">
	<input type="submit">
</form>

日期时间类型（date，time，datetime，month，week，datetime-local）

标签文字—lable元素

1
2
3
4
5
6
7
<form>
	<lable for="userName">姓名：</lable>
  <input type="text" id="userName"><br>
  	<lable for="userAge">年龄：</lable>
  <input type="text" id="userAge" min="0"><br>
  <input type="submit"><input type="reset">
</form>

将窗体字段框起来—-fieldset、legend元素

filedset元素用来将指定的窗体字段框起来，其属性如下：

1、*disabled：取消<filedset>元素所框起来的窗体字段无法存取
2、*name=”…”：指定它的名称。唯一且英文
3、*form=”formid”：指定其隶属于id为formid的窗体。

<legend>元素用来在方框的左上方加上说明的文字。属性有align={“top,bottom,left,right”}，已经禁用了，用来指定文字的位置。且必须放在<fieldset> 里面

1
2
3
4
5
6
7
8
9
10
11
<form>
	<fieldset>
		<legend>个人资料</legend>
		<label for="userName">姓名：</label>
		<input type="text" id="userName"/><br>
		<label for="userPwd">密码：</label>
		<input type="text" id="userPwd"/><br>
	</fieldset>
		<input type="submit" />
		<input type="reset" />
</form>

其他新增的窗体元素

html5除了支持现有的form、fieldset、legend、input、select、option、textarea 等窗体元素，还新增了，

output元素：用来显示计算结果或处理结果

1
2
3
4
5
<form onsubmit="return false" oninput="sum.value=num1.valueAsNumber+num2.valueAsNumber">
  	<input name="num1" type="number" step="any">+
  	<input name="num2" type="number" step="any">=
  <output name="sum"></output>
</form>

progress元素：用来显示进度条，代表某个工作的完成进度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
		<p>文件加载进度“：<progress id="pd" max=100><span>0</span>%</progress></p>
	<script language="JavaScript">
		var progressBar=document.getElementById("pd");
		var i=10;
		function updataProgress(newValue){
			progressBar.value=newValue;
			progressBar.getElementsByTagName('span')[0].innerText=newValue;
		}
		function showProgress(){
			if(i<=100){
				updataProgress(i);
				i+=10;
			}else
			clearInterval();
		}
		window.setInterval("showProgress()",1000);
	</script>
	</body>

meter元素：用来显示某个范围内的比例或量标，例如磁盘的使用率、候选人的得票率等。

1
2
<p>王大明得票率：<meter min=0 max=100 value="20%">20%</meter></p>
<p>张大志得票率：<meter min=0 max=100 value="60%">60%</meter></p>

keygen元素：可以根据PSA算法产生一堆密钥。例如在用户从窗体中字段中选择密钥的长度，并单击【送出后】，会产生一对密钥，其中公钥会传送到服务器，私钥会存储在客户端。

1
2
3
4
<form action="processkey.cgi" method="post" enctype="multipart/form-data">
  	<keygen name="key">
  <input type="submit">
</form>

outgroup元素：可以替代一群option元素加上共同的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
	<label>请选择要观赏的节目：</label>
	<select name="TVList">
		<optgroup label="新闻频道">
		<option value="news1">TVBS-N</option>
		<option value="news2">三立新闻台</option>
		<option value="news3">年代新闻台</option>
				
	<optgroup label="娱乐频道">
		<option value="shows1">完全娱乐</option>
		<option value="shows2">型男大主厨</option>
	</select>
	<input type="submit" />
</form>

HTML5新增的form元素

form的属性是用来表示该元素隶属于指定的窗体。

1
2
3
4
5
6
<form id="form1">
  <p><label>姓名：<input type="text" name="userName"></label></p>
   <p><label>建议：<input type="text" name="comments"></label></p>
 
</form>
 <input type="submit" form="form1">

有了form属性后，窗体元素就不一定放在窗体内，也可以放在窗体意外的其他位置，然后通过form属性建立窗体元素与窗体的关联即可。