در بخش آموزش کاربردی html، این بار به سراغ یک موضوع به ظاهر ساده و در عین حال پرکاربرد رفته ایم، در این آموزش می خواهیم به نحوه قرار دادن فیلد جستجوی گوگل در سایت یا وبلاگ با تنظیمات مربوط به سفارشی سازی و افزودن برخی قابلیت های جانبی دیگر بپردازیم، همانطور که می دانیم استفاده از این امکان گوگل، در خیلی از وبلاگ ها و سایت ها شایع است، از این رو، بد ندیدیم که مطلبی را به این موضوع اختصاص دهیم، در این آموزش ضمن بررسی نحوه ایجاد یک پرس و جو از سرور گوگل، با ساخت فرم های html به صورت سفارشی نیز آشنا خواهیم شد. پرس و جو از سرور گوگل قبل از اینکه به فرم جستجوی گوگل بپردازیم، بد نیست با نحوه ایجاد یک درخواست ساده و پارامترهای آن از سرور گوگل آشنا شویم، اگر دقت کرده باشید، هنگامی که عبارتی را در فیلد جستجوی این سایت وارد می کنید، پس از کلیک بر روی دکمه جستجو، در نوار آدرس، پارامترهایی قابل مشاهده است که با یک علامت & از هم جدا شده و قابل تشخیص هستند، در ساده ترین حالت، مثال زیر کلمه آموزش برنامه نویسی وب را جستجو می کند. http://www.google.com/search?q=برنامه نویسی وب حرف q در درخواست ما مخفف query یا پرس و جو است و عبارت بعد از آن، کلمه مورد نظر برای جستجو است، در این حالت، گوگل در تمام وب، عبارت درخواست شده را جستجو می کند و نتایج نمایش داده شده از تمام سایت ها و وبلاگ ها است، اما اگر بخواهیم جستجو را محدود به سایت یا وبلاگ خود کنیم، از یک پارامتر دیگر به نام sitesearch استفاده می کنیم، به طور مثال: http://www.google.com/search?q=برنامه نویسی وب&sitesearch=http://webgoo.ir به این صورت تنها نتایجی نشان داده می شوند که مربوط به آدرس پارامتر sitesearch باشند، همین کار را می توان با کدهای html و فرم های ساده وب انجام داد که در ادامه به آن می پردازیم. تنظیم کد html برای ایجاد فرم جستجوی گوگل قبل از هر چیز ما به یک کد html جهت ایجاد فرم جستجو احتیاج داریم، در زیر این فرم اولیه را کدنویسی کرده ایم. <form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;"> <input type="text" name="q" size="22px" maxlength="255" value="" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /> <input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br /> <input type="hidden" name="sitesearch" value="http://webgoo.ir" /> </form> پیش نمایش کد را در انتهای صفحه می توانید ملاحظه کنید. توضیح: - تمامی موارد این کد، بنا بر نیاز و سلیقه شما قابل تغییر هستند، به طور مثال عرض باکس جستجو در قسمت width برابر 250 پیکسل است که می توانید متناسب با قالب سایت یا وبلاگ خود آن را تغییر دهید، یا به فرض برای تنظیم عناصر در یک خط جدید از تگ br در html استفاده کنید. - در قسمت style می توانید از کدهای css برای سفارشی سازی ظاهر فرم ها استفاده کنید، یا به طور جداگانه کلاس (class) و آی دی (id) برای آنها تعریف کنید. - دو فیلد با نام q و sitesearch بخش اصلی درخواست ما را شکل می دهند، مقادیر value برای فیلد q خالی است و توسط کاربر پر می شود، برای فیلد sitesearch باید آدرس کامل سایت یا وبلاگ خود را (به جای http://webgoo.ir) جایگزین کنید. - برای باز شدن پنجره جستجو در صفحه جدید، به قسمت مربوط به تگ فرم، مقادیر target و blank را اضافه کنید، به فرض: <form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;" target="_blank"> افزودن قابلیت تعاملی با جاوا اسکریپت با توجه به نیاز خود، می توانید امکانات دیگری به فرم جستجو اضافه کنید، در اینجا ما یکی از پرکاربردترین تکنیک ها را به فرم جستجوی گوگل اضافه می کنیم و آن قابلیت تعاملی است، منظور از این قابلیت، امکان درج یک عبارت به صورت پیش فرض در فیلد جستجو است که وقتی کاربر (جهت وارد کردن متن) در آن کلیک می کند، خود به خود محو شده و اگر (بدون ورود حرفی) در خارج از آن فیلد کلیک کند، به طور خودکار عبارت پیش فرض ظاهر می شود. کد جاوا اسکریپت و توابع: <script type="text/javascript"> function formclear(thisfield, defaulttext) { if (thisfield.value == defaulttext) { thisfield.value = ""; } } function formrecall(thisfield, defaulttext) { if (thisfield.value == "") { thisfield.value = defaulttext; } } </script> فرم جستجوی ساده به همراه قابلیت تعاملی: <form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;" target="_blank"> <input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" /> <input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br /> <input type="hidden" name="sitesearch" value="http://webgoo.ir" /> </form> توضیح: - در اینجا از دو تابع ساده جاوا اسکریپت و رویداد های onclick (هنگامی که کاربر در فیلد کلیک می کند) و onblur (هنگامی که کاربر در خارج از فیلد کلیک می کند) استفاده کرده ایم. - کد جاوا اسکریپت را ترجیحا در قسمت هدر قالب (بین تگ های head) قرار دهید و فرم جستجو را بعد از اعمال تنظیمات مورد نظر، در قسمت تگ body (محل قرار دادن آن سلیقه ای است و تفاوتی ندارد که در کجای صفحه اضافه شود). فرم جستجو با دکمه های رادیویی و منوی کشویی برای زیبا تر شدن فرم جستجو و افزودن یک قابلیت دیگر به آن، می توانیم از دکمه های رادیویی یا منوهای کشویی استفاده کنیم، این کار را در کدهای زیر انجام داده ایم که ملاحظه می کنید. فرم جستجوی گوگل با دکمه های رادیویی: <form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;"> <input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; margin-bottom:4px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" /> <input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br /> <input type="radio" name="sitesearch" value="http://webgoo.ir" checked="checked" />جستجو در وبگو<br /> <input type="radio" name="sitesearch" value="" />جستجو در وب<br /> </form> فرم جستجوی گوگل با دکمه های کشویی: <form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;"> <input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; margin-bottom:4px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" /> <input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br /> <select name="sitesearch"> <option value="http://webgoo.ir">جستجو در وبگو</option> <option value="">جستجو در وب</option> </select> </form> پیش نمایش در پایان این نکته را نیز اضافه کنیم که سرور گوگل از پروتکل امن https استفاده می کند، لذا به جای http://google.com در کدهای بالا، می توانید از https://google.com نیز استفاده کنید. منبع: وبگو http://webgoo.ir/106/%D9%86%D8%AD%D9%88%D9%87-%D9%82%D8%B1%D8%A7%D8%B1-%D8%AF%D8%A7%D8%AF%D9%86-%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DB%8C-%DA%AF%D9%88%DA%AF%D9%84-%D8%AF%D8%B1-%D8%B3%D8%A7%DB%8C%D8%AA-%DB%8C%D8%A7-%D9%88%D8%A8%D9%84%D8%A7%DA%AF#comment

در بخش آموزش کاربردی html، این بار به سراغ یک موضوع به ظاهر ساده و در عین حال پرکاربرد رفته ایم، در این آموزش می خواهیم به نحوه قرار دادن فیلد جستجوی گوگل در سایت یا وبلاگ با تنظیمات مربوط به سفارشی سازی و افزودن برخی قابلیت های جانبی دیگر بپردازیم، همانطور که می دانیم استفاده از این امکان گوگل، در خیلی از وبلاگ ها و سایت ها شایع است، از این رو، بد ندیدیم که مطلبی را به این موضوع اختصاص دهیم، در این آموزش ضمن بررسی نحوه ایجاد یک پرس و جو از سرور گوگل، با ساخت فرم های html به صورت سفارشی نیز آشنا خواهیم شد.

پرس و جو از سرور گوگل

قبل از اینکه به فرم جستجوی گوگل بپردازیم، بد نیست با نحوه ایجاد یک درخواست ساده و پارامترهای آن از سرور گوگل آشنا شویم، اگر دقت کرده باشید، هنگامی که عبارتی را در فیلد جستجوی این سایت وارد می کنید، پس از کلیک بر روی دکمه جستجو، در نوار آدرس، پارامترهایی قابل مشاهده است که با یک علامت & از هم جدا شده و قابل تشخیص هستند، در ساده ترین حالت، مثال زیر کلمه آموزش برنامه نویسی وب را جستجو می کند.

http://www.google.com/search?q=برنامه نویسی وب

حرف q در درخواست ما مخفف query یا پرس و جو است و عبارت بعد از آن، کلمه مورد نظر برای جستجو است، در این حالت، گوگل در تمام وب، عبارت درخواست شده را جستجو می کند و نتایج نمایش داده شده از تمام سایت ها و وبلاگ ها است، اما اگر بخواهیم جستجو را محدود به سایت یا وبلاگ خود کنیم، از یک پارامتر دیگر به نام sitesearch استفاده می کنیم، به طور مثال:

http://www.google.com/search?q=برنامه نویسی وب&sitesearch=http://webgoo.ir

به این صورت تنها نتایجی نشان داده می شوند که مربوط به آدرس پارامتر sitesearch باشند، همین کار را می توان با کدهای html و فرم های ساده وب انجام داد که در ادامه به آن می پردازیم.

تنظیم کد html برای ایجاد فرم جستجوی گوگل

قبل از هر چیز ما به یک کد html جهت ایجاد فرم جستجو احتیاج داریم، در زیر این فرم اولیه را کدنویسی کرده ایم.

<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;">
<input type="text" name="q" size="22px" maxlength="255" value="" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<input type="hidden" name="sitesearch" value="http://webgoo.ir" />
</form>

پیش نمایش کد را در انتهای صفحه می توانید ملاحظه کنید.
توضیح:
- تمامی موارد این کد، بنا بر نیاز و سلیقه شما قابل تغییر هستند، به طور مثال عرض باکس جستجو در قسمت width برابر 250 پیکسل است که می توانید متناسب با قالب سایت یا وبلاگ خود آن را تغییر دهید، یا به فرض برای تنظیم عناصر در یک خط جدید از تگ br در html استفاده کنید.
- در قسمت style می توانید از کدهای css برای سفارشی سازی ظاهر فرم ها استفاده کنید، یا به طور جداگانه کلاس (class) و آی دی (id) برای آنها تعریف کنید.
- دو فیلد با نام q و sitesearch بخش اصلی درخواست ما را شکل می دهند، مقادیر value برای فیلد q خالی است و توسط کاربر پر می شود، برای فیلد sitesearch باید آدرس کامل سایت یا وبلاگ خود را (به جای http://webgoo.ir) جایگزین کنید.
- برای باز شدن پنجره جستجو در صفحه جدید، به قسمت مربوط به تگ فرم، مقادیر target و blank را اضافه کنید، به فرض:

<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;" target="_blank">

افزودن قابلیت تعاملی با جاوا اسکریپت

با توجه به نیاز خود، می توانید امکانات دیگری به فرم جستجو اضافه کنید، در اینجا ما یکی از پرکاربردترین تکنیک ها را به فرم جستجوی گوگل اضافه می کنیم و آن قابلیت تعاملی است، منظور از این قابلیت، امکان درج یک عبارت به صورت پیش فرض در فیلد جستجو است که وقتی کاربر (جهت وارد کردن متن) در آن کلیک می کند، خود به خود محو شده و اگر (بدون ورود حرفی) در خارج از آن فیلد کلیک کند، به طور خودکار عبارت پیش فرض ظاهر می شود.
کد جاوا اسکریپت و توابع:

<script type="text/javascript">
function formclear(thisfield, defaulttext) {
    if (thisfield.value == defaulttext) {
        thisfield.value = "";
    }
}
function formrecall(thisfield, defaulttext) {
    if (thisfield.value == "") {
        thisfield.value = defaulttext;
    }
}
</script>

فرم جستجوی ساده به همراه قابلیت تعاملی:

<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;" target="_blank">
<input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<input type="hidden" name="sitesearch" value="http://webgoo.ir" />
</form>

توضیح:
- در اینجا از دو تابع ساده جاوا اسکریپت و رویداد های onclick (هنگامی که کاربر در فیلد کلیک می کند) و onblur (هنگامی که کاربر در خارج از فیلد کلیک می کند) استفاده کرده ایم.
- کد جاوا اسکریپت را ترجیحا در قسمت هدر قالب (بین تگ های head) قرار دهید و فرم جستجو را بعد از اعمال تنظیمات مورد نظر، در قسمت تگ body (محل قرار دادن آن سلیقه ای است و تفاوتی ندارد که در کجای صفحه اضافه شود).

فرم جستجو با دکمه های رادیویی و منوی کشویی

برای زیبا تر شدن فرم جستجو و افزودن یک قابلیت دیگر به آن، می توانیم از دکمه های رادیویی یا منوهای کشویی استفاده کنیم، این کار را در کدهای زیر انجام داده ایم که ملاحظه می کنید.
فرم جستجوی گوگل با دکمه های رادیویی:

<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;">
<input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; margin-bottom:4px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<input type="radio" name="sitesearch" value="http://webgoo.ir" checked="checked" />جستجو در وبگو<br />
<input type="radio" name="sitesearch" value="" />جستجو در وب<br />
</form>

فرم جستجوی گوگل با دکمه های کشویی:

<form method="get" action="http://www.google.com/search" dir="rtl" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; border:1px solid #999; padding:4px; width:250px;">
<input type="text" name="q" size="22px" maxlength="255" value="جستجو..." style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; margin-bottom:4px;" onclick="formclear(this, 'جستجو...')" onblur="formrecall(this, 'جستجو...')" />
<input type="submit" value="جستجو در گوگل" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px;" /><br />
<select name="sitesearch">
<option value="http://webgoo.ir">جستجو در وبگو</option>
<option value="">جستجو در وب</option>
</select>
</form>

پیش نمایش
در پایان این نکته را نیز اضافه کنیم که سرور گوگل از پروتکل امن https استفاده می کند، لذا به جای http://google.com در کدهای بالا، می توانید از https://google.com نیز استفاده کنید.

منبع: وبگو

http://webgoo.ir/106/%D9%86%D8%AD%D9%88%D9%87-%D9%82%D8%B1%D8%A7%D8%B1-%D8%AF%D8%A7%D8%AF%D9%86-%D8%AC%D8%B3%D8%AA%D8%AC%D9%88%DB%8C-%DA%AF%D9%88%DA%AF%D9%84-%D8%AF%D8%B1-%D8%B3%D8%A7%DB%8C%D8%AA-%DB%8C%D8%A7-%D9%88%D8%A8%D9%84%D8%A7%DA%AF#comment