آموزش ساخت فرم جستجو با html

در این بخش از آموزش طراحی سایت از سایت شیرازلرن به سراغ آموزش ساخت فرم جستجو با html,css,php  می رویم.

در قالب 3 پروژه می خواهیم آموزش ساخت فرم جستجو را به شما آموزش دهیم.

آموزش ساخت فرم جستجو با html :

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

در این پروژه یک منو ایجاد می کنیم و در سمت راست آن یک باکس جستجو ایجاد میکنیم.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf8">

</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
<input type="text" placeholder="Search..">
</div>
<div style="padding-left:16px">
<h2>Responsive Search SH711.COM</h2>
<p>آموزش ساخت باکس های جستجو با html,css,php</p>
</div>
</body>
</html>

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

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

ابتدا کد html را در یک فایل با پسوند html مثلا sh711.html قرار دهید سپس کد css را در قسمت head قرار دهید و ذخیره کنید سپس فایل را اجرا کنید.

<style>
* {box-sizing: border-box;} body {
margin: 0; font-family: Arial, Helvetica, sans-serif; direction: rtl; }
.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 input[type=text] { float: right; padding: 6px; margin-top: 8px; margin-right: 16px; border: none; font-size: 17px; }
@media screen and (max-width: 600px) { .topnav a, .topnav input[type=text] { float: none; display: block; text-align: left; width: 100%; margin: 0; padding: 14px; }
.topnav input[type=text] { border: 1px solid #ccc; }
}
</style>

پروژه 2 آموزش ساخت فرم جستجو با html :

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

در این پروژه یک باکس جستجو ایجاد می کنیم این باکس شامل یک فرم ورود و دکمه میباشد.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>SH711.COM</h2>
<p>Centered inside a form with max-width:</p>
<form class="example" action="" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search.." name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</body>
</html>

پروژه 2 آموزش ساخت فرم جستجو با css :

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

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial; }
* { box-sizing: border-box; }
form.example input[type=text] { padding: 10px; font-size: 17px; border: 1px solid grey; float: left; width: 80%; background: #f1f1f1; }
form.example button { float: left; width: 20%; padding: 10px; background: #2196F3; color: white; font-size: 17px; border: 1px solid grey; border-left: none; cursor: pointer; }
form.example button:hover { background: #0b7dda; }
form.example::after { content: ""; clear: both; display: table; } </style>

پروژه 3 آموزش ساخت فرم جستجو با html :

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

در این پروژه یک باکس جستجو فول سایز را ایجاد می کنیم که تمام عرض صفحه را می پوشاند. این باکس شامل یک فرم ورود و دکمه میباشد.

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<h2>Search Button</h2>
<p>Full width:</p>
<form class="example" action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</body>
</html>

پروژه 3 آموزش ساخت فرم جستجو با css :

در قسمت پایین از پروژه 3 آموزش ساخت فرم جستجو با css ، کد css را مشاهده میکنید. کافی است کد css را در قسمت head قرار دهید. فایل را ذخیره کنید و سپس اجرا کنید.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
font-family: Arial; }
* { box-sizing: border-box; }
form.example input[type=text] { padding: 10px; font-size: 17px; border: 1px solid grey; float: left; width: 80%; background: #f1f1f1; }
form.example button { float: left; width: 20%; padding: 10px; background: #2196F3; color: white; font-size: 17px; border: 1px solid grey; border-left: none; cursor: pointer; }
form.example button:hover { background: #0b7dda; }
form.example::after { content: ""; clear: both; display: table; }
</style>

نویسنده : هدایت عباسی

ثبت نظر