三、jQuery--jQuery实践--搜索框制作

input标签讲解

　　<input/>作为按钮的type属性：button、submit（后面会有二者对比分析）

　　　　（交互时的效果跟浏览器以及操作系统相关）

　　<input/>的局限性

　　　　<input/>是自闭合标签（不能嵌套其他的标签），所以不能定义复杂样式按钮，所谓复杂的样式，一般指图文混杂的按钮，如下图所示：

　　　　　　三、jQuery--jQuery实践--搜索框制作

　　　　如果想实现复杂的按钮样式，我们可以选择使用button标签。

搜索框中的form标签<form></form>

　　<form>基本构成

　　　　三、jQuery--jQuery实践--搜索框制作

　　　　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>

View Code