表单input中type=text的提交问题

全面总结页面输入的问题
服务器君一共花费了418.947 ms进行了8次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

有时候我们希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为,不需要借助 JavaScript,浏览器已经帮我们做了这些处理,下面举几个例子来说明:

  1. 默认情况下,一个文本框的时候,提交,不管按钮 type 是 submit 还是 button:
  2. <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="button" value="提交"> 
    </form> 
    
  3. 一个文本框的时候怎么才能做到不提交,方法是加一个隐藏掉的文本框:
  4. <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="text" style="display:none"> 
    	<input type="button" value="提交"> 
    </form>
    
  5. 只要有type为submit的按钮存在,一个文本框还是多个文本框都提交:
  6. <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="submit" value="提交"> 
    </form> 
    
    <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="text"> 
    	<input type="submit" value="提交"> 
    </form>
    
  7. 多个文本框的时候,不提交,用type为button的按钮就行啦:
  8. <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="text"> 
    	<input type="button" value="提交"> 
    </form> 
    
  9. 用button元素时,FF和IE下有不同的表现:
  10. <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="text"> 
    	<button>提交</button> 
    </form>
    
  11. radio和checkbox在FX下也会触发提交表单,在IE下不会:
  12. <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="radio" name="a"> 
    	<input type="checkbox" name="b"> 
    	<input type="checkbox" name="c"> 
    	<input type="button" value="提交"> 
    </form> 
    
  13. type为image的按钮,等同于type为submit的效果
  14. <form action="http://www.nowamagic.net"> 
    	<input type="text"> 
    	<input type="text"> 
    	<input type="image" src="http://www.nowamagic.net/images/FeedMe.jpg"> 
    </form> 
    

总结几条规则:

  • 如果表单里有一个type=”submit”的按钮,回车键生效。
  • 如果表单里只有一个type=”text”的input,不管按钮是什么type,回车键生效。
  • 如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FF默认为type=submit。
  • 其他表单元素如textarea、select不影响,radio checkbox不影响触发规则,但本身在FF下会响应回车键,在IE下不响应。
  • type=”image”的input,效果等同于type=”submit”,不知道为什么会设计这样一种type,不推荐使用,应该用CSS添加背景图合适些。

实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第3条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。

本文地址:http://www.nowamagic.net/librarys/veda/detail/718,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/718

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《重构:改善既有代码的设计》 福勒(Martin Fowler) (作者), 熊节 (译者)

《重构:改善既有代码的设计》清晰地揭示了重构的过程,解释了重构的原理和最佳实践方式,并给出了何时以及何地应该开始挖掘代码以求改善。书中给出了70多个可行的重构,每个重构都介绍了一种经过验证的代码变换手法的动机和技术。《重构:改善既有代码的设计》提出的重构准则将帮助你一次一小步地修改你的代码,从而减少了开发过程中的风险。

更多计算机宝库...