Comment Créer des Boîtes de Recherche
Les boîtes de recherche sont très communes dans chaque site Web. Elle est très utile pour trouver une certaine information. Elle peut avoir des fonctions complètement automatiques pour aider les utilisateurs à rechercher.
Dans cet article nous allons montrer comment créer des boîtes de recherche avec CSS et HTML pas à pas.
- Créer HTML.
- Créez une balise <form> qui est utilisée pour ajouter des formes HTML à la page web pour la saisie d'utilisateur.
- Ajoutez une balise <input> dans l'élément <form>.
- Aussi, comprenez un paramètre fictif qui dit "Recherchez ici!" et une classe de "Recherche".
- Ajoutez une autre saisie avec la classe "submit" et la valeur "search".
<form>
<input type="text" name=text" class="search" placeholder="Recherchez ici!">
<input type="submit" name="submit" class="submit" value="Search">
</form>Maintenant, nous avons une boîte de recherche mais nous devons appliquer un style à elle.
- Ajoutez CSS.
Nous allons trois éléments que nous devons styliser: "form", "search" et "submit".
- Définissez la couleur de l'arrière-plan pour le corps (body).
- Commencez à styler les classes "form", "search" et "submit".
- Définissez width, margin, padding, and font-size.
<style>
body {
background-color: #8ebf42;
}
form {
width: 400px;
margin: auto;
margin-top: 250px;
}
input {
padding: 4px 10px;
border: 0;
font-size: 16px;
}
.search {
width: 75%;
}
.submit {
width: 70px;
background-color: #1c87c9;
color: #ffffff;
}
</style>Une fois ajouter toutes les propriétés, exécutez le code et voyez la boîte de recherche que vous avez créée!
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
body {
background-color: #8ebf42;
}
form {
width: 400px;
margin: auto;
margin-top: 250px;
}
input {
padding: 4px 10px;
border: 0;
font-size: 16px;
}
.search {
width: 75%;
}
.submit {
width: 70px;
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Créer des boîtes de recherche</h2>
<form>
<input type="text" name=text" class="search" placeholder="Recherchez ici!"/>
<input type="submit" name="submit" class="submit" value="Rechercher" />
</form>
</body>
</html>Créons des autres boîtes de recherche:
Exemple
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<title>Boîte de Recherche Impressionante</title>
<style>
body {
margin: 0;
padding: 0;
background: #00a08d;
}
.search-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #666666;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.search-box:hover > .search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn {
background: white;
color: black;
}
.search-btn {
color: #eeeeee;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
color: white;
cursor: pointer;
text-decoration: none;
}
.search-btn > i {
font-size: 20px;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="search-box">
<input type="text" name="" class="search-txt" placeholder="Tapez pour rechercher" />
<a class="search-btn" href="#">
<i class="fa fa-search" aria-hidden="true"></i>
</a>
</div>
</body>
</html>Dans l'exemple donné, nous avons utilisé une icône de recherche de Fontawesome.
Un autre exemple des boîtes de recherche en utilisant uniquement HTML et CSS:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<title>Titre du document</title>
<style>
body {
background: #cccccc;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #9e0098;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.searchTerm:focus {
color: #380136;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #9e0098;
background: #9e0098;
text-align: center;
color: #eeeeee;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.wrap {
width: 30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Créer des boîtes de recherche</h2>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Tapez" />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</body>
</html>Encore un exemple de créer des boîtes de recherche:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 50%;
}
body {
box-sizing: border-box;
}
.container {
width: 25rem;
height: 100%;
margin: 0 1rem;
position: relative;
}
h2 {
margin: 2rem;
font-size: 20px;
}
.searchbar {
font-size: 2.4rem;
width: 25rem;
height: 5rem;
border: none;
outline: none;
border-radius: 10rem;
padding: 2rem;
transition: all 0.1s;
transition-delay: 0.1s;
}
.searchbar:hover {
width: 27rem;
height: 6rem;
}
.button {
height: 2rem;
position: absolute;
top: 1.5rem;
right: 1rem;
transition: all 0.1s;
transition-delay: 0.1s;
}
.button:hover {
cursor: pointer;
}
.searchbar:hover + .button {
height: 2.5rem;
top: 1.8rem;
right: 0;
}
.searchbar::placeholder {
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Créer une boîte de recherche</h2>
<div class="container">
<input type="text" maxlength="12" placeholder="Rechercher" class="searchbar" />
<img src="https://images-na.ssl-images-amazon.com/images/I/41gYkruZM2L.png" alt="search icon" class="button" />
</div>
</body>
</html>