How to set up html search box? Examples of how to use the input tag in the html search box-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to set up html search box? Examples of how to use the input tag in the html search box

寻∝梦

Sep 04, 2018 pm 04:44 PM

html input search bar

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">

Copy after login

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:

How to set up html search box? Examples of how to use the input tag in the html search box

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: &#39;Microsoft YaHei&#39;;
        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>

Copy after login

Look at the rendering of this code:

How to set up html search box? Examples of how to use the input tag in the html search box

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 element to define the label of the element.

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn