在普通的WEB页面中插入表单是如下的:这里将创建一个比较完整的表单, 将<form>中的元素和属性全部基本全部都展示出来。
首先在HTML的<body></body>标记中添加一个<form>表单。大理石构件来图加工
然后再<form>表单中添加一系列的表单元素和属性。这里在表单的标记中给增加了一些CSS的样式,这样让朋友们感官上看上去页面更炫酷一些。
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "UTF-8" >
<title>Document</title>
</head>
<body>
<form action= "index.php" method= "post" name= "form1" enctype= "multipart/form-data" >
<table width= "400" border= "1" cellpadding= "1" bgcolor= "#999999" >
<tr bgcolor= "#FFCC33" >
<td width= "103" height= "25" align= "right" >姓名:</td>
<td height= "25" >
<input name= "user" type= "text" id= "user" size= "20" maxlength= "100" >
</td>
</tr>
<tr bgcolor= "#FFCC33" >
<td height= "25" align= "right" >性别:</td>
<td height= "25" colspan= "2" align= "left" >
<input name= "sex" type= "radio" value= "男" checked>男
<input name= "sex" type= "radio" value= "女" >女
</td>
</tr>
<tr bgcolor= "#FFCC33" >
<td width= "103" height= "25" align= "right" >密码:</td>
<td width= "289" height= "25" colspan= "2" align= "left" >
<input name= "pwd" type= "password" id= "pwd" size= "20" maxlength= "100" >
</td>
</tr>
<tr bgcolor= "#FFCC33" >
<td height= "25" align= "right" >学历:</td>
<td height= "25" colspan= "2" align= "left" >
<select name= "select" >
<option value= "专科" >专科</option>
<option value= "本科" selected>本科</option>
<option value= "高中" >高中</option>
</select>
</td>
</tr>
<tr bgcolor= "#FFCC33" >
<td height= "25" align= "right" >爱好:</td>
<td height= "25" colspan= "2" align= "left" >
<input name= "fond[]" type= "checkbox" id= "fond[]" value= "音乐" >音乐
<input name= "fond[]" type= "checkbox" id= "fond[]" value= "体育" >体育
<input name= "fond[]" type= "checkbox" id= "fond[]" value= "美术" >美术
</td>
</tr>
<tr bgcolor= "#FFCC33" >
<td height= "25" align= "right" >照片上传:</td>
<td height= "25" colspan= "2" >
<input name= "image" type= "file" id= "image" size= "20" maxlength= "100" >
</td>
</tr>
<tr bgcolor= "#FFCC33" >
<td height= "25" align= "right" >个人简介:</td>
<td height= "25" colspan= "2" >
<textarea name= "intro" cols= "30" rows= "10" id= "intro" ></textarea>
</td>
</tr>
<tr align= "center" bgcolor= "#FFCC33" >
<td height= "25" colspan= "3" >
<input type= "submit" name= "submit" value= "提交" >
<input type= "reset" name= "reset" value= "重置" >
</td>
</tr>
</table>
</form>
</body>
</html>
|
说明:该表单包括了常用表单元素:单行文本框、多行文本框、单选项(radio)、多选项(checkbox),以及多选菜单。
maxlength是与姓名,密码文本框关联的属性,它限制用户输入密码的最大长度为100个字符。
列表框是列表菜单,它的命名属性下都有自己的值供选择。selected是一个特定的属性选择元素,如果某个option附加有该属性,在显示时就把该项列为第一项显示。
intro文本框中的内容,按照rows和cols显示文字、行和列宽。
checked标签是指单选项和多选项中的某个值,默认已经被选择。
将该文件保存为index.php页。
上面文件中的form表单使用的是POST方法传递数据,所以用户提交的数据会保存到$_POST或$_REQUEST的超级全局数组中,我们根据$_POST数组中的值就可以处理提交的数据。在后面我们会详细介绍获取表单数据的方法,POST方法是其中之一,在method="post"中选择。获取表单数据时表单是应用中最基本的操作,所以请朋友们关注表单后面的课程介绍。
注意:由于该页未使用PHP脚本,因此该Web页属于静态页,可以将其保存为 .html格式,然后直接使用浏览器打开该文件查看运行结果即可。