Comment configurer le champ de recherche HTML ? Exemples d'utilisation de la balise input dans le champ de recherche HTML-tutoriel HTML-php.cn

Comment configurer le champ de recherche HTML ? Exemples d'utilisation de la balise input dans le champ de recherche HTML

寻∝梦

Libérer： 2018-09-04 16:44:56

original

62352 Les gens l'ont consulté

Cet article parle principalement des paramètres du champ de recherche HTML, ainsi que de quelques exemples d'utilisation de la balise de saisie du champ de recherche HTML. Ensuite, lisons ensemble cet article sur le champ de recherche HTML

Nous avons d'abord configuré un champ de recherche simple :

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

Copier après la connexion

Il s'agit du style de champ de recherche le plus simple, sans styles très compliqués. Si vous avez besoin de concevoir un style, vous pouvez écrire le style selon class="aa". Ajoutez simplement le code entre parenthèses pour .aa{}. Bien sûr, c'est le style de la boîte. bb{}, remplissez simplement le code entre parenthèses. L'effet affiché dans le navigateur est le suivant :

Comment configurer le champ de recherche HTML ? Exemples dutilisation de la balise input dans le champ de recherche HTML

C'est le code d'un simple champ de recherche.

Parlons maintenant de la façon d'utiliser la balise input, regardons d'abord un exemple

Regardons le code complet d'un champ de recherche plus avancé :

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

Copier après la connexion

Regardez le rendu de ce code :

Comment configurer le champ de recherche HTML ? Exemples dutilisation de la balise input dans le champ de recherche HTML

Cet effet est bien meilleur que le premier, il a juste un un peu plus de code. Connaissance de base du style CSS, si vous ne comprenez rien, veuillez laisser un message ci-dessous.

Remarque : L'élément est vide, il ne contient que les attributs d'étiquette.

Conseil : Vous pouvez utiliser l'élément pour définir l'étiquette de l'élément

D'accord, ce qui précède concerne notre article sur l'utilisation des balises d'entrée HTML. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

[Recommandation de la rédaction]

Comment écrire du code d'espace html ? Résumé de l'expression du code spatial html

Comment faire un menu déroulant html ? Introduction aux exemples de code pour le menu déroulant HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!