标签：
input标签讲解
<input/>作为按钮的type属性：button、submit（后面会有二者对比分析）
（交互时的效果跟浏览器以及操作系统相关）
<input/>的局限性
<input/>是自闭合标签（不能嵌套其他的标签），所以不能定义复杂样式按钮，所谓复杂的样式，一般指图文混杂的按钮，如下图所示：
如果想实现复杂的按钮样式，我们可以选择使用button标签。
搜索框中的form标签<form></form>
<form>基本构成
action属性：决定了表单会被提交到服务器的哪个端口
target属性：决定了页面打开方式
method属性：默认使用get即可
<input/>提交按钮的默认行为：
当<input/>标签的type="submit"时，可以提交表单内容到服务器
此时按钮必须放置在要提交的表单元素内，也就是<form>标签内
实例一：实现简单的搜索框
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title>bing search</title> <style type="text/css"> body{background-color: #333;} .bg-div{position:relative;background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;} .logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;} .search-form{float: left; background-color: #fff;padding:5px;} .search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;} .search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0} .search-box{position:absolute;top:150px;left: 200px; } </style> </head> <body> <div class="bg-div"> <div class="search-box"> <div class="logo"></div> <form class="search-form" action="https://cn.bing.com/search" target="_blank"> <input type="text" class="search-text" name="q"/> <input type="submit" class="search-button" value=""/> </form> </div> </div> </body> </html>
实例二：实现带有智能提示的搜索框
需要掌握的知识点：
借助jQuery&JS完成动态效果
事件绑定和事件代理
AJAX（）用于和服务器直接的信息交换
其他：IE兼容性视图设置：
标签：
原文地址：http://www.cnblogs.com/jiangtengteng/p/5432283.html
