<form action=”地址” method=””>
表单元素
</form>
form标签是表单的外壳,主要有四个属性:
action:表单提交的地址(后台服务器地址)
method:提交表单的方法,两种请求方式,post、get
target:在何处打开action
enctype:(编码方式)
applocation/x-www-form-erlencoded 在发送前编码所有字符(默认)
text/plain:空格转换为”+”号,但不对特殊字符编码
multipart/form-data:使用包含文件上传控件的表单时,必须使用该值。例如:上传音频、视频。
1、区别:(体现在方式、安全、数据量三个方面)
- 方式,点击提交(发请求时),get将请求数据变成”k=value”的形式,然后组装到URL上。post方式提交请求时,数据通过浏览器传输给后台,但是URL没发生变化。
- 安全,get将信息组装到URL上,信息泄露,不安全;post方式的URL没发生变化更加安全。
- 数据量,浏览器地址栏能存放的字符有限的(容量有限),get方式的URL过于冗长,当超出限制时,浏览器自动截断URL,则传给后台的数据不完整,所以对数据大小有限制。而post方式的URL更干净、轻便,能完整地将数据传递给后台,无数据大小限制。
2、什么时候用get,什么时候用post(使用场景)
get:向后台查询东西,如查询论文;即向后台索要数据,用关键词来获取大量数据。安全性要求低,简单。
post:向后台传数据,例论文查重(数据很大,提交给后台)。安全性要求高。
是表单收集信息的元素,主要有以下属性:
<label for="input_username">姓名:</label><input type="text" name="username" id="input_username" placeholder="用户名"/>
效果:
<label for="input_password">密码:</label><input type="password" name="password" id="input_password" placeholder="密码"/>
效果:
效果:
效果:
<label>我的car:</label><select name="transportation"><option value="bus">公交</option><option value="subway" selected>地铁</option><option value="taxi">出租车</option></select>
效果:
<label >评论:</label><textarea name="recomment" placeholder="ddd" cols="60" rows="10"></textarea>
效果:
<label for="zjz">证件照:</label><input type="file" name="photo" id="zjz" accept="image/jpg"/>
其中accept规定了文件格式。
效果:
<input type=”hidden” name=”abc” value=”123”>
点击提交时,hidden里隐藏的数据也提交给了后台;abc=’123’
作用:(1)暂存信息,(用户看不到),便于设计者随时调用程序。
(2)用于安全性校验,例如通过设置hidden隐藏域,服务器可以验证用户权限,避免伪造的假网站提交数据。
<input type="button" value="按钮"/>
效果:
<input type="submit" value="提交"/>
效果:
<input type="reset" value="复位"/>
效果:
使用表单中的文件域(<input type="file".../>)控件可以上传文件。
打开DreamWeaver,这里使用的版本是CS6,新建一个php文件。
保存到网站目录下,命名为upload.php。
在代码中插入一个表单
对话框中,操作留空,方法选择“post”,编码类型输入“multipart/form-data”,名称命名为“upload_form”,其中编码类型必须为“multipart/form-data”。点击确定,产生的代码如下:
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form"></form>
</body>
接下来在form中插入一个标签控件、一个文件域控件和一个上传按钮。
结果如下:
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
不同的浏览器,对于文件域控件的显示不同,IE9浏览器和FireFox中的预览效果都要看一下
代码中,重要的是名为imgfile的文件域控件,type属性为“file”,表示这是一个文件域控件。
accept属性表示点击“浏览...”按钮时,弹出的打开对话框中的文件类型。accept="image/gif, image/jpeg"表示我们只想在文件打开对话框中显示后缀名为“gif”和“jpg”、“jpeg”的文件。对于此属性,有些浏览器并不支持。比如在IE9中,此属性不起任何作用。在chrome中,此属性起作用。
如果想支持所有的图像文件,accept值可以设置为“image/*”,在chrome中,文件类型显示
好了,html代码就写完了,因为action="",表示点击上传按钮时,将表单提交给自身,因此,我们还要添加接收表单的处理代码。
代码如下:
<?php
if (isset($_FILES['imgfile'])
&&is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile']
$imgFileName = $imgFile['name']
$imgType = $imgFile['type']
$imgSize = $imgFile['size']
$imgTmpFile = $imgFile['tmp_name']
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName)
$validType = false
$upRes = $imgFile['error']
if ($upRes == 0)
{
if ($imgType == 'image/jpeg'
|| $imgType == 'image/png'
|| $imgType == 'image/gif')
{
$validType = true
}
if ($validType)
{
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
)
echo $strPrompt
}
}
}
?>
代码分析:
$_FILES是一个数组变量,用于保存上传后的文件信息。
$_FILES['imgfile']表示文件域名称为'imgfile'的控件提交服务器后,上传的文件的信息。
一个上传的文件,有以下属性信息:
'name': 上传的文件在客户端的名称。
'type': 文件的 MIME 类型,例如"image/jpeg"。
'size': 已上传文件的大小,单位为字节。
'tmp_name':上传时,在服务器端,会把上传的文件保存到一个临时文件夹中,可以通过此属性得到临时文件名。
'error':文件在上传过程中的错误代码。如果上传成功,此值为0,其它值的意义如下:
1:超过了php.ini中设置的上传文件大小。
2:超过了MAX_FILE_SIZE选项指定的文件大小。
3:文件只有部分被上传。
4:文件未被上传。
5:上传文件大小为0。
代码中首先判断$_FILES['imgfile']变量是否存在,如果存在,并且$_FILES['imgfile']['tmp_name']变量所指文件被上传了,判断error属性,如果属性为0,把上传后的图像从临时文件夹移到upfile文件夹中,显示上传文件的信息,并显示上传后的图像。
如果error值不为0,表示上传失败,显示失败信息。
完成的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.mobiletrain.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.mobiletrain.org ">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>上传图片文件</title>
</head>
<?php
if (isset($_FILES['imgfile'])
&&is_uploaded_file($_FILES['imgfile']['tmp_name']))
{
$imgFile = $_FILES['imgfile']
$upErr = $imgFile['error']
if ($upErr == 0)
{
$imgType = $imgFile['type']//文件类型。
/* 判断文件类型,这个例子里仅支持jpg和gif类型的图片文件。*/
if ($imgType == 'image/jpeg'
|| $imgType == 'image/gif')
{
$imgFileName = $imgFile['name']
$imgSize = $imgFile['size']
$imgTmpFile = $imgFile['tmp_name']
/* 将文件从临时文件夹移到上传文件夹中。*/
move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName)
/*显示上传后的文件的信息。*/
$strPrompt = sprintf("文件%s上传成功<br>"
. "文件大小: %s字节<br>"
. "<img src='upfile/%s'>"
, $imgFileName, $imgSize, $imgFileName
)
echo $strPrompt
}
else
{
echo "请选择jpg或gif文件,不支持其它类型的文件。"
}
}
else
{
echo "文件上传失败。<br>"
switch ($upErr)
{
case 1:
echo "超过了php.ini中设置的上传文件大小。"
break
case 2:
echo "超过了MAX_FILE_SIZE选项指定的文件大小。"
break
case 3:
echo "文件只有部分被上传。"
break
case 4:
echo "文件未被上传。"
break
case 5:
echo "上传文件大小为0"
break
}
}
}
else
{
/*显示表单。*/
?>
<body>
<form action="" method="post" enctype="multipart/form-data" name="upload_form">
<label>选择图片文件</label>
<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
<input name="upload" type="submit" value="上传" />
</form>
</body>
<?php
}
?>
</html>