首先我们来设置一个简单的搜索框：
<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>编程之家</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>这个代码看效果图：
这个效果就比第一个好看太多了，就是多了点代码，都是基础的css样式的知识，如果有不懂的可以在下方留言。
注意: <input> 元素是空的,它只包含标签属性。
提示: 你可以使用 <label> 元素来定义 <input> 元素的标注。
好了，以上就是关于我们这篇关于html input标签的用法，有问题的可以在下方留言。
【小编推荐】