How to create a search bar in html5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

How to create a search bar in html5

coldplay.xixi

Feb 20, 2021 pm 04:06 PM

html5 search bar

How to make a search bar in HTML5: First create a div with an id named box to wrap the search box; then add an input tag and a div tag inside; finally use css to style them. Can.

How to create a search bar in html5

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer. This method is suitable for all brands of computers.

How to create a search bar in html5:

1. First create a new div with the id name box to wrap the search box;

2. Then add an input tag and a div tag inside, one for inputting text and the other as a button;

3. Finally, use css to style them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</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="search" name="search" placeholder="请输入关键字">
        <div id="search">搜索</div>
    </div>
</body>
</html>

Copy after login

Related learning recommendations: html tutorial

The above is the detailed content of How to create a search bar in html5. 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