ساخت دکمه جستجو در html
در این بخش از آموزش html به سراغ ساخت دکمه جستجو در html می رویم و چند دکمه زیبا را طراحی می کنیم و کد آن را در اختیار شما عزیزان قرار می دهیم.
در تاپ سایت 98 می توانید کدهای html زیبایی را مشاهده و دانلود نمایید.
ساخت فرم دکمه جستجو
برای ساخت دکمه جستجو در html می بایست آن را در یک فرم قرار دهیم کد فرم را می توانید در قسمت پایین مشاده نمایید.
در بخش action می توانید آدرس صفحه php را قرار دهید.
</form>
ورودی دکمه جستجو در html
برای ساخت دکمه جستجو در html بایستی یک input قرار دهید تا فرد متن جستجو را در آن قرار دهد برای این کار از input با نوع text استفاده می کنیم.
در قسمت placeholder متنی را می نویسیم که هیچ تاثیری ندارد و بیشتر جنبه راهنما دارد به کاربر کمک می کند تا بفهمد که باید چه کاری را انجام دهد.
پس از اجرای کد در آن نوشته شده search و با تایپ اولین حرف آن کلمه پاک می شود.
یکی دیگر از ویژگی های input ویژگی name است که در کدنویسی بسیار مهم است و نشان می دهد که منظور ما کدام input است.
دکمه جستجو در html
در آخر دکمه جستجو را می بینید که از nutton و نوع submit استفاده شده است. برای ساخت دکمه جستجو در html می بایست از چند خط کد استفاده کرد.
در قسمت پایین کد کامل آن را مشاده خواهید کرد.
کد کامل ساخت دکمه جستجو در html
در این بخش کد کامل ساخت دکمه جستجو در html را مشاهده می کنید. از این کد برای ساخت دکمه جستجو استفاده می شود.
باید توجه کنید که input باید در یک فرم قرار گیرد و برای کدنویسی آن از php استفاده می شود.
با html فقط ظاهر دکمه را آماده می کنیم و کدنویسی اصلی آن با php میباشد.
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
ساخت دکمه زیبا جستجو در html
در این بخش کد ساخت دکمه زیبا جستجو در html را مشاهده می کنید.
کافی است این کد را در یک فایل با پسوند html ذخیره کنید و اجرا نمایید یک منو زیبا با دکمه جستجو را مشاده خواهید کرد . از این کد می توانید در پروژه های خود استفاده کنید.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left; display: block;
color: black; text-align: center;
padding: 14px 16px; text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #2196F3; color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right; padding: 6px 10px; margin-top: 8px; margin-right: 16px; background: #ddd; font-size: 17px; border: none; cursor: pointer; }
.topnav .search-container button:hover {
background: #ccc; }
@media screen and (max-width: 600px) {
.topnav .search-container { float: none; }
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="https://topsite98.com/">Home</a>
<a href="https://topsite98.com/">About</a>
<a href="https://topsite98.com/">Contact</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="padding-left:16px; margin-top: 50px">
<a href="https://topsite98.com/">topsite98.com</a>
</div>
</body>
</html>
امیدواریم این آموزش برای شما مفید باشد . در نظر داشته باشید این کد تست شده می باشد. چنانچه کد جواب نداد احتمالا پسوند فایل شما html نیست . حتما پسوند فایل ها را در ویندوز فعال نمایید.
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
-
ناشناس
2022-03-24 05:33:23
سلام ممنون از مطلب خوبتون سوالی داشتم اینکه اگه به خوایم به جای علامت ذره بین بنویسیم جستجو کجای کد رو باید تغییر بدیم
-
ناشناس
2022-08-11 16:00:12
کار نمیکنه
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید