Home > Article > Web Front-end > How to set up html search box? Examples of how to use the input tag in the html search box
How to set up html search box? Examples of how to use the input tag in the html search box
- 寻∝梦Original
- 2018-09-04 16:44:5662290browse
This article mainly talks about the settings of the HTML search box, as well as some examples of how to use the HTML search box input tag. Next, let us read this article about the HTML search box
First we set up a simple search box:
<input type="text" class="aa"><input type="button" value="搜索" class="bb">
This is the simplest style search box, without very complicated styles. If you need to design a style, you can write the style according to class="aa". Just add the code in the brackets for .aa{}. Of course, this is the style of the box. For the button style.bb{}, just fill in the code in the brackets. The effect displayed in the browser is as follows:
This is the code for a simple search box.
Now let’s talk about how to use the input tag, let’s look at an example first
Let’s look at the complete code of a more advanced search box:
<!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>Look at the rendering of this code:
This effect is much better than the first one, it just has a little more code, it’s all basic Knowledge of css style, if you don’t understand anything, you can leave a message below.
Note: The element is empty, it only contains label attributes.
Tip: You can use the
Okay, the above is about our article about the usage of html input tags. If you have any questions, you can leave a message below.
【Editor’s Recommendation】
How to write html space code? Summary of the expression of html space code
How to make html drop-down menu? Code example introduction to html drop-down menu
The above is the detailed content of How to set up html search box? Examples of how to use the input tag in the html search box. For more information, please follow other related articles on the PHP Chinese website!