آموزش html

[B@RBOD]

استفاده از متن جایگزین (کامنت) برای تصاویر


از شناسه alt برای وارد کردن متن جایگزین برای عکس در تگ <img> استفاده می شود. موقعی که مرورگر به هر دلیلی نتواند عکس موجود در صفحه شما را نمایش دهد به جای آن این کامنت را نشان می دهد. و می تواند به بیننده بفهماند که چه چیزی را از دست داده است.
از این شناسه مانند مثال زیر استفاده می شود :
alt="متن کامنت"
این فرمان را در تگ تصویر (IMG) قرار دهید، فاصله بین دو فرمان را فراموش نکنید. مانند زیر:
<img src="learn_html.gif" alt="html لوگوی آموزش">
ما این کامنت را به عنوان جانشین عکس در تگ IMG وارد می کنیم. تا هر وقت عکس به نمایش در نیامد این کامنت به نمایش درآید.
در سطر زیر نشان می توانید یک کامنت جایگزین را ببینید چون عکس اصلی به نمایش در نمی آید (در اینجا عکس به نمایش در نمی آید چون در مسیر مربوطه چنین عکسی وجود ندارد):

<img alt="HTML لوگوی آموزش">

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

[B@RBOD]

ساختن لینک به نقاط مختلف یک صفحه


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

Back to the Top

ممکن است شما بخواهید صفحه را به چندین قسمت تقسیم کنید و در بالای صفحه فهرستی برای آن قرار دهید که بیننده با کلیک کردن بر روی عنوان هر قسمت به آن قسمت در صفحه برود.
در این موارد شما می توانید از پیوندهای نامگذاری شده که در قسمتهای مشخصی از صفحه شما قرار دارند که شما می خواهید به آن نقاط لینک بسازید استفاده کنید. شما می توانید به هر نقطه از صفحه لینک بسازید اما فعلاً در مورد لینک به بالای صفحه توضیح می دهیم.
برای این کار به بالای قسمت BODY در متن HTML خود بروید ( درست بعد از تگ BODY )
اکنون این تگ را تایپ کنید:
<a name="top"></a>
شما می توانید هر نامی را بین دو دابل کوت بنویسید. نوشتن top کار ما را برای درک بهتر آسان می کند.
حالا به جایی در قسمت BODY بروید که می خواهید از آنجا لینکی به بالای صفحه ایجاد کنید.
این فرمان را تایپ کنید:
<a href="#top">بازگشت به بالا</a>
اکنون وقتی لینک بازگشت به بالا را کلیک کنید به بالای صفحه می روید.

علامت # به مرورگر می فهماند که مقصد پیوندی نامگذاری شده در همین صفحه است. اگر شما یک پیوند با نام "UP" ساخته بودید اکنون باید از "up#" به جای "top#" استفاده می کردید.
شما می توانید در هر کجای صفحه یک پیوند نامگذاری شده بسازید و به وسیله یک لینک از قسمتهای دیگر به آن قسمت بازگردید.

لینک زیر را برای نمونه به بالای صفحه ساخته ام. می توانید آنرا امتحان کنید:

بازگشت به بالای صفحه

با استفاده از این روش نه تنها می توانید لینکی بسازید که بازدید کننده با کلیک بر روی آن به قسمت دیگری از همان صفحه برود، بلکه می توانید از این روش در لینکهایی که در دیگر صفحات قرار دارند استفاده کنید و بازدید کننده را به قسمت مشخصی از یک صفحه دیگر بفرستید. تنها نکته ر اینجا این است که در صفحه مقصد باید لینکهای نامگذاری شده وجود داشته باشند و از این نامگذاری در لینکی که رد صفحه مبدأ قرار دارد استفاده شود.
برای مثال اگر شما لینک زیر را در صفحه خود قرار دهید با کلیک بر روی آن می توانید بخش پایینی این صفحه را مشاهده کنید و باز دید خود را از پایین این صفحه شروع کنید. ( ما یک لینک نام گذاری شده با نام bottom# در پایین این صفحه قرار داده ایم ) :
<a href="http://www.neopersia.org/HTML/link_to_same_page.php#bottom">ساختن لینک بازگشت به بالای صفحه</a>

[B@RBOD]

ساختن لینک برای آدرس ایمیل، بخش اول


برای ایجاد یک لینک که بیننده با آن بتواند به شما ایمیل بفرستد باید ز تگ استاندارد لینک استفاده کنیم. اما تفاوت این لینک با لینک به یک صفحه در آدرسی است که به عنوان مقصد لینک نوشته می شود. برای اینکه مرورگر را مجبور کنیم لینک را به عنوان یک لینک ایمیل بشناسد، باید از این عبارت :mailto به جای //:http در آغاز آدرس استفاده کنیم و بعد از آن آدرس ایمیل را بنویسیم. به یک مثال توجه کنید:
<a href="mailto:example@example.com">متن لینک</a>
لینکی که در صفحه مشاهده خواهید کرد به صورت زیر است که برای فرستادن ایمیل به آدرس example@example.com ساخته شده است. آنرا امتحان کنید:
متن لینک تنها کاری که شما باید انجام دهید جایگزین کردن example@example.com با آدرس ایمیل خودتان است.
اگر روی این نوع لینک کلیک کنید مرورگر شما پنجره ای تازه برای ارسال ایمیل باز می کند که آدرس در یافت کننده در آن تایپ شده است.
شما میتوانید همچنین یک موضوع هم برای ایمیل در لینک قرار دهید تا بیننده مجبور نباشد چیزی غیر از متن اصلی بنویسد.
این کار ار می توانید با افزودن علامت سوال به انتهای آدرس ایمیل و نوشتن =subject بعد از آن انجام دهید. مانند زیر:
<a href="mailto:example@example.com?subject=this is the subject">متن لینک</a>
با کلیک کردن بر روی این لینک صفحه ای برای فرستادن ایمیل باز می شود که قسمت آدرس(to) و قسمت موضوع (subject) در آن کامل شده است و آماده ارسال است

[B@RBOD]

ساختن لینک پست الکترونیک، قسمت دوم


در بخش اخیر ما در مورد اینکه چگونه یک Subject را برای پیام خود از طریق یک لینک E-mail مشخص کنیم بحث کردیم. ما این کار را با استفاده از این عبارت
=subject? و نوشتن موضوعی که می خواهیم در بخش subject در ایمیل نوشته شود بعد از عبارت مذکور انجام می دهیم. برای مثال لینک زیر برای ارسال پیام با موضوع Learn HTML به کار می رود:
<a href="mailto:example@example.com?subject=learn html">متن لینک</a>
این لینک در صفحه مانند زیر به نظر می رسد می توانید آنرا کلیک کرده و امتحان کنید:
متن لینک به جز اضافه کردن موضوع شما می توانید چیزهای دیگری را هم اضافه کنید.
برای مثال شما میتوانید یک رونوشت (Carbon Copy) از پیام را به همراه آن برای کس دیگری بفرستید. یا یک نسخه مخفی را برای دیگری بفرستید. یا هر دوی اینها را به کار ببرید و باهم ترکیب کنید و...
برای فرستادن یک رونوشت از ایمیل باید بعد از علامت سوال از فرمان =cc استفاده کرده و بعد آدرس ایمیل کسانی که قرار است رونوشت را دریافت کنند بنویسید. در سطر زیر یک نمونه از این نوع لینک آورده شده است:
<a href="mailto:mainmail@example.com?cc=corboncopy@ex ample.com">متن لینک</a>
می توانید آنرا امتحان کنید:
متن لینک برای فرستادن یک نسخه مخفی از ایمیل نیز مانند بالا عمل می کنیم فقط به جای cc در فرمان بالا از bcc استفاده می کنیم. مانند زیر:
<a href="mailto:mainmail@example.com?bcc=corboncopy@e xample.com">متن لینک</a>
لینک به دست آمده مانند زیر است. شما می توانید آنرا امتحان کنید:
متن لینک اگر خواستید یک ایمیل را به چند نفر بفرستید باید بین آدرسهای مختلف از کاما استفاده کنید. مانند زیر:
<a href="mailto:main@example.com?bcc=other1@example.c om, other2@example.com">متن لینک</a>
لینک زیر با دستور بالا ساخته شده است> آنرا امتحان کنید:
متن لینک اگر می خواهید بیش از یکی از این فرمانها را در یک لینک استفاده کنید باید برای فرمان اول از علامت سوال استفاده کنید و برای فرمانهای بعد از علامت & استفاده می شود (در انتهای فرمان اول). برای مثال اگر می خواهید با یک لینک هم موضوع پیام را مشخص کنید هم یک رونوشت از آن برای فرد دیگری فرستاده شود باید به اینگونه عمل کنید:
<a href="mailto:main@example.com?subject=learn html&cc=other@example.com">متن لینک</a>

[B@RBOD]

معرفی فرم در HTML و شناسه های مهم آن


اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر وارد شده اند به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی مانند کادر ورودی متن (Text Field)، جعبه مربوط به ورود متن (Text Area)، دکمه های رادیویی (Radio Button)، منوهای کشویی، چک باکس و ... باشد.
در بخشهای بعدی به توضیح اجزایی که می توانند در یک فرم به کار روند خواهیم پرداخت. در این قسمت به تگ
<form> و شناسه هایی که در آن به کار می روند می پردازیم. شکل کلی این تگ معمولاً به صورت زیر است :
<form action="formProcessor.php" method="get" name="formName" target="_blank">
.................اجزای مورد استفاده برای فرم .................
</form>
از میان شناسه های مورد استفاده در فرم استفاده از شناسه action ضروری است. این شناسه مشخص کننده صفحه ای است که اطلاعات فرم باید به آن ارسال شود. آدرس صفحه مورد نظر باید به عنوان مقدار این شناسه قرار گیرد. لازم به یادآوری است که پس از اینکه کاربر اطلاعات مورد نظر را وارد کرد و دکمه ارسال را کلیک کرد صفحه action برای پردازش اطلاعات باز خواهد شد.
البته استفاده از شناسه method هم اهمیت زیادی دارد ولی در صورتی که از این شناسه استفاده نشود از مقدار پیش فرض آن یعنی get استفاده می شود.
در اینجا لیستی از شناسه های پر استفاده در تگ فرم آورده شده است :

• action :
  همانطور که گفته شد از این شناسه برای مشخص کردن صفحه پردازش کننده اطلاعات ورودی کاربر استفاده می شود.
• method :
  این شناسه طریقه ارسال اطلاعات را به فایل action مشخص می کند و شامل دو مقدار زیر است:
  
  
  • get : در این روش اطلاعات از طریق آدرس صفحه (نوار آدرس) ارسال می شوند. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سؤال بعد از آدرس صفحه action قرار می گیرند و ارسال می شوند. از این روش نمی توان برای اطلاعات طولانی یا کاراکترهای غیر ASCII استفاده کرد. همچنین بهتر است برای اطلاعات مهم از قبیل نام کاربری و کلمه عبور هم از این روش استفاده نشود. چون در این صورت این اطلاعات در نوار آدرس مرورگر نمایش داده می شوند.
  • post : این روش برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. مزیت این روش نسبت به روش قیل امنیت بیشتر به دلیل عدم نمایش اطلاعات ارسالی به کاربر و همچنین امکان ارسال اطلاعات طولانی تر است.
  
  
• name :
  از این شناسه برای تعریف کردن یک نام منحصر به فرد برای فرم استفاده می شود.
• target :
  این شناسه روش باز شدن صفحه پردازشگر اطلاعات را مشخص میکند. می توان برای مقدار این شناسه از نام یک فریم برای باز شدن صفحه action در آن فریم استفاده کرد یا از مقادیر از پیش تعریف شده زیر:
  
  
  • blank_ : صفحه action در یک پنجره جدید باز خواهد شد.
  • self_ : صفحه action در فریمی که فرم در آن قرار دارد باز خواهد شد.
  • parent_ : صفحه action در frameset محتوی فرم باز خواهد شد.
  • top_ : صفحه action در تما پنجره باز خواهد شد.
  
  

علاوه بر شناسه های بالا که فقط مربوط به فرم هستند از شناسه های استاندارد زیر نیز می توان در تگ فرم استفاده کرد:
id, class, title, style, dir, lang, xml:lang
رویدادهای زیر هم در تگ فرم قابل استفاده هستند.
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

[B@RBOD]

ساختن کادرهای ورودی متن برای استفاده در فرمهای HTML


ما با استفاده از تگ <input> می توانیم بسیاری از اطلاعاتی را که در فرمها نیاز داریم از طریق کاربران به دست آوریم. در حقیقت این تگ برای وارد کردن اطلاعات توسط کاربر استفاده می شود. این تگ در HTML4.01 نیازی به تگ پایانی ندارد.
از تگ <input> می توانیم برای ساختن کادرهای مربوط به وارد کردن متن، کادر کلمه عبور، فیلدهای مخفی، دکمه های رادیو، چک باکس، دکمه ارسال فرم، دکمه پاک کردن فرم و انواع دیگر دکمه ها و چند نوع ورودی دیگر استفاده کنیم. در اینجا هر کدام از این ورودی ها را به صورت جداگانه مورد بررسی قرار می دهیم.
جعبه ورودی متن (Text Box)

از این نوع ورودی برای ایجاد یک کادر یک سطری برای ورود متن استفاده می شود. برای ساختن این کادر باید از شناسه "type="text در تگ <input> استفاده کنیم. در صورت تعریف نشدن شناسه type در مرورگرهای جدید این شناسه به صورت پیش فرض به کار می رود و یک Text Box را نمایش می دهد اما برخی از مرورگرهای قدیمی در صورتی که از ایسن شناسه استفاده نشود این کادر را نمایش نمی دهند.
یک نمونه از کد مربوط به ایجاد این کادر را می توانید در اینجا مشاهده کنید:
<input type="text" name="testField" maxlength="50" size="30" value="کادر ورود متن">
کادر متنی بالا به صورت زیر نمایش داده می شود:
در اینجا به توضیح برخی از شناسه هایی که با این نوع ورودی به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

• type :
  برای اینکه یک کادر متنی ایجاد کنیم باید مقدار این شناسه را text قرار دهیم.
• name :
  این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
• maxlength :
  این شناسه برای مشخص کردن حداکثر تعداد کاراکترهای ورودی استفاده می شود. این شناسه در مورد ورودی متنی یک سطری استفاده می شود و مقدار آن باید عددی مثبت باشد.
• size :
  این شناسه در مورد این نوع ورودی طول کادر را بر حسب تعداد کاراکتر مشخص می کند. البته مرورگرهای مختلف ممکن است بر حسب نوع فونت مورد استفاده اندازه این کادر را مانند هم نشان ندهند. مقدار این شناسه باید عددی مثبت باشد. مقدار پیش فرض این شناسه 20 است.
• value :
  این شناسه در مورد کادرهای متنی، متنی را که به صورت پیش فرض در کادر متنی نمایش داده می شود معین می کند.
• "readonly="readonly :
  این شناسه فقط برای کادرهای متنی مورد استفاده قرار می گیرد و باعث می شود تا کاربر نتواند تغییری در متن نوشته شده در این کادر ایجاد کند اما کاربر می تواند متن را مشاهده کند و آنرا انتخاب کند.
  مقادیر مربوط به فیلدهایی که به صورت readonly هستند اگرچه توسط کاربر تغییر نمی کنند ولی با ارسال فرم به سرور ارسال می شوند.
• "disabled="disabled :
  از این شناسه برای غیر فعال کردن کادر متنی استفاده می شود. به صورتی که کاربر نمی تواند متنی در این کادر بنویسد و یا متن آنرا انتخاب کند. البته این رفتار ممکن است در مرورگرهای مختلف تفاوت داشته باشد.
  مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند.

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

علاوه بر شناسه های بالا که فقط مربوط به فرم هستند از شناسه های استاندارد زیر نیز می توان در تگ فرم استفاده کرد:
id, class, title, style, dir, lang, xml:lang
رویدادهای زیر هم در تگ فرم قابل استفاده هستند.
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

[B@RBOD]

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


چک باکس (checkbox)

برای ساختن چک باکس هم باید از تگ <input> استفاده کنیم. برای این کار باید از checkboxtype استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن چک باکس آورده شده است: به عنوان مقدار شناسه
<input name="someNeme" type="checkbox" value="مقدار مورد نظر">
در اینجا می توانید چک باکس ایجاد شده را مشاهده کنید:
در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

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

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

[B@RBOD]

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


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

برای ساختن دکمه های رادیو هم باید از تگ <input> استفاده کنیم. برای این کار باید از radiotype استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه رادیو آورده شده است: به عنوان مقدار شناسه
<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) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه رادیوی زیر مشاهده کنید:
حالت مورد نظر شما : فعال غیر فعال

[B@RBOD]

ساختن دکمه ها با استفاده از تگ 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) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه زیر مشاهده کنید:
حالت مورد نظر شما : فعال غیر فعال

[B@RBOD]

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


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

احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.
برای ساختن کادر کلمه عبور می توانید از کد زیر استفاده کنید:
<input type="password" name="someName" size="30">
کادر به دست آمده مانند زیر است. می توانید متنی را در آن بنویسید و نتیجه را مشاهده کنید:
همانطور که در کد بالا مشاهده می کنید ما از شناسه "size="30 برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند. برای مشاهده این شناسه ها می توانید لینک زیر را کلیک کنید:
آموزش نحوه ساخت کادرهای متنی یک سطری. (لینک در صفحه جدید باز می شود)
فیلدهای مخفی (Hidden Fields)

ممکن است برای شما پیش آمده باشد که بخواهید قسمتی از اطلاعات به همراه فرم ارسال شوند ولی کاربر آنها را مشاهده نکند و نیازی نباشد آنها را وارد کند. برای این کار می توانید از فیلدهای مخفی استفاده کنید. کد زیر مربوط به یک فیلد مخفی است:
<input type="hidden" name="FieldName" value="اطلاعات مورد نظر شما" >
در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود.