html表单提交图片（html用图片代替提交按钮问题）

本文目录

• html用图片代替提交按钮问题
• html表单里面的图片点击相应图片跳转到本页其他去看代码怎么写
• 怎样用html写表单的教程
• 用HTML语言做一个表格
• html问题：我的表单提交按钮用的是一个图片，如何实现submit的功能
• html表单怎么上传图片
• html 表单上传图片

html用图片代替提交按钮问题

给type为image的input 添加onclick事件：

《form name="RedForm" action="#" 》

《input type="image" name="..." src="..." onClick="document.formName.submit()"》

《/form》 

fromName是表单的name属性。

这段代码没有问题。复制测试是可以正常运行的。所以JavaScript出错应该是Javascript代码写错。

扩展资料：

美化提交按钮的另一个方法：

用css为按钮设置背景图片。

提交按钮的class为formsubmit：

.formsubmit{ 

background:url(../button.png) no-repeat bottom left; 

width:247px; 

height:60px;

cursor:pointer; 

border:0px;

}

设置鼠标经过的效果：

.formsubmit:hover{ 

background:url(../button_2.png);

}

html表单里面的图片点击相应图片跳转到本页其他去看代码怎么写

需要在一张图片上设置多个能点击跳转的链接区域时，推荐使用网页的热点链接。

参考代码如下：

《map name="Map" id="Map"》
  《area shape="rect" coords="89,41,379,136" href="#" target="baidu.com" /》
  《area shape="rect" coords="89,175,394,264" href="#" /》
  《area shape="rect" coords="95,293,386,355" href="#" /》
《/map》

网页热点使用方法：

个人推荐Dreamwever可视化操作来创建网页热点。

1、打开Dreamwever，新建一个页面，插入一张图片，

2、使用左下角的热点工具。

3、点击“矩形”或其他热点工具，再在图片上拖动位置

4、选中其中一个热点，在下方的属性窗口中的链接栏填上你的链接，热点链接就创建完成了。

怎样用html写表单的教程

我们在浏览一些网站时经常会用到一种网页元素--表单。如下图，像这样允许用户输入并使用按钮提交信息的功能，我们称之为表单，那么接下来介绍HTML表单相关的一些知识点。

1)表单:帮助服务器收集客户端信息的一种机制

• 《form action="提交到的页面" method="提交的方法"》         

• 表单控件  

• form》  

action:数据最后所提交的页面 绝对路径/相对路径

method:数据提交服务器时的提交方法 post get

2)表单控件:表单用于用户填写信息的控件

1、文本控件: 用于用户填写较少信息，且可以显示用户填写信息的控件

(注册时，用户名填写)

格式:

• 《input type="text" name=""  id=""  value="" size="" placeholder=""/》 

type:设置控件样式 text

name:用于表单收集信息的一种标示符，也就是控件的名称

2、密码框:只是用户输入的内容看不到

• 《input type="password" name="" id=""  size=""/》 

3、单选按钮组:由多个单选按钮组成的按钮组，只能选中其中一个，这种按钮组

• 《input type=’radio’ name="" value="" checked》标示符 

name:为了保证传递服务器数据只有一个，所以name值必须相同

value：是用提交服务器时，该标签被提交的数据,value不能相同;

checked:默认按钮组中的那个按钮被选中

• 性别:《input type=’radio’ name="" value="" checked》男 

• 《input type=’radio’ name="" value="" checked》女 

• 《input type=’radio’ name="" value="" checked》保密 

所有表单控件name值不能相同!!!

4、复选按钮组: 与单选按钮组的区别可以选择多个，为了能将用户选择的多项内容传递服务器中，要将name名字后面加个

格式:

• 《input type=’checkbox’ name="" id="" value="" checked》标示 

选课:

• 《input type=’checkbox’ name=’classes’ checked value=’1’》语文 

• 《input type=’checkbox’ name=’classes’  value=’2’》数学 

• 《input type=’checkbox’ name=’classes’  value=’3’》历史 

• 《input type=’checkbox’ name=’classes’  value=’4’》政治 

• 《input type=’checkbox’ name=’classes’  value=’5’》物理 

• 《input type=’checkbox’ name=’classes’  value=’6’》化学 

• 《input type=’checkbox’ name=’classes’ checked value=’7’》美术   

注意：一定要在name属性后面添加

5)下拉列表框:

格式:

• 《select name="" 》 

• 《option value="" selected》下拉列表项option》 

• 《option value="" 》下拉列表项option》 

• 《option value="" 》下拉列表项option》 

• 《option value="" 》下拉列表项option》 

• 《option value="" 》下拉列表项option》 

• select》 

multiple:允许用户选中多个下拉列表项

optgroup: 设置下拉分类标示

6) 文本域：可以输入多行数据的表单控件

• 《textarea name="" id="" cols="" rows=""》 

• 内容 

• textarea》 

rows:设置文本域可以输入的行数

cols:设置的文本域输入的列数(一行可以输入多少个字符)(不是PX)

个人介绍:

• 《textarea name=’descs’ cols="50" rows="10"》 

• 我是个学生 

• textarea》 

7)隐藏域：

• 《input type="hidden" name = “”value =””》 

8)上传控件：

• 《input type="file" name=””》 

9)按钮标签:

普通按钮:为js提供的控件

• 《input type=’button’ name=”” value=""/》 

value：按钮中显示的数据和提交到服务器后该控件提交的值

• 《input type=’button’ name=’clicks’ value="点我"/》 

提交按钮:点击后可以提交表单

• 《input type=’submit’ name="add" value=’注册’/》 

重置按钮:点击后可以将用户输入的数据清空

• 《input type=’reset’ name=’cancel’ value=’重置’》 

图片提交按钮:使用图片作为提交按钮

