HTML图片提交按钮
张鹏老师html笔记整理
</font>
<br>
<font color="green" size="2"> 2013-07 </font>
<font color="grey" size="2">-推广</font>
<font color="blue" size="4">
<u>2013全新索尼
<strong>
<font color="red">笔记本电脑
</font>
</strong>旗舰索尼VAIO Pro新登场!
</font>
</u>
<br>
<font size="2">索尼
<font color="red">笔记本电脑</font>VAIO Pro-轻,薄,彰显品质.新一代超极本(TM)创新源自英特尔科技.全新索尼
设置图片高
border
数字
设置图片边框
align
left
图片靠左，文字靠右
right
图片靠右，文字靠左
top
文字垂直居上靠
middle
文字垂直居中
bottom
文字垂直居下（默认）
vspace
像素
定义图像顶部和底部的空白（垂直边距）
html input 标签的用法
`<input>` 标签在HTML中用来创建用户输入字段。
这个标签有很多种不同的类型，我们通常称之为“类型（type）”。
以下是一些常见的类型：1. `text`: 创建一个单行的文本输入字段。
2. `password`: 创建一个密码输入字段。
在此字段中输入的字符会被浏览器隐藏。
3. `submit`: 创建一个提交按钮。
点击此按钮会提交表单。
4. `reset`: 创建一个重置按钮。
点击此按钮会重置表单的所有字段到它们的初始值。
5. `radio`: 创建一个单选按钮。
此按钮允许用户从几个选项中选择一个。
6. `checkbox`: 创建一个复选框。
此按钮允许用户选择多个选项。
7. `button`: 创建一个可点击的按钮。
点击此按钮可以触发JavaScript函数。
8. `file`: 创建一个文件上传控件。
用户可以通过此控件选择一个或多个文件进行上传。
9. `hidden`: 创建一个用户无法看到但可以被脚本使用的输入字段。
此字段的值可以被表单提交。
10. `image`: 创建一个图像形式的提交按钮。
点击此按钮会提交表单。
11. `number`: 创建一个数字输入字段。
用户可以在此字段中输入数字，还可以使用上下箭头来增加或减少数字。
12. `email`: 创建一个邮件地址输入字段。
当用户在此字段中输入文本时，浏览器通常会检查输入的文本是否符合邮件地址的格式。
13. `search`: 创建一个搜索字段。
在一些浏览器中，此字段会显示为圆角的输入框。
14. `tel`: 创建一个电话号码输入字段。
与email类似，浏览器通常会检查输入的文本是否符合电话号码的格式。
15. `url`: 创建一个URL输入字段。
当用户在此字段中输入文本时，浏览器通常会检查输入的文本是否符合URL的格式。
这只是`<input>`标签的一部分类型，还有更多类型可以使用，例如`date`、`datetime-local`、`month`、`week`、`time`、`email`、`number`、`range`等。
HTML图片提交按钮,使用图片做按钮的几种方法和优劣
HTML图片提交按钮有时候为了达到比较好的视觉效果，有人会使用图片代替按钮来提交或者重置表单数据。
<FORM name=RedForm action=# >一:<INPUT name=textfield2><INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0name=RedImgonclick="this.form.submit()"><INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0name=RedImg3 onclick="this.form.reset()"></FORM>二:代替submit按钮的图片代码格式是<input type="image" name="..." src="..." onClick="document.formName.submit()">代替reset按钮的代码图片格式是<a href="javascript:document.formName.reset();"><img border=0 src="..."></a>三:<form><INPUT name=textfield2><INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0name=RedImgonClick="frm1.action='link.asp'">通过onClick="document.form.submit()"来提交表单；用onClick="document.form.reset()"来复位表单，这样一来，任何一个元素（不仅是图片）都可以实现提交表单了。
HTML5--新增表单元素属性事件（3）
HTML5--新增表单元素属性事件（3）前⾔： HTML5在原本已有表单元素的基础上新增了新的表单元素和属性，增强了表单元素的功能。
第⼀类.新增input(type)类型 1.type为email 作⽤：email 类型⽤于包含 email 地址的输⼊域。
特性：提供了默认电⼦邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满⾜验证，则会阻⽌当前的表单提交 email⽰例：如果内容不满⾜邮箱格式，提交表单会有错误提⽰信息。
<body><form action="#">邮箱:<input type="email"><input type="submit" value="提交"></form></body> 2.type为url 作⽤：url类型⽤于包含⽹址的输⼊域。
特性：提供了⽹址完整验证，只能输⼊合法的⽹址：必须包含http://(例:) url⽰例：如果内容不满⾜⽹址格式，提交表单会有错误提⽰信息。
<body><form action="#">⽹址:<input type="url"><input type="submit" value="提交"></form></body> 3.type为number 作⽤：number 类型⽤于包含数值的输⼊域。
特性：只能输⼊数字(包含⼩数点)，不能输⼊其它的字符 属性： max -- 限制输⼊框的最⼤值 min -- 限制输⼊框的最⼩值 value -- 输⼊框的默认值 step -- 规定数字增长间隔 number⽰例：输⼊框中只能输⼊number类型值，不能输⼊其他类型的值<form action="#">数量：<input type="number" value="60" max="100" min="0" step="3"><br><input type="submit" value="提交"></form> 4.type为search 作⽤：search 类型⽤于搜索域，⽐如站点搜索或 Google 搜索 特性：输⼊值后，输⼊框后带有关闭按钮可以清除输⼊框内容 search⽰例：<body><form action="#">请输⼊商品名称：<input type="search"> <br><input type="submit" value="提交"></form></body> 5.type为range 作⽤：range 类型⽤于包含⼀定范围内数字值的输⼊域(可以⽤作⾳量键) 特性：显⽰为滑动条 属性： max -- 允许的最⼤值 min -- 允许的最⼩值 value -- 规定的默认值 step -- 规定数字增长间隔 range⽰例：<body><form action="#">范围：<input type="range" max="100" min="0" value="50"> <br><input type="submit" value="提交"></form></body> 6.type为color 作⽤：输⼊类型⽤于规定颜⾊ 特性：该类型允许你从拾⾊器中选取颜⾊ color⽰例：<body><form action="#">颜⾊：<input type="color"> <br><input type="submit" value="提交"></form></body> 7.type为tel 作⽤：tel 输⼊类型⽤于包含电话号码的输⼊字段 特性：tel它并不是来实现验证。
button onclick在html中用法
button onclick在HTML中的用法1. 概述在HTML中，button元素是一种常用的交互元素，可以通过onclick属性来指定点击按钮时触发的JavaScript代码。
button onclick事件是一种常见的前端开发技术，可以实现点击按钮后执行特定的操作，如提交表单、跳转页面、显示提示信息等。
本文将详细介绍button onclick在HTML中的用法，包括基本语法、常见应用场景以及一些注意事项。
2. 基本语法使用button onclick事件需要以下几个步骤：2.1 创建按钮首先，在HTML文件中创建一个按钮元素。
可以使用<button>标签或者<input>标签来创建按钮。
例如：<button onclick="myFunction()">点击我</button>或者<input type="button" value="点击我" onclick="myFunction()">2.2 添加onclick属性然后，在按钮元素上添加onclick属性，并指定要执行的JavaScript代码。
JavaScript代码可以直接写在onclick属性中，也可以通过调用外部脚本文件中定义的函数来实现。
例如：<button onclick="alert('Hello, World!')">点击我</button>或者<script>function myFunction() {alert('Hello, World!');}</script><button onclick="myFunction()">点击我</button>3. 常见应用场景3.1 表单提交button onclick事件常用于表单提交操作。
HTML FORM表单,input标签的说明
HTML 表单(Form)是 HTML 的一个重要部分，主要用于采集和提交用户输入的信息。
一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：<form action="form_action.asp" method="get"> First name: Last name:<input type="text" name="fname" /><input type="text" name="lname" /><input type="submit" value="Submit" /></form>HTML 表单(Form)常用控件(Controls)HTML 表单(Form)常用控件有： input type="text" 单行文本输入框 input type="submit" 将表单(Form)里的信息提交给表单里 action 所指向的文件 input type="checkbox" 复选框 input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入框(输入的文字用*表示)表单控件(Form Control)：单行文本输入框(input type="text")单行文本输入框允许用户输入一些简短的单行信息，比如用户姓名。
例句如下： <input type="text" name="yourname">表单控件(Form Control)：复选框(input type="checkbox")复选框允许用户在一组选项里，选择多个。
HTML5 的Input 类型
HTML5 的Input 类型⼀、⽂本类 Text，⽂本 Url，⽹络地址 Password，密码 Email，邮箱地址⼆、操作类 Checkbox ，复选框 Radio，单选框 File，上传⽂件 Number，数值 Range，百分百滑动条三、功能类 Button，按钮 Image，图⽚提交按钮 Submit，⽂字提交按钮 Reset，重置表单四、Date类 Date，年⽉⽇控件 Month，年⽉控件 Week，年周控件 Time，时间控件 Datetime，年⽉⽇+时间控件 Datetime-local，本地年⽉⽇+时间控件五、特殊类 Hidden，隐藏信息扩展：1.⽂本类属性：placeholder。
这是⼀个占位符，可以作为提⽰信息，⽽且⽆法被⽤户选中。
2.Url和e-mail，在H5中，会在提交表单的时候检测其格式是否书写正确。
3.操作类。
⼀般input标签会结合label标签使⽤，label⼀般有两种书写⽅法：①⾮跨度：<label><input></input></label>②跨度：<label for="input_id"></label> <input id="input_id"></input>如果⽹页结构中，input和label是相邻的关系，可以直接使⽤⾮跨度的书写⽅法，以减少代码量。
4.file。
在实际应⽤中，⽹页表单中需要上传的⽂件⼀般不⽌⼀个，这时候就要⽤到multiple属性，它是⼀个布尔值属性，在添加这个属性后，就可以上传多个属性。
另外，上传的⽂件可以被规定，使⽤accept属性。
这个⼀个数组属性，属性值是MIME规定的⽂件类型。
5.Button。
Button类型只能在value中定义按钮上显⽰的提⽰⽂字。
Image类型只能在src 中链接图⽚。
简述使用html创建表单的基本步骤
简述使用html创建表单的基本步骤创建表单是一种常见的网页设计需求,表单可以让用户输入数据或提交表单数据。
下面是创建HTML表单的基本步骤:步骤1:HTML标签在HTML中,表单需要使用<form>标签来创建。
该标签包含多个子标签,如<label>标签用于显示表单输入字段的名称</label>,<input>标签用于定义表单输入字段,<button>标签用于创建提交按钮。
例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit">提交</button></form>```步骤2:标签属性表单中的每个输入字段和提交按钮都需要指定属性,以便在服务器端正确地处理它们。
这些属性包括:- `<input>`标签的属性:type(输入类型),id(标识符),name(用于在服务器端查找属性值的名称),required(是否是必须的),value(输入值),pattern(正则表达式)。
- `<button>`标签的属性:type(提交类型),name(用于在服务器端查找属性值的名称),value(提交值),background(背景颜色),color(颜色),hover(hover 状态),优惠政策(是否在浏览器缓存中保留按钮)。
例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><button type="submit" name="submit" value="提交">提交</button> </form>```步骤3:表单数据表单数据通常通过<input>标签中的type属性指定,例如:```<form><label for="name">姓名:</label><input type="text" id="name" name="name" required><input type="password" id="password" name="password" required> <input type="submit" value="提交"></form>```步骤4:提交表单数据当用户完成表单并单击提交按钮时,浏览器将向服务器发送表单数据。
HTML表单元素
HTML表单元素学习要点： 1.表单元素总汇 2.表单元素解析⼀．表单元素总汇HTML5的表单中，提供了各种可供⽤户输⼊的表单控件。
元素名称 说明form 表⽰HTML表单input 表⽰⽤来收集⽤户输⼊数据的控件textarea 表⽰可以输⼊多⾏⽂本的控件select 表⽰⽤来提供⼀组固定的选项option 表⽰提供提供⼀个选项optgroup 表⽰⼀组相关的option元素button 表⽰可⽤来提交或重置的表单按钮（或⼀般按钮）datalist 定义⼀组提供给⽤户的建议值fieldset 表⽰⼀组表单元素legend 表⽰fieldset元素的说明性标签label 表⽰表单元素的说明标签output 表⽰计算结果⼆．表单元素解析1.<form>定义表单解释：<form>元素主要是定义本⾝是⼀组表单。
元素属性 说明 method 表⽰表单的发送⽅式：有POST和GET两种，默认GET，GET⽅式发送明码发送，在接收页⾯的url可以看到?表单元素名称=元素值 POST⽅式发送，为加密的发送，接收页⾯的url看不到表单信息action 表⽰表单提交的页⾯，也就是接收表单的页⾯ enctype 表⽰浏览器对发送给服务器的数据所采⽤的编码格式，只有上传我⽂件是才⽤到，multipart/form-data 有三种：application/x-www-form-urlencoded（默认编码，enctype 不能将⽂件上传到服务器）、 multipart/form-data （⽤于上传⽂件到服务器）、 text/plain （未规范的编码，不 建议使⽤，不同浏览器理解不同） name 设置表单名称，以便程序调⽤ target 设置提交时的⽬标位置：_blank、_parent、_self、_top， 也就是接收表单页⾯以什么⽅式打开，是新建页⾯打开，还是当前页⾯打开，默认当前页⾯打开autocomplete 设置浏览器记住⽤户输⼊的数据，实现⾃动完成表单。
html中submit的用法
html中submit的用法
HTML中的submit，指的是提交按钮，是Web表单中一种常用的控件，用于将用户输入的数据提交到服务器端进行处理。
在网页开发中，submit 按钮的使用非常普遍，可以说是不可或缺的一部分。
通过submit按钮，用户可以将表单中的数据提交给服务器端，实现数据的传输与处理，完成各种操作，如登录注册、搜索、留言等。
在HTML中，通过使用<form>标签来创建表单，然后在表单内部添加各种控件，如文本框、下拉框、单选框等，并通过submit按钮来提交表单数据。
在点击submit按钮后，浏览器会将表单数据封装成HTTP请求，发送给服务器端进行处理。
除了普通的submit按钮外，还有一些常用的属性可用于定制submit 按钮的样式和行为，如type属性可以指定按钮类型（submit、reset、button）、value属性可以设置按钮显示的文本内容、onclick属性可以添加点击按钮时执行的JavaScript代码等。
在实际应用中，submit按钮常常会与JavaScript结合使用，实现一些动态效果或数据验证操作。
比如，在用户点击提交按钮时，可以通过JavaScript验证用户输入的数据是否符合要求，如果不符合可以进行相应的提示和处理，从而提升用户体验和减轻服务器端的压力。
让我们总结一下本文的重点，我们可以发现，HTML中submit按钮的
用法非常灵活多样，可以根据具体的需求进行定制和扩展，是实现Web交互功能的重要组成部分。
通过深入研究submit按钮的使用方法和相关属性，可以更好地开发出符合用户需求的web应用，提升用户体验和提高网站的可用性。
图片上传原理
图片上传原理在网页开发中，图片上传是一个非常常见的功能，用户可以通过上传图片的方式将图片保存到服务器上，然后在网页上进行展示。
图片上传的原理其实并不复杂，下面我们就来详细介绍一下图片上传的原理。
首先，我们需要了解的是，图片上传是通过表单来实现的。
在HTML中，我们可以使用<input type="file">来创建一个文件上传的表单元素。
用户通过点击这个元素，就可以选择本地的图片文件进行上传。
当用户选择了要上传的图片文件后，点击提交按钮，表单就会将图片文件发送到服务器。
在这个过程中，浏览器会将图片文件转换成二进制流，然后通过HTTP协议将这个二进制流发送给服务器。
服务器接收到图片文件后，会将这个文件保存到指定的目录中。
通常情况下，服务器会对上传的图片文件进行一些安全性检查，比如检查文件类型、文件大小等，以防止恶意上传或者过大的文件占用过多的服务器资源。
接着，服务器会将图片文件的路径保存到数据库中，以便后续在网页上进行展示。
当用户访问网页时，服务器会从数据库中读取图片文件的路径，然后将这些图片文件发送给浏览器，浏览器再根据这些路径去请求服务器上的图片文件，最终将图片显示在网页上。
总的来说，图片上传的原理就是通过表单将图片文件发送到服务器，服务器接收并保存图片文件，然后在网页上进行展示。
这个过程涉及到前端和后端的交互，需要注意安全性和效率等方面的问题。
在实际开发中，我们可以使用现成的图片上传组件来简化开发流程，比如使用第三方库或者框架，来实现图片上传的功能。
同时，我们也需要注意图片上传的安全性，比如防止恶意上传、限制文件大小等，以保护服务器和用户的利益。
总结一下，图片上传的原理是通过表单将图片文件发送到服务器，服务器接收并保存图片文件，然后在网页上进行展示。
在开发过程中，我们需要注意安全性和效率等方面的问题，以提供良好的用户体验和保护服务器的安全。
希望以上内容能够对大家有所帮助。
html中submit的用法
html中submit的用法1. HTML中的表单与提交按钮在HTML中，表单是一种常见的元素，用于收集用户输入的数据。
提交按钮是表单中的一个重要组成部分，它允许用户将填写好的表单数据发送到服务器进行处理。
本文将深入探讨HTML中submit按钮的用法，并介绍一些相关技巧。
2. submit按钮的基本用法在HTML中，使用submit按钮可以将表单数据发送到服务器。
要使用submit按钮，需要在form元素内部添加一个input元素，并将其type属性设置为"submit"。
例如：```html<form action="/process" method="POST"><input type="submit" value="提交"></form>```上述代码创建了一个简单的表单，并添加了一个提交按钮。
当用户点击该按钮时，浏览器会将表单数据发送到服务器上指定处理该请求的URL。
3. submit按钮与form属性配合使用除了直接在form元素内添加submit按钮外，我们还可以通过form属性与其他元素关联提交操作。
通过为其他元素设置form属性为对应form元素的id值，可以实现点击该元素时触发相关表单的提交操作。
```html<form id="myForm" action="/process" method="POST"><input type="text" name="name"><button type="submit">提交</button></form><button form="myForm">点击我触发表单提交</button>```上述代码中，在第一个button元素内设置了form属性为对应表单的id值"myForm"，这样当用户点击该按钮时，会触发与该id关联的表单的提交操作。
javascript部分复习题答案
</form>
a)
document.MyForm.select()
b)
document.MyForm.focus()
c)
document.MyForm.submit()
d)
document.MyForm.click()
20) 在 Javascript 中，可以使用 var today=new Date();这种方法获得系统当前日期和时间，假设系统当
}
</script>
</head>
<body onLoad=”showTime()”>
<form name=”form1”action=””method=””>
<input name = “myClock” type=”text” value=”” readonly=”true”/>
</form>
</body>
（bc）。（选择两项）
<HTML>
<BODY>
<div id=”imageLayer”><img src=”inages/Sunset.jpg” width=”200” height=”100”>
</div>
</BODY>
</HTML>
a)
document.getElementById(“imageLayer”).style.display.=”block”;
onChange=”window.open(‘确定’)”>
d)
<INPUT TYPE=”button” VALUE=”鼠标响应”
HTMLimg标签的alt属性和title属性使用介绍
HTMLimg标签的alt属性和title属性使⽤介绍当浏览器卖主扭曲了标准并且⾃顾⾃的不按规则去做⼀些事，他们可能会造成⼀些问题，或者⾄少产⽣了混淆。
例⼦之⼀就是⼀些浏览器处理alt属性（⼀般会被错误的称作alt标签）的⽅式，⽐如拥有⼤量⽤户的Windows的IE浏览器。
替换⽂字（alt text）并不是⽤来做提⽰（tool tip），或者更加确切的说，它并不是为图⽚提供额外说明信息的。
相反地，title 属性才应该⽤来为元素提供额外说明信息。
这些信息在⼤部分图像浏览器⾥显⽰为提⽰（tool tip），虽然制造商可以任意采取其他⽅式渲染title属性的⽂字。
很多⼈看来对这两个属性感到迷惑（最近这个问题在Web Standards Group邮件列表⾥变多了），所以我写下我的想法，如何去⽤它们。
alt属性为不能显⽰图像、窗体或applets的⽤户代理（UA），alt属性⽤来指定替换⽂字。
替换⽂字的语⾔由lang属性指定。
来源：How to specify alternate text.Alt属性（注意是“属性”⽽不是“标签”）包括替换说明，对于图像和图像热点是必须的。
它只能⽤在img、area和input元素中（包括applet元素）。
对于input元素，alt属性意在⽤来替换提交按钮的图⽚。
⽐如：<input type="image" src="image.gif"alt="Submit" />.使⽤alt属性是为了给那些不能看到你⽂档中图像的浏览者提供⽂字说明。
这包括那些使⽤本来就不⽀持图像显⽰或者图像显⽰被关闭的浏览器的⽤户，视觉障碍的⽤户和使⽤屏幕阅读器的⽤户。
替换⽂字是⽤来替代图像⽽不是提供额外说明⽂字的。
在写替换⽂字前仔细想想，保证那些⽂字确实为那些看不到图像的⼈提供了说明信息，并且在上下⽂中有意义。
对于那些装饰性的图⽚可以使⽤空的值（alt=""，引号中间没有空格），⽽不是使⽤不相关的替换⽂字⽐如“blue bullet”或者“spacer.gif”。
html中submit和button的区别
（转）html中submit和button的区别(总结)本文是本人在学习html的submit和button时在网上下载的一些资料的总结，本人觉得挺受用，故想与大家分享！submit是button的一个特例，也是button的一种，它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把submit改成button，即取消其自动提交的行为，否则，将会造成提交两次的效果，对于动态网页来说，也就是对数据库操作两次。
或者在使用submit时验证时加return true或false。
submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type 属性和处发响应的事件上，submit会提交表单，button不会提交表单.两者主要区别在于：submit默认为form提交，可以提交表单（form）.button则响应用户自定义的事件,如果不指定onclick等事件处理函数，它是不做任何事情.当然，button也可以完成表单提交的工作.INPUT type=submit 即发送表单,按回车提交表单INPUT type=button 就是单纯的按钮功能,提交的是innerTEXT===============submit 和 button的详细对比===================================submit:特殊的button，会自动将表单的数据提交，onClick方法不加return 会自动提交，并不会起到约束的作用，所以，使用submit时需要验证请加 return true或false.例：<input type="submit" name="Submit" value="注册" onClick=" return check();">，在JS中判断的时候写return true; 或者 return false;button:普通的按钮，不会自动提交表单数据.可以在JS中显式提交:document.form1.submit()，使用场合：一个页面有多个提交按钮，需要根据用户的操作来确定到底提交到哪个控制器，这种情况下，就需要在JS中判断用户的操作，然后根据操作来给document.form1.action赋值并且document.form1.submit()来提交===============如果想好所有的提交都在一个servlet中处理，该怎么做==================提交的按钮也是HTML组件，所以也可以通过 getParameter()来得到，那么getParameter()的参数也需要固定下来参数就是所有的表单的提交按钮的name，当然提交按钮的name要一样才能统一在一个servlet中根据提交按钮的值来区别操作======================关于路径的设置===================================A.在页面中直接写路径，如 href="jsp/a.html" 表示平级目录的访问，此例表示平级目录中有个JSP文件夹，访问的是文件夹中的a.html文件B.在JAVA中直接写路径,如 response.sendRedirect("jsp/a.jsp")表示项目根目录下有个JSP文件夹，访问的是文件夹中的a.jsp文件C.如果发现以上设置在浏览器中的地址栏不正确，可以采取绝对路径写法：/工程名/文件夹名/文件名但是对于从事WEB UI的人应该要注意到，使用submit来提高页面易用性：使用submit后，页面支持键盘enter键操作，而很多WEB软件设计师，可能没有注意到submit统一.用button后往往页面不支持enter键了。
html的两种提交按钮submit和button
html的两种提交按钮submit和buttonhtml按钮有两种：<input type="button" value="登录" onclick="login()"/>和<button onclick="login()">登录</button>这两种在页⾯上看起来好像⼀样没什么区别，但是这两种是有区别的。
1，如果在<form id="loginForm" name="loginForm" action="<%=path%>/hdlogin/login.action" method="post"></form>标签中，使⽤<input type="button" value="登录" onclick="login()"/>，要想提交form，你必须写成<input type="submit" value="登录" onclick="login()"/>，或者document.loginForm.submit();否则form是不会提交的。
2，如果在form中使⽤<button onclick="login()">登录</button>只要点击就会提交。
<button type="submit" value="登录" onclick="login()"/>。
今天在使⽤<button></button>时，我⼜在js控制表单提交，结果这个action总是莫名其妙的⾛两次！根源就是表单提交了两次，⼀次是<button></button>，⼀次是document.loginForm.submit();这个错误很隐蔽，⼤家以后要注意。
html action用法
html action用法HTML Action用法指的是在HTML表单中使用Action属性，用于告诉浏览器将表单提交到哪个页面进行处理，从而实现表单的提交与处理。
在本篇文章中，我们将为大家详细介绍HTML Action的用法及相关注意事项。
Step 1：HTML表单的基础构建想要使用HTML Action，我们首先需要构建一个基本的HTML表单，这个表单需要包含以下组成部分：1. 一个form标签，用来包裹表单元素2. 一个input标签，作为表单的输入框3. 一个submit按钮，用来将表单提交如下面这个例子，我们创建了一个简单的表单，它包含了一个用户名输入框和一个提交按钮：<form><label for="username">用户名:</label><input type="text" name="username" id="username"><input type="submit" value="提交"></form>Step 2：使用Action属性指定提交目标在我们创建了HTML表单之后，我们需要给它添加一个Action属性，用于指定表单提交的目标。
具体来说，当我们点击提交按钮时，浏览器会将表单的数据提交到Action属性所指定的页面进行处理。
例如，如果我们希望将表单提交到一个名为"process.php"的PHP 脚本进行处理，我们可以将表单代码修改为：<form action="process.php"><label for="username">用户名:</label><input type="text" name="username" id="username"><input type="submit" value="提交"></form>注意：在指定Action属性时，我们需要将目标页面的文件名及路径都包含进去，同时需要指定正确的HTTP方法，一般为GET或POST。
表单提交的多种方法
表单提交的多种⽅法表单提交共有四个⽅法表单提交⽅式⼀：直接利⽤form表单提交html页⾯代码：<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Insert title here</title></head><body><form action="http://localhost:8080/user" method="post">username:<input type="text" name="username" /><br>password:<input type="password" name="password" /> <br><input type="submit" value="登录"></form></body></html>controller页⾯代码：package com.help.demo.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.ResponseBody;@Controllerpublic class UserController {@PostMapping("/user")@ResponseBodypublic String add(String username,String password){System.out.println("返回值是》》"+username+"---->"+password);String str = "返回值是"+username+password;return str;}}》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》表单提交⽅式⼆：使⽤ajax提交html页⾯代码：<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Insert title here</title></head><body><!-- --><form method="post" onsubmit="return false" action="##" id="formtest">username:<input type="text" name="username" /><br>password:<input type="password" name="password" /> <br><input type="button" value="登录" onclick="login()"></form><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/jquery.easyui.min.js"></script><script type="text/javascript" src="/js/extJquery.js"></script><script type="text/javascript" src="/js/extEasyUI.js"></script><script type="text/javascript">function login() {$.ajax({//⼏个参数需要注意⼀下type: "POST",//⽅法类型dataType: "text",//预期服务器返回的数据类型如果是对象返回的是json 如果是字符串这⾥⼀定要定义text 之前我就是定义json 结果字符串的返回⼀直到额error中去/*dataType:要求为String类型的参数，预期服务器返回的数据类型。
html中submit和button的区别
（转）html中su bmit和b utton的区别(总结)本文是本人在学习html的submit和butto n时在网上下载的一些资料的总结，本人觉得挺受用，故想与大家分享！submit是button的一个特例，也是butto n的一种，它把提交这个动作自动集成了。
如果表单在点击提交按钮后需要用JS进行处理（包括输入验证）后再提交的话，通常都必须把s ubmit改成butto n，即取消其自动提交的行为，否则，将会造成提交两次的效果，对于动态网页来说，也就是对数据库操作两次。
或者在使用su bmit时验证时加ret urn true或fa lse。
submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是ty pe 属性和处发响应的事件上，submit会提交表单，button不会提交表单.两者主要区别在于：submit默认为form提交，可以提交表单（form）.button则响应用户自定义的事件,如果不指定on click等事件处理函数，它是不做任何事情.当然，button也可以完成表单提交的工作.INPUT type=submit即发送表单,按回车提交表单INPUT type=button就是单纯的按钮功能,提交的是inn erTEXT===============submit和 button的详细对比===================================submit:特殊的butt on，会自动将表单的数据提交，onClick方法不加re turn 会自动提交，并不会起到约束的作用，所以，使用submi t时需要验证请加 returntrue或fa lse.例：<input type="submit" name="Submit" value="注册" onClick=" returncheck();">，在JS中判断的时候写return true; 或者 returnfalse;button:普通的按钮，不会自动提交表单数据.可以在JS中显式提交:documen t.form1.submit()，使用场合：一个页面有多个提交按钮，需要根据用户的操作来确定到底提交到哪个控制器，这种情况下，就需要在JS中判断用户的操作，然后根据操作来给docum ent.form1.action赋值并且doc ument.form1.submit()来提交===============如果想好所有的提交都在一个servle t中处理，该怎么做==================提交的按钮也是HTML组件，所以也可以通过 getPara meter()来得到，那么getPa ramete r()的参数也需要固定下来参数就是所有的表单的提交按钮的name，当然提交按钮的name要一样才能统一在一个serv let中根据提交按钮的值来区别操作======================关于路径的设置===================================A.在页面中直接写路径，如 href="jsp/a.html" 表示平级目录的访问，此例表示平级目录中有个JS P文件夹，访问的是文件夹中的a.html文件B.在JAVA中直接写路径,如 respons e.sendRed irect("jsp/a.jsp")表示项目根目录下有个JSP文件夹，访问的是文件夹中的a.jsp文件C.如果发现以上设置在浏览器中的地址栏不正确，可以采取绝对路径写法：/工程名/文件夹名/文件名但是对于从事W EB UI的人应该要注意到，使用submi t来提高页面易用性：使用submi t后，页面支持键盘e nter键操作，而很多WEB软件设计师，可能没有注意到submit统一.用button后往往页面不支持ente r键了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML图片提交按钮
有时候为了达到比较好的视觉效果，会使用图片代替按钮来提交或者重置表单数据。
<FORM name=RedForm action=# >
一:
<INPUT name=textfield2>
<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0
name=RedImgonclick="this.form.submit()">
<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0
name=RedImg3 onclick="this.form.reset()">
</FORM>
二:
代替submit按钮的图片代码格式是
<input type="image" name="..." src="..." onClick="document.formName.submit()">
例
<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0
name=RedImgonclick="this.form.submit()">
<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0
name=RedImg3 onclick="this.form.reset()">
代替reset按钮的代码图片格式是
<a href="javascript:document.formName.reset();"><img border=0 src="..."></a>
三:
<form>
<INPUT name=textfield2>
<INPUT type=image height=19 width=53 src="xxx.gif" align=absMiddle border=0
name=RedImgonClick="frm1.action='link.asp'">
通过onClick="document.form.submit()"来提交表单；用onClick="document.form.reset()"来复位表单，这样一来，任何一个元素（不仅是图片）都可以实现提交表单了。
在这样子的情况下，还可以自定义图片的长度和宽度等
使用图片做按钮的几种方法和优劣
合理的运用图片，能够使站点更加丰富多彩，相信有许多喜欢用图片的设计师都遇到过一个问题：用图片实现表单(form)的重置(reset)按钮时，这个按钮并不能重置表单，相反却执行了提交表单的操作，本文说明了这个问题的原因，并给出了相应的解决方案。
出现上述问题的原因主要是：普通的按钮是通过类型来区分的，submit 为提交按钮，reset 为重置按钮，而类型为图片(type="image")的按钮，其默认操作是提交表单。
因此，如果想用图片实现重置按钮，就需要一些额外的设置了。
如果想用图片代替重置按钮，可以用下面的方法：
（1）给type 为image 的input 添加onclick事件来实现重置，并通过添加return false 来避免默认的提交操作：
<form method="post" name="testForm_2" action="">
<p><input type="text" name="keyword" /></p>
<input type="image" src="send.gif" />
<input type="image" src="reset.gif" onclick="javascript:document.forms['testForm_2'].reset(); return false;" />
</form>
document.forms['testForm_2'].reset(); 是将名称为testForm_2 的表单重置。
return false; 是防止提交表单。
（2）直接用图片模拟的重置按钮
<form method="post" name="testForm_3" action="">
<p><input type="text" name="keyword" /></p>
<input type="image" src="send.gif" />
<imgsrc="reset.gif" alt="Reset" onclick="javascript:document.forms['testForm_3'].reset();" style="cursor:pointer;" />
</form>
document.forms['testForm_2'].reset(); 是将名称为testForm_2 的表单重置。
style="cursor:pointer;" 设置图片悬停时，显示手型光标。
两种方法大同小异，在javascript被禁止的情况下，第二种方法按钮不会执行任何操作，而第一种方法却会执行提交操作。
当然，我们也可以直接把样式交给CSS 去处理，用背景图的方式来实现，但是这样需要将value 的值留空，如果CSS 被禁止，那么将会显示一个没有文字的按钮，每个方法都有自己的问题，可以根据自己的需要来选择解决方案。