logo
logo
تبلیغ کلیکی تاپ سایت 98

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

ساخت فرم جستجو با 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 را تغییر می دهیم.

<style>
input {
font-size: 16px;
width: 300px;
box-sizing: border-box;
border: 2px solid #ddd;
background-color: #fff;
color: #333;
padding: 15px;
}
button{padding: 15px;}
input:focus {background-color: orange;color: #fff;width: 400px;}
</style>

ساخت منو و فرم جستجو با 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>

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

عزیزانی که تمایل دارند به تیم نویسندگی تاپ سایت 98 بپیوندند می توانند از طریق واتساپ با ما در ارتباط باشند. ما بهترین افراد را به تیم خود اضافه خواهیم کرد.

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

دوره ارز دیجیتال تاپ سایت 98
دوره های آموزشی دوره های آموزشی

نظرات کاربران

از دیدگاه مرتبط با موضوع استفاده نمایید.

از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.

برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.