• مشکی
  • سفید
  • سبز
  • آبی
  • قرمز
  • نارنجی
  • بنفش
  • طلایی
تعداد مطالب : 642
تعداد نظرات : 140
زمان آخرین مطلب : 3708روز قبل
آموزش و تحقيقات

تنظیم قلم مورد استفاده برای متن در HTML

اگر تمایل دارید شکل فونت متن خود را در یک صفحه تغییر دهید، می توانید این کار را با استفاده از تگ font انجام دهید.( این روش تأثیری بر تصاویر موجود در صفحه شما ندارد).

با افزودن این شناسه: " "=face به تگ فونت می توانید شکل آنرا تغییر دهید. به یک مثال توجه کنید:

<font face="Times New Roman">This line is Written by Times New Roman font face</font>

این هم متن نوشته شده با فونت Times New Roman:

This line is Writen by Times New Roman font face

البته نکاتی هست که باید به آنها توجه کنید:

  1. افرادی که صفحه شما را تماشا می کنند برای اینکه بتوانند صفحه را با فونتی که شما برای آن تنظیم کرده اید ببینند باید حداقل مرورگر اینترنت اکسپلورر یا نت اسکیپ 3 به بالا داشته باشند.(زیاد نگران این قسمت نباشید، اکنون تقریباً تمامی کاربران مرورگرهای جدیدتری دارند)

  2. افراد بیننده صفحه شما باید فونت مورد استفاده شما را قبلاً نصب کرده باشند تا بتوانند صفحه شما را به خوبی مشاهده کنند.
    وقتی شما در صفحه خود می خواهید از یک فونت خاص استفاده کنید مراقب باشید و فونتی را استفاده کنید که بیشتر افراد به صورت پیش فرض داشته باشند. برای مثال وقتی ویندوز XP را نصب می کنید چندین فونت به صورت خودکار بر روی کامپیوتر شما نصب می شوند. مثلاً Tahoma, Arial, Times New Roman و چندین فونت دیگر.

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

در اینجا لیستی از فونتهایی که زیاد مورد استفاهد قرار می گیرد آورده شده است که می تواندی با شناسه " "=face استفاده کنید:

متن نمونه برای زبان فارسی Arial Arial
متن نمونه برای زبان فارسی Tahoma Tahoma
متن نمونه برای زبان فارسی Times New Roman Times New Roman
متن نمونه برای زبان فارسی Arial Black Arial Black
متن نمونه برای زبان فارسی Courier Courier
متن نمونه برای زبان فارسی Courier New Courier New
متن نمونه برای زبان فارسی Modern Modern
متن نمونه برای زبان فارسی Terminal Terminal
متن نمونه برای زبان فارسی Symbol Symbol

البته باید توجه داشته باشید که اگرچه تگ <font> هنوز در HTML4.01 کارایی دارد ولی استفاده از این تگ توصیه نمی شود. بهتر است برای تنظیم فونت متن خود از CSS استفاده کنید.

نظر یادتون نره؟

دوشنبه 14/8/1386 - 14:6
آموزش و تحقيقات

شناسه های مختلف قابل استفاده برای خط افقی

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

  • width :
    این فرمان مقدار عرض خط افقی را مشخص می کند. ر این فرمان شما می توانید از مقیاس پیکسل یا درصد استفاده کنید. گزینه پیش فرض برای این فرمان 100% است.
  • "align="left :
    این فرمان سمت قرار گرفتن خط افقی را مشخص می کند. شما می توانید خط را به صورت چپ چین، راست چین و در مرکز صفحه قرار دهید. گزینه پیش فرض این فرمان center است که خط را در مرکز صفحه قرار می دهد. البته زمانی این وضعیت مشخص می شود که عرض خط افقی کمتر از عرض صفحه باشد.
  • "size="3 :
    این فرمان اندازه خط را مشخص می کند. اندازه پیش فرض برای خط 2 است.
  • "noshade="noshade :
    این فرمان خط را به صورت تو پر نشان می دهد.

در اینجا هر کدام از فرمانهای بالا را با یک مثال بیشتر توضیح می دهیم.

---------------------------------------------------------------------------------------------------------------

<hr width="250">

با این فرمان خطی افقی مانند زیر خواهید داشت:


---------------------------------------------------------------------------------------------------------------

<hr width="250" align="right">

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


---------------------------------------------------------------------------------------------------------------

<hr width="250" size="10">

با این تگ یک خط افقی با عرض 250 پیکسل و پهنای 10 خواهید داشت:


---------------------------------------------------------------------------------------------------------------

حالا یک اندازه بزرگ را برای پهنای خط انتخاب می کنیم، مثلاً 80 ، نتیجه به این صورت خواهید بود:


همانطور که ملاحظه می کنید، خط به صورت تو خالی و مانند یک حباب به نظر می رسد.

حالا اگر از فرمان noshade استفاده کنید، خط به صورت تو پر نمایش داده می شود:

<hr width="250" noshade="noshade">

این بار با اندازه 80 این تگ را امتحان می کنیم:

<hr width="250" size="80" noshade>

---------------------------------------------------------------------------------------------------------------

در برخی مرورگرها مانند اینترنت Internet Explorer 4.0 به بعد و Mozilla Firefox امکان تغییر رنگ خط نیز وجود دارد. اما ممکن است این رنگ در همه مرورگرها مثلاً Opera 9.0 قابل مشاهده نباشد و خط به رنگ پیش فرض مشاهده شود.

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

<hr width="250" size="20" color="yellow" noshade>

نظر یادتون نره؟
دوشنبه 14/8/1386 - 14:5
آموزش و تحقيقات

تغییر مسیر بازدید کنندگان پس از مدت مشخص با HTML

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

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

<html>
<head>
<meta http-equiv="refresh" content="3;url=http://www.yoursite.com/destinationpage.htm">
<title>این صفحه جا به جا شده است</title>
</head>
<body>
متن مورد نظر شما
</body>
</html>

برای مشاهده نتیجه، لینک زیر را کلیک کنید:

ورود به صفحه آزمایشی

این نکته را مد نظر داشته باشید که تگ Meta refresh قبل از عنوان صفحه (TITLE) نوشته می شود.

فرمان " "=content دو کار را انجام می دهد. اول مشخص می کند که مرورگر قیل از تغییر مسیر چند ثانیه باید صبر کند. دوم آدرس صفحه ای که باید مسیر به آن آدرس تغییر یابد. به این نکته توجه کنید که هر دو قسمت زمان و آدرس صفحه در یک جفت دابل کوت قرار دارند نه دو جفت. برای جدا کردن این دو قسمت باید از نقطه ویرگول (;) استفاده کرد.

در بخش BODY هم ر چیزی که بخواهید می توانید بنویسید. همچنین می توانید برای کاربرانی که از مرورگرهای قدیمی استفاده می کنند یک لینک را قرار دهید تا به صورت دستی به صفحه جدید وارد شوند.

<html>
<head>
<meta http-equiv="refresh" content="3;url=http://www.yoursite.com/destinationpage.htm">
<title>این صفحه جا به جا شده است</title>
</head>
<body>
این صفحه جا به جا شده است. اگر مرورگر شما به صورت اتوماتیک به صفحه جدید نرفت <a
href="http://www.yoursite.com/destinationpage.htm">اینجا</a> را کلیک کنید تا به صورت دستی به صفحه جدید وارد شوید
</body>
</html>
نظر یادتون نره؟
دوشنبه 14/8/1386 - 14:4
آموزش و تحقيقات

آشنایی با متا تگها و موارد استفاده آنها در HTML

تگهای META مورد استفاده موتورهای جستجو برای بررسی و شاخص گذاری صفحات قرار می گیرند. مخصوصاً اگر صفحه شما فریم (قاب) داشته باشد. این تگها باید در قسمت HEAD صفحه شما قرار گیرند.

در سطر زیر یکی از معمول ترین تگهای META را می بینید:

<head>
<title>عنوان صفحه</title>
<meta name=" " content=" ">
</head>
  • شناسه name :
    مشخص کننده نوع متا تگی است که شما قصد استفاده از آن را دارید.
  • شناسه content :
    تعیین کننده محتویات متا تگ برای موتورهای جستجو است.

در این بخش به توضیح دو متا تگ که برای موتورهای جستجو اهمیت بیشتری دارند می پردازیم.


META Keywords

<meta name="keywords" content="متا تگ, موتور جستجو">

 

  • "name="keywords
    این فرمان برنامه اسپایدر موتورهای جستجو را از وجود یک دسته از کلمات کلیدی این صفحه در این تگ آگاه می کند.
  • "متا تگ، موتور جستجو"=content
    این قسمت لیستی از کلمات کلیدی موجود در این صفحه است. در این قسمت برای جدا کردن کلید واژه ها از یکدیگر از علامت کاما استفاده می شود.

توجه داشته باشید که نباید یک کلید واژه را چندین بار تکرار کنید و کلی واژه ها باید با متن شما در صفحه مربوطه ارتباط باشند. موتورهای جستجو معمولاً رتبه بندی صفحاتی را که در آنها با تکرار بیش از حد یک کلید واژه یا ذکر کلید واژه ای که با متن صفحه ارتباطی ندارد سعی می شود رتبه بالایی را به دست بیاورند، متوقف می کنند.

 


META Description

این تگ محتویات صفحه را توصیف می کند.

<meta name="description" content="افزودن متا تگ به صفحه">
  • "name="description
    این بخش توضیحی در باره صفحه برای برنامه اسپایدر موتورهای جستجو است.
  • "افزودن متا تگ به صفحه"=content
    این بخش توصیفی است که شما از صفحه خود می نویسید. در این قسمت هر چیزی را که می خواهید درباره  صفحه خود توضیح دهید، همچنین می توانید از یک دو تا از کلید واژه ها هم استفاده کنید. بسیاری از موتورهای جستجو این قسمت را در لیست نتایج جستجو به عنوان توضیح صفحه نشان می دهند.

دو متا تگ ذکر شده در بالا از بقیه متا تگها پر کاربرد تر هستند. متا تگ های دیگری هم وجود دارند که در زیر به برخی از آنها اشاره می شود:

<meta name="author" content="نام نویسنده صفحه">

این تگ به شما اجازه می دهد که نویسنده صفحه را مشخص کنید. فقط نام نویسنده را در این تگ بنویسید تا هر کسی که کدهای HTML این صفحه را می بیند، بداند چه کسی این صفحه را نوشته است. موتور های جستجو معمولاً از این تگ برای رتبه بندی صفحات استفاده نمی کنند.

<meta name="generator" content="نام برنامه مورد استفاده شما">

این تگ به شما اجازه می دهد که به افرادی که کدهای این صفحه را می بینند بگویید که شما از چه برنامه ای برای نوشتن این کدها استفاده کرده اید. این تگ نیز برای رتبه بندی صفحات در موتورهای جستجو استفاده نمی شود.

نظر یادتون نره؟

دوشنبه 14/8/1386 - 14:3
آموزش و تحقيقات

اصول نوشتن لیستهای کشویی برای استفاده در فرمهای HTML

لیستهای کشویی (Select)

برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ <select> استفاده کنیم. گزینه های موجود در این تگ بین <option> و <option/> قرار می گردند و پس از گزینه ها تگ پایانی لیست به صورت <select/> نوشته می شود.

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

<select name="someName">
<option value="value 1" >گزینه اول</option>
<option value="value 2">گزینه دوم</option>
<option value="value 3">گزینه سوم</option>
</select>

در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید:

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

از شناسه های زیر می توان در تگ <select> استفاده کرد:

  • name :
    از این شناسه برای تخصیص یک نام به لیست استفاده می شود.
  • size :
    این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع رتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این شناسه باید عددی بزرگتر از صفر باشد.
  • "multiple="multiple :
    در صورتی که این شناسه به تگ <select> اضافه ضود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند.
  • "disabled="disabled :
    این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند.

برای مشاهده لیست در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را مشاهده کنید:

حالت مورد نظر شما :  

کادر متنی نمونه :

از رویداد های زیر هم می توانیم در تگ <select> استفاده کنیم:
onfocus, onblur, onchange


وارد کردن گزینه ها به لیست با تگ <option>

برای ساختن گزینه هایی که در لیست نمایش داده می شود باید از تگ <option> استفاده کنیم. با استفاده از مقداری که برای این تگ با استفاده از شناسه value تعریف می کنیم می توانیم در اطلاعات ارسال شده فرم گزینه انتخاب شده توسط بازدید کننده را تشخیص دهیم.

برای تگ <option> هم می توانید از شناسه هایی استفاده کنید که در این جا مشاهده می کنید:

  • value :
    این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود.
  • "selected="selected :
    از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود.

استفاده از رویداد های زیر در تگ <option> مجاز است:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup


دسته بندی گزینه های لیست های کشویی با استفاده از <optgroup>

اگر یک لیست کشویی طولانی دارید توانید برای سهولت کار برای بازدید کننده گزینه های مرتبط با هم را در یک دسته قرار دهید به صورتی که از سایر گزینه ها جدا باشند. برای انجام این کار می توانید از تگ <optgroup> استفاده کنید. با استفاده از این تگ می توانید گزینه های مورد نظر خود برای یک دسته را بین <optgroup> و <optgroup/> قرار دهید.

کد زیر یک نمونه از لیست کشویی را نشان می دهد که گزینه ها در آن دسته بندی شده اند:

<select>
<optgroup label="عنوان گروه اول">
<option value ="some value "> گزینه اول در گروه اول </option>
<option value ="saab"> گزینه دوم در گروه اول </option>
</optgroup>
<optgroup label="عنوان گروه دوم">
<option value ="mercedes"> گزینه اول در گروه دوم </option>
<option value ="audi"> گزینه دوم در گروه دوم </option>
</optgroup>
</select>

در اینجا می توانید لیست ساخته شده با کد بالا را مشاهده کنید:

استفاده از شناسه زیر در تگ <optgroup> الزامی است :

  • label :
    این شناسه برای هر گروه از گزینه ها یک عنوان یا برچسب مشخص می کند که در لیست در بالای هر گروه نمایش داده می شود و آن گروه را از سایر گزینه ها جدا می کند.

از رویدادهای زیر می توانید در تگ <optgroup> استفاده کنید:
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

نظر یادتون نره؟

دوشنبه 14/8/1386 - 14:0
آموزش و تحقيقات

کادر متنی با بیش از یک سطر (Text Area)

کادر های متنی با بیش از یک سطر (Text Area)

از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر در بیش از یک سطر وارد کنند. بهتر است تا برای متنهای طولانی به جای Text Box از Text Area استفاده کنید تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آنرا ویرایش کنند.

برای ایجاد Text Area باید از تگ <textarea> استفاده کنید. این تگ بر خلاف تگ <input> یک تگ پایانی دارد و باید به وسیله تگ <textarea/> بسته شود. در مثال زیر می توانید کد مربوط به یک Text Area را مشاهده کنید:

<textarea name="someName" cols="40" rows="3">
این متن به صورت متن داخلی کادر نمایش داده می شود
</textarea>

می توانید نتیجه کد بالا را در اینجا مشاهده کنید:

همانطور که مشاهده می کنید متنی که بین تگ ابتدایی و تگ پایانی یک Text Area نوشته شود به صورت پیش فرض در کادر Text Area نمایش داده می شود.

در اینجا می توانید برخی از شناسه های قابل استفاده در تگ <textarea> را مشاهده کنید:

  • cols :
    این شناسه عرض کادر را بر حسب تعداد کاراکتر تعیین می کند. مقدار این شناسه باید عددی مثبت باشد. البته این عرض بستگی به اندازه فونت تعریف شده برای صفحه و مرورگر دارد. استفاده از این شناسه برای تگ <textarea> الزامی است.
  • rows :
    این شناسه مشخص کننده تعداد سطرهای قابل مشاهده در کادر است. این مقدار هم باید عددی مثبت باشد. استفاده از شناسه rows برای تگ <textarea> الزامی است.
  • name :
    از این شناسه می توان برای اختصاص دادن یک نام مشخص به textarea استفاده کرد.
  • "readonly="readonly :
    این شناسه کادر را به صورت فقط خواندنی در می آورد و کاربر نمی تواند متن موجود در کادر را تغییر دهد.
  • "disabled="disabled :
    این شناسه کادر را به صورت غیر فعال در می آورد و بازدید کننده نمی تواند متن موجود در آن را تغییر دهد یا آنرا انتخاب کند. (این رفتار بسته به مرورگر متفاوت است)

برای مشاهده کادر در حالات فقط خواندنی (readonly) و غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در Text Area زیر مشاهده کنید:

حالت مورد نظر شما :  

کادر متنی نمونه :
   

 

در تگ <textarea> علاوه بر شناسه های بالا که مربوط به همین تگ هستند می توان از شناسه های استاندارد زیر هم استفاده کرد:
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

همچنین از رویدادهای زیر هم می توان در تگ <textarea> استفاده کرد :
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

نظر یادتون نره؟

دوشنبه 14/8/1386 - 13:59
آموزش و تحقيقات

کادر کلمه عبور و فیلدهای مخفی در طراحی فرمهای HTML

کادر کلمه عبور (Password)

احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.

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

<input type="password" name="someName" size="30">

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

همانطور که در کد بالا مشاهده می کنید ما از شناسه "size="30 برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند. برای مشاهده این شناسه ها می توانید لینک زیر را کلیک کنید:
آموزش نحوه ساخت کادرهای متنی یک سطری. (لینک در صفحه جدید باز می شود)


فیلدهای مخفی (Hidden Fields)

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

<input type="hidden" name="FieldName" value="اطلاعات مورد نظر شما" >

در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود.

نظر یادتون نره؟

دوشنبه 14/8/1386 - 13:58
آموزش و تحقيقات

ساختن دکمه ها با استفاده از تگ input در html

دکمه ارسال فرم (Submit)

برای ساختن دکمه ارسال فرم باید از تگ <input> استفاده کنیم. برای این کار باید از submit به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه ارسال فرم آورده شده است:

<input name="buttonName" type="submit">

در اینجا می توانید دکمه ارسال فرم ایجاد شده را مشاهده کنید البته چون این دکمه در تگ <form> قرار ندارد با کلیک کردن بر روی آن اتفاقی رخ نمی دهد اما اگر این دکمه در تگ فرم قرار داشته باشد با کلیک کردن بر روی آن اطلاعات وارد شده در فرم به صفحه action ارسال می شوند.


دکمه پاک کردن فرم (Reset)

برای ساختن این دکمه هم از تگ <input> استفاده می شود به این صورت که برای شناسه type از مقدار reset استفاده می کنیم. در اینجا می توانید یک نمونه از کدی را که برای ساختن این دکمه استفاده می شود ملاحظه کنید:

<input name="buttonName" type="reset">

در اینجا می توانید دکمه ای را که با استفاده از تگ بالا ساخته شده است ملاحظه کنید. این دکمه هم مثل دکمه ارسال فرم باید در تگ فرم قرار داشته باشد تا با کلیک بر روی آن اطلاعاتی که کاربر وارد کرده است حذف شوند و فرم به حالت اولیه بازگردد.


ساختن دکمه (Button)

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

در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند. برای مثال دکمه هایی که در پایین همین صفحه قرار دارند و برای رفتن به بخش قبلی یا بعدی استفاده می شوند از همین نوع دکمه ها هستند.

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

<input name="buttonName" type="button">

در اینجا به معرفی برخی از شناسه هایی که برای دکمه ها در تگ <input> استفاده می شوند می پردازیم :

  • type :
    برای دکمه ارسال فرم باید از submit برای مقدار این شناسه استفاده شود.
    برای دکمه پاک کردن فرم باید از reset برای مقدار این شناسه استفاده شود.
    برای سایر دکمه ها باید از button برای مقدار این شناسه استفاده شود.
  • name :
    این شناسه برای اختصاص یک نام به هر دکمه استفاده می شود.
  • value :
    در مورد دکمه ها این شناسه مشخص کننده متنی است که در روی دکمه نمایش داده می شود.
  • "disabled="disabled :
    از این شناسه برای غیر فعال دکمه ها استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را کلیک کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده دکمه زیر در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه زیر مشاهده کنید:

حالت مورد نظر شما :  

دکمه نمونه :

نظر یادتون نره؟

دوشنبه 14/8/1386 - 13:58
آموزش و تحقيقات

آموزش نحوه ساختن دکمه های رادیو در فرمهای html

دکمه های رادیو (Radio Button)

برای ساختن دکمه های رادیو هم باید از تگ <input> استفاده کنیم. برای این کار باید از radio به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه رادیو آورده شده است:

<input name="someNeme" type="radio" value="مقدار مورد نظر">

در اینجا می توانید دکمه رادیو ایجاد شده را مشاهده کنید:

حتماً تا به حال دکمه های رادیویی را که در یک زمان فقط یکی از آنها می تواند انتخاب شده باشد مشاهده کرده اید. برای ساختن این نوع دکمه ها از کد بالا استفاده می شود همه دکمه هایی که باید به این گونه رفتار کنند دارای یک نام هستند اما مقادیر قرار گرفته شده در شناسه value در آنها متفاوت است. در زیر می توانید کد مربوط به یک دسته دکمه رادیو را ببینید:

<input name="Neme" type="radio" value="مقدار دکمه اول">Radio Button 1 <br>
<input name="Neme" type="radio" value="مقدار دکمه دوم">Radio Button 2 <br>
<input name="Neme" type="radio" value="مقدار دکمه سوم">Radio Button 3 <br>

در اینجا هم می توانید این دکمه ها را مشاهده کرده و آنها را آزمایش کنید:

Radio Button 1
Radio Button 2
Radio Button 3

در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

  • type :
    برای اینکه یک دکمه رادیو ایجاد کنیم باید مقدار این شناسه را radio قرار دهیم.
  • name :
    این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
  • value :
    این شناسه در مورد در مورد دکمه رادیو مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است.
  • "checked="checked :
    این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
    توجه داشته باشید که در یک دسته دکمه رادیو که در بالا یک نمونه از آن آورده شده است نباید بیش از یک دکمه دارای این شناسه باشد.
  • "disabled="disabled :
    از این شناسه برای غیر فعال دکمه رادیو استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده دکمه رادیو در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه رادیوی زیر مشاهده کنید:

حالت مورد نظر شما :  

دکمه رادیو نمونه :

نظر یادتون نره؟

دوشنبه 14/8/1386 - 13:47
آموزش و تحقيقات

آموزش نحوه ساختن چک باکس برای استفاده در فرمهای html

چک باکس (checkbox)

برای ساختن چک باکس هم باید از تگ <input> استفاده کنیم. برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن چک باکس آورده شده است:

<input name="someNeme" type="checkbox" value="مقدار مورد نظر">

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

در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

  • type :
    برای اینکه چک باکس متنی ایجاد کنیم باید مقدار این شناسه را checkbox قرار دهیم.
  • name :
    این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
  • value :
    این شناسه در مورد در مورد چک باکس مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است.
  • "checked="checked :
    این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
  • "disabled="disabled :
    از این شناسه برای غیر فعال چک باکس استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند یا آنرا به صورت انتخاب نشده در آورد. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

برای مشاهده چک باکس در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در چک باکس زیر مشاهده کنید:

حالت مورد نظر شما :  

چک باکس نمونه :

نظر یادتون نره؟

دوشنبه 14/8/1386 - 13:46
مورد توجه ترین های هفته اخیر
فعالترین ها در ماه گذشته
(0)فعالان 24 ساعت گذشته