• 《input type=’image’ src=’图片地址’ name=””》 

本文的分享就到这，希望我的回答能帮到你。

用HTML语言做一个表格

html做个表格的步骤如下：

1、首先新建一个html，点击《body》《/body》中间，先填入表格内容；

2、内容根据需求来写即可，示例代码如下：

《table》

《p style="text-align:center "》功课表《/p》

《tr》

《th》语文《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《tr》

《th》数学《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《tr》

《th》英文《/th》

《td》7:00-7:40《/td》

《td》7:50-8:30《/td》

《/tr》

《/table》

3、然后在《head》《/head》中间输入样式表的样式；

4、样式也根据个人的需求来设置即可，设置单元格的宽度高度，合并单元格，位置，颜色等等，示例代码如下：

《style type="text/css"》

body

{

width:340px;

height :800px;

}

table

{

border-collapse :collapse ;

}

th,td

{

width:100px;

height:40px;

border :1px solid black;

font-size:12px;

text-align :center;

}     

《/style》

5、这里需要注意这个代码“table”的意义是将表格边框合并为单一的边框，将相邻变合并。

6、预览结果如下所示，一个简单的表格就制作出来了。

html问题：我的表单提交按钮用的是一个图片，如何实现submit的功能

方法很多 用《input type = "submit"》,把图片设置为按钮的背景，
或者把图片放到《a》标签里：《a href="javascript:;" onclick="document.form.submit();"》《img /》《/a》
或者直接写img的onclick事件，判断好了提交form就行了

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》

***隐藏网址***

《title》上传图片《/title》

《/head》

一、html在表单元素中这样添加背景图

用户名:《input type="text" name="user" style="background: url(图片路径)" /》《br/》
密 码: 《input type="password" name="mima" style="background: url(图片路径)" /》《br/》
《input type="submit" value="确定" style="background: url(图片路径)" /》　　
《input type="reset" value="取消" style="background: url(图片路径)" /》

html 表单上传图片

1. 使用表单中的文件域（《input type="file".../》）控件可以上传文件。

2. 打开DreamWeaver，这里使用的版本是CS6，新建一个php文件。

3. 保存到网站目录下，命名为upload.php。

4. 在代码中插入一个表单

5. 对话框中，操作留空，方法选择“post”，编码类型输入“multipart/form-data”，名称命名为“upload_form”，其中编码类型必须为“multipart/form-data”。点击确定，产生的代码如下：

   《body》

   《form action="" method="post" enctype="multipart/form-data" name="upload_form"》《/form》

   《/body》

6. 接下来在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》

7. 不同的浏览器，对于文件域控件的显示不同，IE9浏览器和FireFox中的预览效果都要看一下

8. 代码中，重要的是名为imgfile的文件域控件，type属性为“file”，表示这是一个文件域控件。

   accept属性表示点击“浏览...”按钮时，弹出的打开对话框中的文件类型。accept="image/gif, image/jpeg"表示我们只想在文件打开对话框中显示后缀名为“gif”和“jpg”、“jpeg”的文件。对于此属性，有些浏览器并不支持。比如在IE9中，此属性不起任何作用。在chrome中，此属性起作用。

9. 如果想支持所有的图像文件，accept值可以设置为“image/*”，在chrome中，文件类型显示

10. 好了，html代码就写完了，因为action=""，表示点击上传按钮时，将表单提交给自身，因此，我们还要添加接收表单的处理代码。

    代码如下：

    《?php

    if (isset($_FILES) 

    && is_uploaded_file($_FILES))

    {

     $imgFile = $_FILES;

    $imgFileName = $imgFile;

    $imgType = $imgFile;

    $imgSize = $imgFile;

    $imgTmpFile = $imgFile;

    move_uploaded_file($imgTmpFile, ’upfile/’.$imgFileName);

    $validType = false;

    $upRes = $imgFile;

    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;

    }

    }

    }

    ?》

11. 代码分析：

    $_FILES是一个数组变量，用于保存上传后的文件信息。

    $_FILES表示文件域名称为’imgfile’的控件提交服务器后，上传的文件的信息。

    一个上传的文件，有以下属性信息：

    ’name’： 上传的文件在客户端的名称。

    ’type’： 文件的 MIME 类型，例如"image/jpeg"。

    ’size’： 已上传文件的大小，单位为字节。

    ’tmp_name’：上传时，在服务器端，会把上传的文件保存到一个临时文件夹中，可以通过此属性得到临时文件名。

    ’error’：文件在上传过程中的错误代码。如果上传成功，此值为0，其它值的意义如下：

     1：超过了php.ini中设置的上传文件大小。

      2：超过了MAX_FILE_SIZE选项指定的文件大小。

      3：文件只有部分被上传。

      4：文件未被上传。

      5：上传文件大小为0。

    代码中首先判断$_FILES变量所指文件被上传了，判断error属性，如果属性为0，把上传后的图像从临时文件夹移到upfile文件夹中，显示上传文件的信息，并显示上传后的图像。

    如果error值不为0，表示上传失败，显示失败信息。

12. 完成的代码如下：

    《!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》

    ***隐藏网址***

    《title》上传图片文件《/title》

    《/head》

    《?php

    if (isset($_FILES) 

    && is_uploaded_file($_FILES))

    {

     $imgFile = $_FILES;

    $upErr = $imgFile;

    if ($upErr == 0)

    {

    $imgType = $imgFile; //文件类型。

    /* 判断文件类型，这个例子里仅支持jpg和gif类型的图片文件。*/

    if ($imgType == ’image/jpeg’

    || $imgType == ’image/gif’)

    {

    $imgFileName = $imgFile;

    $imgSize = $imgFile;

    $imgTmpFile = $imgFile;

    /* 将文件从临时文件夹移到上传文件夹中。*/

    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》