recherche

Maison >interface Web >tutoriel HTML >Comment configurer le champ de recherche HTML ? Exemples d'utilisation de la balise input dans le champ de recherche HTML

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

寻∝梦
寻∝梦original
2018-09-04 16:44:5662348parcourir

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

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!

css html class input
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment définir la hauteur de la balise label en HTML ? Introduction à l'utilisation des balises d'étiquetteArticle suivant：Comment définir la hauteur de la balise label en HTML ? Introduction à l'utilisation des balises d'étiquette

Articles Liés

Voir plus