html搜索框怎么设置？html搜索框input标签的使用方法实例

互联网 18-9-4

本篇文章主要讲述的是关于HTML 搜索框的设置，还有html 搜索框input标签的一些使用方法实例，接下来就让我们一起来阅读这篇关于html 搜索框的文章吧

首先我们来设置一个简单的搜索框：

<input type="text" class="aa"><input type="button" value="搜索" class="bb">

这是一个最简单样式的搜索框，没有很复杂的样式。如果需要设计样式可以根据class="aa"来写样式，.aa{}在括号中添加代码即可，当然这是框的样式，按钮的样式.bb{}在括号中填写代码即可。在浏览器中显示的效果如图：

这就是一个简单的搜索框的代码。

现在说说input标签的使用方法，先看个实例

我们来看点更高深的搜索框完整的代码：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>PHP中文网</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css">     #box{         width: 380px;         margin: 30px auto;         font-family: 'Microsoft YaHei';         font-size: 14px;     }     input{         width: 260px;         border: 1px solid #e2e2e2;         height: 30px;         float: left;         background-image: url(images/search.jpg);         background-repeat: no-repeat;         background-size: 25px;         background-position:5px center;         padding:0 0 0 40px;     }     #search{         width: 78px;         height: 32px;         float: right;         background: black;         color: white;         text-align: center;         line-height: 32px;         cursor: pointer;     } </style> </head> <body>     <div id="box">         <input type="text" name="search" placeholder="请输入关键字">         <div id="search">搜索</div>      </div> </body> </html>

这个代码看效果图：