ساخت فرم جستجو با css

هدایت عباسی آموزش CSS

چندین مینی پروژه ، ساخت فرم جستجو با css . این کدها تست شده است و می توانید از آن در پروژه های خود استفاده کنید.

این آموزش متعلق به تاپ سایت 98 میباشد.

کد html ساخت فرم جستجو :

کد html ساخت فرم جستجو را در قسمت زیر می بینید.

در این کد ما یک فرم با تگ form ایجاد کرده ایم. در آن یک input از نوع text و یک دکمه قرار داده ایم.

دکمه را می توانید از نوع submit انتخاب کنید.

برای ارسال فرم نیز بایستی از متد post استفاده کرده و آدرس فایل php را در action قرار می دهیم.

<form>
<input type="text" name="search" placeholder="Search..">
<button>Submit</button>
</form>

در قسمت پایین چندین استایل را برای فرم مشخص می کنیم.

این کد را می توانید در یک فایل html ذخیره کرده و تست نمایید.

ساخت فرم جستجو با انیمیشن در css :

در این بخش از آموزش css به سراغ ساخت فرم جستجو با انیمیشن در css می رویم.

در این فرم با کلیک داخل input سایز آن تغییر می کند.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input {
font-size: 16px;
width: 160px;
box-sizing: border-box;
border: 2px solid #ddd;
background-color: #f9e7e7;
background-position: 10px 10px;
padding: 15px;
transition: width 0.4s ease-in-out;
}
button{padding: 15px;}
input:focus {width: 100%;}
</style>
</head>
<body>
<h1><a href="https://topsite98.com/">TopSite98.COM search form:</a></h1>
<form>
<input type="text" name="search" placeholder="Search..">
<button>Submit</button>
</form>
</body>
</html>

ساخت فرم جستجو زیبا با css :

در این بخش با ساخت فرم جستجو زیبا با css آشنا می شویم.

در این بخش با یک نمونه فرم جستجوی دیگر آشنا می شویم.

برای ساخت فرم جستجو زیبا با css ، کافی است کد داخل style را با کد استایل بالایی جابجا کنید.

یعنی در کد کامل فقط css را تغییر می دهیم.

ساخت منو و فرم جستجو با css :

کد زیر ساخت منو و فرم جستجو با css در کنار هم میباشد. در سمت چپ منو و در سمت راست یک فرم جستجو را مشاهده میکنید.

کد زیر تست شده است و می توانید از آن استفاده نمایید.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {
margin: 0;
}
.cn{height: 500px;}
.nav1 {overflow: hidden;
background-color: #e9e9e9;
}
.nav1 a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav1 a:hover {
background-color: #ddd;
color: black;
}
.nav1 a.active {background-color: #2196F3;color: white;}
.nav1 input{
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
</style>
</head>
<body>
<div class="nav1">
<a class="active" href="https://topsite98.com/">Home</a>
<a href="https://topsite98.com/">About</a>
<a href="https://topsite98.com/">Contact</a>
<input type="text" placeholder="Search..">
</div>
<div class="cn">
<h2>TopSite98.COM Search</h2>
<p>html css - hedayat abbasi</p>
</div>
</body>
</html>

ساخت فرم جستجو زیبا و دکمه در کنار هم :

مثال زیر کد ساخت فرم جستجو زیبا و دکمه در کنار هم می باشد. ما یک فرم جستجوی زیبا را ایجاد کرده ایم و در کنار آن یک دکمه نیز قرار داده ایم.

دکمه بجای متن از یک آیکون جستجو استفاده می کند که متفاوت از بقیه کدها باشد.

برای استفاده از کد می توان آن را در یک فایل html قرار دهید و اجرا کنید و همچنین در پروژه های خود استفاده کنید.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
form input{
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 60%;
background: #f1f1f1;
}
form button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form button:hover {background: #0b7dda;}
form::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h1><a href="https://topsite98.com/">TopSite98.COM search form:</a></h1>
<form>
<input type="text" name="search" placeholder="Search..">
<button><i class="fa fa-search"></i></button>
</form>
</body>
</html>

کدها همه تست شده است و اگر مشکلی داشتید حتما توضیحات را مطالعه کنید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید