上传表单html
㈠ html上传表单属性
表单的文件上传元素默认样式确实是：
只是这样并不美观，于是常见做法是创建一个文本框和一个按钮来配合文件上传元素：
核心就是将上传元素的透明度设置为0，即完全透明，然后绝对定位到按钮上上面，这样用户点击按钮时，实际是点击到上传元素。然后添加js，将上传元素的value值赋给文本框的value值，实现在文本框中显示文件元素的value属性值。
该上传元素的onchange事件监听函数为：onchange="document.getElementById('textfield').value=this.value"
㈡ html 表单上传图片
使用表单中的文件域（<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/html; charset=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>
㈢ HTML中如何使用html表单提交的操作
表单标签的主要作用是：在HTML页面中创建一个表单，在用户填写完表单信息后，将数据提交给服务器。需要填写数据的标签必须要放在表单标签体里面。 常用的属性： action：请求路径，在该属性中确定表单数据提交的服务器地址。 method：请求方式。常用的请求方式有：get，post。 get（默认）：1.get的请求的数据有限 2.提交的表单数据是追加在请求的路径上，如：regist.action?username=jack&password=1111。追加是在请求地址的后面加上?连接。之后每一对数据使用&连接。 post：1.提交的数据不在请求路径上追加，不显示在地址栏上。 2.理论上，post请求的数据量是无限的。
㈣ html表单的几种提交方式总结
最普通最常用最一般的方法就是用submit type看代码：
代码如下:
<form name=”form” method=”post” action=”#">
<input type=”submit” name=”submit” value=”提交">
</form>
另外，还有一种常用的方法是使用图片： 代码如下:
<form name=”form” method=”post” action=”# ">
<input type=”image” name=”submit” src=”btnSubmit.jpg”>
</form>
第三种是使用链接来提交表单，用到了javascript的DOM模型，代码如下:
<form name=”form” method=”post” action=”#”>
<a href=”javascript:form.submit();”>提交</a>
</form>
这种方法实际上是调用了一个javascript函数，使用javacript函数来提交表单，方法就非常多非常灵活了，比如可以把它加入到任意一个标签的onclick事件中： 代码如下:
<form name=”form” method=”post” action=”#”>
<div onclick=”javascript:form.submit();”>
<span>提交</span>
</div>
</form>
比如一个表单里的提交按钮所指向的处理页面不同，这样由于表单在定义的时候就已经确定下表单数据的处理页面，所以单纯地在表单里放多个提交按钮是没有办法达到目的的。这就需要javascript。
首先定义一个函数：
代码如下:
<script language=javascript>
function query(){
form.action=”query.php”;
form.submit();}
function update(){
form.action=”update.php”;
form.submit();}
</script>
通过javascript改变form的action属性值，这样就可以实现多提交按钮而且功能不同了，页面内代码如下：
<form name=”form” method=”post” action=”#”>
<input type=”button” name=”query” onclick=”query();” value=”查询”>
<input type=”button” name=”update” onclick=”update();” value=”更新”>
</form>
㈤ HTML 表单提交 的简单代码
1、打开Dreamweaver编辑器，准备好一个空白的html文件，写入基本的html结构：
㈥ html表单的几种提交方式总结
form保单提交的几种方法：
1、方法一：利用form的onsubmit()函数
<script type="text/javascript">
function validateForm(){
if(document.reply.title.value == ""){ //通过form名来获取form
alert("please input the title!");
document.reply.title.focus();
return false;
}
if(document.forms[0].cont.value == ""){ //通过forms数组获取form
alert("please input the content!");
document.reply.cont.focus();
return false;
}
return true;
}
<form name="reply" method="post" onsubmit="return validateForm( );">
<input type="text" name="title" size="80" /><br />
<textarea name="cont" cols="80" rows="12"></textarea><br />
<input type="submit" value="提交" >
</form>
注意：
1.onsubmit属性内容一定要有return关键字，否则函数会直接执行，不会返回
2.validateForm一定要返回一个boolean类型的返回值
3.提交按钮要写成submit类型的
方法二：利用input类型为submit组件的onclick()函数
1.将上面form标签中的onsubmit="return validateForm()"属性，去掉。
2.为“提交”按钮添加onclick事件，如下：
<input type="submit" value="提交" onclick="return validateForm();">
方法三：利用button组件的onclick()函数，手动提交
<script type="text/javascript">
function modifyItem() {
if (trim(document.getElementById("itemName").value) == "") {
alert("物料名称不能为空！");
document.getElementById("itemName").focus();
return;
}
with (document.getElementById("itemForm")) {
method = "post";
action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
submit();
}
}
//返回
function goBack() {
window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
}
</script>
<form name="itemForm" id="itemForm">
<input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >
<input name="itemName" type="text" id="itemName" value="${ item.itemName }" >
<input name="btnModify" type="button" id="btnModify" value=“修改" onclick="modifyItem()">
</form>
注意：
.提交时，设置form的action和methods属性，然后利用form.submit()函数提交。
㈦ HTML表单的POST上传方式
是<form></form>之间的内容，例如：<form action="/search" name="search-form" method="post" id="search-form" class="search-form">，其中method就是上传的方式。
㈧ html表单怎么上传图片
html表单这样上传图片：
<!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/html; charset=utf-8" />
<title>上传图片</title>
</head>
㈨ html表单的几种提交方式总结
form保单提交的几种方法：
1、方法一：利用form的onsubmit()函数
<scripttype="text/javascript">
functionvalidateForm(){
if(document.reply.title.value==""){//通过form名来获取form
alert("pleaseinputthetitle!");
document.reply.title.focus();
returnfalse;
}
if(document.forms[0].cont.value==""){//通过forms数组获取form
alert("pleaseinputthecontent!");
document.reply.cont.focus();
returnfalse;
}
returntrue;
}
<formname="reply"method="post"onsubmit="returnvalidateForm();">
<inputtype="text"name="title"size="80"/><br/>
<textareaname="cont"cols="80"rows="12"></textarea><br/>
<inputtype="submit"value="提交">
</form>
注意：
1.onsubmit属性内容一定要有return关键字，否则函数会直接执行，不会返回
2.validateForm一定要返回一个boolean类型的返回值
3.提交按钮要写成submit类型的
方法二：利用input类型为submit组件的onclick()函数
1.将上面form标签中的onsubmit="return validateForm()"属性，去掉。
2.为“提交”按钮添加onclick事件，如下：
<input type="submit" value="提交" onclick="return validateForm();">
方法三：利用button组件的onclick()函数，手动提交
<scripttype="text/javascript">
functionmodifyItem(){
if(trim(document.getElementById("itemName").value)==""){
alert("物料名称不能为空！");
document.getElementById("itemName").focus();
return;
}
with(document.getElementById("itemForm")){
method="post";
action="item.do?command=modify&pageNo=${itemForm.pageNo}";
submit();
}
}
//返回
functiongoBack(){
window.self.location="item.do?command=list&pageNo=${itemForm.pageNo}";
}
</script>
<formname="itemForm"id="itemForm">
<inputname="itemNo"type="text"id="itemNo"value="${item.itemNo}">
<inputname="itemName"type="text"id="itemName"value="${item.itemName}">
<inputname="btnModify"type="button"id="btnModify"value=“修改"onclick="modifyItem()">
</form>
注意：
1.提交时，设置form的action和methods属性，然后利用form.submit()函数提交。
㈩ 怎样用html写表单的教程
我们在浏览一些网站时经常会用到一种网页元素--表单。如下图，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来介绍HTML表单相关的一些知识点。
1)表单:帮助服务器收集客户端信息的一种机制
<formaction="提交到的页面"method="提交的方法">
表单控件
form>
<inputtype="text"name=""id=""value=""size=""placeholder=""/>
<inputtype="password"name=""id=""size=""/>
<inputtype='radio'name=""value=""checked>标示符
性别:<inputtype='radio'name=""value=""checked>男
<inputtype='radio'name=""value=""checked>女
<inputtype='radio'name=""value=""checked>保密
<inputtype='checkbox'name=""id=""value=""checked>标示
<inputtype='checkbox'name='classes[]'checkedvalue='1'>语文
<inputtype='checkbox'name='classes[]'value='2'>数学
<inputtype='checkbox'name='classes[]'value='3'>历史
<inputtype='checkbox'name='classes[]'value='4'>政治
<inputtype='checkbox'name='classes[]'value='5'>物理
<inputtype='checkbox'name='classes[]'value='6'>化学
<inputtype='checkbox'name='classes[]'checkedvalue='7'>美术
action:数据最后所提交的页面 绝对路径/相对路径
method:数据提交服务器时的提交方法 post get
2)表单控件:表单用于用户填写信息的控件
1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件
(注册时，用户名填写)
格式:
type:设置控件样式 text
name:用于表单收集信息的一种标示符，也就是控件的名称
2、密码框:只是用户输入的内容看不到
3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组
name:为了保证传递服务器数据只有一个，所以name值必须相同
value：是用提交服务器时，该标签被提交的数据,value不能相同;
checked:默认按钮组中的那个按钮被选中
所有表单控件name值不能相同!!!
4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个[]
格式:
选课:
注意：一定要在name属性后面添加[]
5)下拉列表框:
格式:
<selectname="">
<optionvalue=""selected>下拉列表项option>
<optionvalue="">下拉列表项option>
<optionvalue="">下拉列表项option>
<optionvalue="">下拉列表项option>
<optionvalue="">下拉列表项option>
select>
<textareaname=""id=""cols=""rows="">
内容
textarea>
<textareaname='descs'cols="50"rows="10">
我是个学生
textarea>
<inputtype="hidden"name=“”value=””>
<inputtype="file"name=””>
<inputtype='button'name=””value=""/>
<inputtype='button'name='clicks'value="点我"/>
<inputtype='submit'name="add"value='注册'/>
<inputtype='reset'name='cancel'value='重置'>
<inputtype='image'src='图片地址'name=””>
multiple:允许用户选中多个下拉列表项
optgroup: 设置下拉分类标示
6) 文本域：可以输入多行数据的表单控件
rows:设置文本域可以输入的行数
cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)
个人介绍:
7)隐藏域：
8)上传控件：
9)按钮标签:
普通按钮:为js提供的控件
value：按钮中显示的数据和提交到服务器后该控件提交的值
提交按钮:点击后可以提交表单
重置按钮:点击后可以将用户输入的数据清空
图片提交按钮:使用图片作为提交按钮
本文的分享就到这，希望我的回答能帮到你。