form表单代码 html表单代码
大家好，关于form表单代码很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于html表单代码的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！
HTML表单介绍
HTML表单(Form)是HTML的一个重要部分，主要用于采集和提交用户输入的信息。
举个简单的例子，一个让用户输入姓名的HTML表单(Form)。示例代码如下：
form action="
请输入你的姓名：
input type="text" name="yourname"
input type="submit" value="提交"
/form
学习HTML表单(Form)最关键要掌握的有三个要点：
表单控件(Form Controls)
Action
Method
先说表单控件(Form Controls)，通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中选择，以及做提交的操作。比如上面的例句里，input type="text"就是一个表单控件，表示一个单行输入框。
用户填入表单的信息总是需要程序来进行处理，表单里的action就指明了处理表单信息的文件。比如上面例句里的
至于method，表示了发送表单信息的方式。method有两个值：get和post。get的方式是将表单控件的name/value信息经过编码之后，通过URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http发送，你在地址栏看不到表单的提交信息。那什么时候用get，什么时候用post呢？一般是这样来判断的，如果只是为取得和显示数据，用get；一旦涉及数据的保存和更新，那么建议用post。
HTML表单(Form)常用控件(Controls)
HTML表单(Form)常用控件有：
表单控件(Form Contros)说明
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")
复选框允许用户在一组选项里，选择多个。示例代码：
input type="checkbox" name="fruit" value="apple"苹果br
input type="checkbox" name="fruit" value="orange"桔子br
input type="checkbox" name="fruit" value="mango"芒果br
用checked表示缺省已选的选项。
input type="checkbox" name="fruit" value="orange" checked桔子br
表单控件(Form Control)：单选框(input type="radio")
使用单选框，让用户在一组选项里只能选择一个。示例代码：
input type="radio" name="fruit" value="Apple"苹果br
input type="radio" name="fruit" value="Orange"桔子br
input type="radio" name="fruit" value="Mango"芒果br
用checked表示缺省已选的选项。
input type="radio" name="fruit" value="Orange" checked桔子br
表单控件(Form Control)：下拉框(select)
下拉框(Select)既可以用做单选，也可以用做复选。单选例句如下：
select name="fruit"
option value="apple"苹果
option value="orange"桔子
option value="mango"芒果
/select
如果要变成复选，加muiltiple即可。用户用Ctrl来实现多选。例句：
select name="fruit" multiple
用户还可以用size属性来改变下拉框(Select)的大小。
表单控件(Form Control)：多行输入框(textarea)
多行输入框(textarea)主要用于输入较长的文本信息。例句如下：
textarea name="yoursuggest" cols="50" rows="3"/textarea
其中cols表示textarea的宽度，rows表示textarea的高度。
表单控件(Form Control)：密码输入框(input type="password")
密码输入框(input type="password")主要用于一些保密信息的输入，比如密码。因为用户输入的时候，显示的不是输入的内容，而是黑点符号。。例句如下：
input type="password" name="yourpw"
表单控件(Form Control)：提交(input type="submit")
通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句如下：
input type="submit" value="提交"
表单控件(Form Control)：图片提交(input type="image")
input type=image相当于 input type=submit，不同的是，input type=image以一个图片作为表单的提交按钮，其中 src属性表示图片的路径。
input type="image" src="images/icons/go.gif"
alt="提交" NAME="imgsubmit"
前端小技巧:学会用FormData对象收集表单数据
我们先看一个小例子：
html代码：
需求：是获取form表单中的用户名和密码并包装成一个对象
这个需求是我们大部分时候在发送ajax请求时需要做的一个工作。
传统JS写法：
看一下效果：
可以看到，我们已经实现了需求，但是我们写的JS代码很繁琐，我们需要先获取form表单中input框元素，然后元素的value值，最后包装成一个对象。
FormData的JS写法：
效果如下：
通过这个例子你应该能感受到FormData的便利性，只需要 new FormData(form)一句代码就可以把form表单内的所有信息都以键值对的形式包装成一个对象返回。
FormData对象是用来将form表单数据编译成键值对，这么做有两个好处：
FormData的常用操作方法：
FormData对象可以帮我们更方便的收集表单数据并中的整理成对象，大大方便了我们发送ajax请求。
开发中iFrame表单提交的古怪问题解决
微软的 NET Framework自带了Ajax框架将以往传统的ASP NET开发带入了一个全新的Ajax NET开发时代我们除了在页面上引入ScriptManager控件用以在客户端注册功能丰富的Ajax框架脚本外这个庞大的框架还提供了诸多功能强大的Ajax控件例如著名的UpdatePanel ModalPopupExtender Rating等控件 Ajax框架和控件的引入大大简化了开发人员的开发任务同时也给用户带来了全新的Web体验但是我们在使用复杂的框架提供的脚本时也常常会遇到这样或那样的问题有很多问题相信不少开发人员都能独立解决不过有些复杂的问题还真是很伤脑筋
本来在MOSS中使用Ajax开发就已经不是一件轻易的事情或许高手们觉得这没有什么是的！我们在Google上会搜到很多介绍这方面的文章而且配置步骤都写得非常详细按照前辈们的经验只要认真按照步骤将环境配置好一般都是没有什么问题的在MOSS中开发Ajax应用程序就如同简单的Ajax网页一样只是部署的时候稍微要麻烦一些这里我不想详细讲解在MOSS中如何进行Ajax开发只是想说一说前段时间在MOSS开发中因为Ajax框架所引起的一个非常怪异的问题一直困扰了我好几天不过最终算是委曲求全得找到了一个替代的解决办法至于会不会引起其它的什么问题读者也可以帮我分析一下
前不久我写了一篇有关在FireFox中通过脚本获取客户端本地所选文件路径的文章里面介绍了通过客户端上传文件时如果通过javascript得到文件的本地路径事实上在真正的文件上传过程中得到文件的客户端路径意义是不大的除非我们需要实现如图片本地预览的功能否则我们一般都可以通过Form的Post方法得到要上传的文件在C#一般都是这样的
<body><form id= form runat= server method= post enctype= multipart/form data><input id= File name= mtfile type= file/><asp:Button ID= Button runat= server Text= Button OnClick= Button _Click/></form></body>
protected void Button _Click(object sender EventArgs e){ HttpFileCollection files= Request Files; if(files!= null&& files Count>){ for(int i=; i< files Count; i++){// TODO something}}}设置Form的method属性为post并设置enctype为mulipart/form data当页面提交时在服务端通过Request Files方法即可得到上传文件的对象集合非常简单我们根本不需要在客户端通过javascript得到文件的路径不过这里有一个限制那就是页面必须post到服务端才能得到要上传的文件也就是说我们不能通过javascript方式在页面无刷新的情况下将文件上传到服务器这也是Ajax唯一不能做到的一件事情不过我们通过一个比较老旧的技术可以避开这个问题那就是在页面上使用隐藏的iFrame在页面提交前将Form的target指向这个隐藏的iFrame页面提交时iFrame会被刷新提交从而避免了整个页面被刷新
事实上在Ajax兴起前很多无刷新的页面几乎都是通过这种方式来实现的 iFrame可以提交数据而且还避免了网页的整体刷新在Ajax兴起后 iFrame似乎很少再被人们提起但是有一个例外
那就是文件上传！我们可以去当今比较流行的网站考察一下像邮箱 Gmail等都无一例外地使用了iFrame上传文件我们可以将上面代码中的HTML部分稍作修改就可以实现使用iFrame上传文件的功能
<body><form id= form runat= server target= ifu method= post enctype= multipart/form data><iframe frameborder= id= ifu name= ifu></iframe><input id= File name= mtfile type= file/><asp:Button ID= Button runat= server Text= Button OnClick= Button _Click/></form></body>后台代码不变只是在Form上加了一个target属性用来指向iFrame当页面提交时会自动提交iFrame对象而不会将Form本身提交当遇到页面上还有其它表单需要提交时我们可以这样做先在提交按钮的客户端事件上将Form的target指向隐藏的iFrame然后返回True提交表单这时iFrame会被提交在服务端处理完数据保存后注册一段脚本用来将iFrame的父页面中Form的target改回自身这样就可以模拟一次iFrame提交而不会影响到页面上其它的功能我们只是在页面需要被提交时才去修改Form的target属性提交完后再改回来
这看起来似乎是一个很不错的主意看看代码吧！
<body><form id= form runat= server method= post enctype= multipart/form data><iframe frameborder= id= ifu name= ifu></iframe><input id= File name= mtfile type= file/><asp:Button ID= Button onclientclick= document forms[ form ] target= ifu;return true; runat= server Text= Button OnClick= Button _Click/></form></body>
protected void Button _Click(object sender EventArgs e){ HttpFileCollection files= Request Files; if(files!= null&& files Count>){ for(int i=; i< files Count; i++){//TODO something}} string script= alert({});window parent document forms[ form ] target= _self;; ClientScript RegisterClientScriptBlock(this Page this GetType() string Empty string Format(script Save Successfully!) true);}
尽管我们在页面上使用Ajax控件该方法仍然会奏效需要说明一点就是上传文件的功能是不能在UploadPanel控件中使用的否则功能会失效因为文件上传必须刷新页面除非我们使用iFrame提交表单如果非要在UpdatePanel控件中完成文件上传功能那必须设置UpdatePanel控件的PostBackTrigger属性将触发事件的控件添加到PostBackTrigger中如
<asp:UpdatePanel ID= update runat= server UpdateMode= Conditional><ContentTemplate><input id= File name= mtfile type= file/><asp:Button ID= btSave runat= server Text= Save onclick= btSave_Click/></ContentTemplate><Triggers><asp:PostBackTrigger ControlID= btSave/></Triggers></asp:UpdatePanel>
这将导致页面回传 UpdatePanel控件的意义也就失去了在页面上放置隐藏的iFrame按照前面介绍的方法通过javascript动态去修改Form的target属性提交iFrame可以实现类似于Ajax方式的文件上传功能其实页面同样被刷新了只是刷新的是隐藏的iFrame用户不会有什么感觉
前面说了这么多只是想说说我所遇到的问题的背景现在步入正题！
在MOSS中开发页面和普通的ASP NET页面基本没有什么不同主要就是部署的时候会有一些麻烦那么按照前面介绍的方法将编写好的页面部署到站点上运行时我发现了一个奇怪的问题那就是第一次按钮触发事件的时候服务端可以正确响应并且是通过iFrame提交过来的但是从第二次开始就需要等待十几秒的时间按钮才能再次被触发一开始我以为是iFrame在被提交后没有响应完毕来不及处理第二次请求后来通过设置断点和插入调试脚本进行测试发现iFrame已经完全响应完毕按钮还是不能被点击（这里说的按钮不能被点击是指Button不能响应服务端事件）
究竟发生了什么问题？
在 NET时代我们通常会遇到按钮的事件丢失等问题但这是在 NET的环境下根本不存在这种问题况且按钮在第一次的时候是可以被点击的程序一直处于运行状态没有人修改过代码让我非常奇怪！这个问题我反复调试并采用了很多不同的方法去尝试但是问题依旧如查看页面上其它部分可能导致的脚本干扰 setInterval方法的使用是否会导致程序处于等待状态（事实上这个根本不可能）
去掉所有可能导致此问题的控件和代码等等天啊！我几乎尝尽了所有能够想到的办法但是这块大石头依然纹丝不动我崩溃了！！
过了一个周末在家睡了两天脑海中一直想的就是究竟是什么原因导致了按钮的事件不能被触发我也尝试过在FireFox下利用FireBug跟踪按钮的客户端代码执行情况没有什么结果周一上班的时候突然想到用排除法来验证一下看看究竟是哪部分代码出现了问题因为之前我在本地创建的工程中使用了iFrame提交表单并且利用javascript在页面往返服务器的过程中动态修改了Form的target属性并没有发现按钮事件不能被触发的问题说明问题不是出在我所写的代码中我在MOSS站点中创建了一个功能一样的页面上面只有非常简单的几行代码然后编译部署激活特定的Feature访问页面简单看了一下功能很正常说明这种方法在MOSS下是可以正常使用的并没有之前假象的会受到MOSS本身机制的影响
生产环境中的页面要稍微复杂一些里面除了一些必须的功能和UserControl外整个页面是继承自一个公共的模板页难道问题出在模板页上？我又仔细看了看模板页中的代码几乎尝试着将模板页中所有的控件都删除了但是问题依然没有解决一身冷汗啊一上午的时间就这么让我浪费了做过MOSS项目的朋友可能会比较清楚在MOSS上开发项目复杂的并不是如何去写代码而是部署和调试经常大把的时间都浪费在这个上面更何况我为了测试这个问题产生的原因还要新建页面重新部署站点然后调试代码光这个过程就比较繁琐了
反正已经开始做了午饭过后我打算彻底搞定它问题既然不是出在页面本身那一定是出在模板页上因为之前没加模板页的时候是可以的后来将页面继承自模板页后问题就来了在FireFox中查看页面的源代码仔细查看生成的HTML和脚本发现在Body和Form标签上有两个脚本事件不知道是干什么用的很好奇问了一下老大他说这是MOSS在新建模板页时自动加上的没有谁刻意去加它代码片段如下
<body onload= javascript:_spBodyOnLoadWrapper();><form id= Form runat= server onsubmit= return _spFormOnSubmitWrapper(); method= post enctype= multipart/form data>我尝试着将这两个事件取消掉然后重新部署运行程序哈哈！终于可以了那个按钮的事件再也没有丢失过可以一直被点击而不会出现不响应的情况其实罪魁祸首的就是form的onsubmit事件中的_spFormOnSubmitWrapper方法取消它就可以解决问题
但是问题马上又来了既然这个事件是MOSS自动加上的那肯定有它的用途我们不能随意就将它删掉说不定以后哪里就会出问题（虽然我到后来也不太清楚这个函数究竟是用来干什么的）那么只能曲线救国了用FireBug看看它的具体代码吧顺便跟了一下
var _spSuppressFormOnSubmitWrapper=false;function _spFormOnSubmitWrapper(){if(_spSuppressFormOnSubmitWrapper){return true;}if(_spFormOnSubmitCalled){return false;}if(typeof(_spFormOnSubmit)== function){var retval=_spFormOnSubmit();var testval=false;if(typeof(retval)==typeof(testval)&& retval==testval){return false;}}RestoreToOriginalFormAction();_spFormOnSubmitCalled=true;return true;}这个方法只要返回true就会触发服务器端时间如果返回false则不会触发我反复看了一下导致函数返回false的原因是因为_spFormOnSubmitCalled的值为true那么我们只需要将这个变量的值设为false即可重新触发服务器端事件了这个好办我马上修改代码在button按钮的客户端事件代码中这样写
//aspnetForm为Form的客户端name iframeHidden为隐藏的iFrame的namedocument forms[ aspnetForm ] target= iframeHidden;_spFormOnSubmitCalled= false;return true;然后服务端返回的时候再将form的target改回_self这样就可以了！
我不知道MOSS自动加上的那个Form事件是用来干什么的但至少我让_spFormOnSubmitCalled变量的值为false可以导致按钮的事件被触发并且可以实现我预期的效果
因为我在页面提交成功后会整个刷新页面所以也不用担心修改这个值后会带来什么样的后果最后来看一下服务器端要注册的脚本
private const string scriptOK=@ alert({}); window parent location href+=#; window parent location reload();;private const string scriptFailed=@ alert({}); window parent document forms[ aspnetForm ] target= _self;;分为两种如果成功则重新刷新整个页面如果失败则修改父页面Form的target属性的值为_self你可能会问我为什么要将父页面的location href加上一个#这主要是为了解决在FireFox下通过iFrame提交表单并重新刷新整个页面时出现是否重新提交数据的提示（这个问题在IE下不会出现）浏览器只认URL我们稍微修改一下URL的内容只要地址不变重新刷新页面时就不会出现是否重新提交数据的提示了
到目前为止我将我的代码做了这样的修改不知道会不会遇到什么问题写这篇文章的目的有两个一是记录一下自己解决这个问题的过程二是想告诉各位正在做MOSS开发的朋友如果遇到通过Ajax方式无法触发服务器端事件的问题时不妨认真检查检查客户端生成的HTML和脚本找找原因在哪里
lishixinzhi/Article/program/net/201311/12554
文章到此结束，如果本次分享的form表单代码和html表单代码的问题解决了您的问题，那么我们由衷的感到高兴！