برای ساختن چک باکس هم باید از تگ <input> استفاده کنیم. برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن چک باکس آورده شده است:
<input name=”someNeme” type=”checkbox” value=”مقدار مورد نظر”>
در اینجا می توانید چک باکس ایجاد شده را مشاهده کنید:
در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند
می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ
<input> به کار روند.
چک باکس (checkbox)
برای ساختن چک باکس هم باید از تگ <input> استفاده کنیم. برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن چک باکس آورده شده است:
<input name=”someNeme” type=”checkbox” value=”مقدار مورد نظر”>
در اینجا می توانید چک باکس ایجاد شده را مشاهده کنید:
در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند
می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ
<input> به کار روند.
type :
برای اینکه چک باکس متنی ایجاد کنیم باید مقدار این شناسه را checkbox قرار دهیم.
name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
value :
این شناسه در مورد در مورد چک باکس مقداری است که در صورت انتخاب شدن این
دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد
چک باکس و دکمه های رادیو ضروری است.
“checked=”checked :
این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و
باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده
نمایش داده شوند.
“disabled=”disabled :
از این شناسه برای غیر فعال چک باکس استفاده می شود. به صورتی که کاربر نمی
تواند دکمه مربوطه را انتخاب کند یا آنرا به صورت انتخاب نشده در آورد.
مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور
ارسال نمی شوند.
برای مشاهده چک باکس در حالت غیر فعال (disabled) حالت مورد نظر خود را
در مثال زیر انتخاب کنید و نتیجه را در چک باکس زیر مشاهده کنید:
ما با استفاده از تگ <input> می توانیم بسیاری
از اطلاعاتی را که در فرمها نیاز داریم از طریق کاربران به دست آوریم. در
حقیقت این تگ برای وارد کردن اطلاعات توسط کاربر استفاده می شود. این تگ در
HTML4.01 نیازی به تگ پایانی ندارد.
از تگ <input> می توانیم برای ساختن کادرهای مربوط به وارد کردن
متن، کادر کلمه عبور، فیلدهای مخفی، دکمه های رادیو، چک باکس، دکمه ارسال
فرم، دکمه پاک کردن فرم و انواع دیگر دکمه ها و چند نوع ورودی دیگر استفاده
کنیم. در اینجا هر کدام از این ورودی ها را به صورت جداگانه مورد بررسی
قرار می دهیم.
جعبه ورودی متن (Text Box)
از این نوع ورودی برای ایجاد یک کادر یک سطری برای ورود متن استفاده می
شود. برای ساختن این کادر باید از شناسه “type=”text در تگ <input>
استفاده کنیم. در صورت تعریف نشدن شناسه type در مرورگرهای جدید این شناسه
به صورت پیش فرض به کار می رود و یک Text Box را نمایش می دهد اما برخی از
مرورگرهای قدیمی در صورتی که از ایسن شناسه استفاده نشود این کادر را نمایش
نمی دهند.
ما با استفاده از تگ <input> می توانیم بسیاری
از اطلاعاتی را که در فرمها نیاز داریم از طریق کاربران به دست آوریم. در
حقیقت این تگ برای وارد کردن اطلاعات توسط کاربر استفاده می شود. این تگ در
HTML4.01 نیازی به تگ پایانی ندارد.
از تگ <input> می توانیم برای ساختن کادرهای مربوط به وارد کردن
متن، کادر کلمه عبور، فیلدهای مخفی، دکمه های رادیو، چک باکس، دکمه ارسال
فرم، دکمه پاک کردن فرم و انواع دیگر دکمه ها و چند نوع ورودی دیگر استفاده
کنیم. در اینجا هر کدام از این ورودی ها را به صورت جداگانه مورد بررسی
قرار می دهیم.
جعبه ورودی متن (Text Box)
از این نوع ورودی برای ایجاد یک کادر یک سطری برای ورود متن استفاده می
شود. برای ساختن این کادر باید از شناسه “type=”text در تگ <input>
استفاده کنیم. در صورت تعریف نشدن شناسه type در مرورگرهای جدید این شناسه
به صورت پیش فرض به کار می رود و یک Text Box را نمایش می دهد اما برخی از
مرورگرهای قدیمی در صورتی که از ایسن شناسه استفاده نشود این کادر را نمایش
نمی دهند.
یک نمونه از کد مربوط به ایجاد این کادر را می توانید در اینجا مشاهده کنید:
در اینجا به توضیح برخی از شناسه هایی که با این نوع ورودی به کار می
روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ
<input> به کار روند.
type :
برای اینکه یک کادر متنی ایجاد کنیم باید مقدار این شناسه را text قرار دهیم.
name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
maxlength :
این شناسه برای مشخص کردن حداکثر تعداد کاراکترهای ورودی استفاده می شود.
این شناسه در مورد ورودی متنی یک سطری استفاده می شود و مقدار آن باید عددی
مثبت باشد.
size :
این شناسه در مورد این نوع ورودی طول کادر را بر حسب تعداد کاراکتر مشخص می
کند. البته مرورگرهای مختلف ممکن است بر حسب نوع فونت مورد استفاده اندازه
این کادر را مانند هم نشان ندهند. مقدار این شناسه باید عددی مثبت باشد.
مقدار پیش فرض این شناسه ۲۰ است.
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
اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از
فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر
وارد شده اند به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی
مانند کادر ورودی متن (Text Field)، جعبه مربوط به ورود متن (Text Area)،
دکمه های رادیویی (Radio Button)، منوهای کشویی، چک باکس و … باشد.
در بخشهای بعدی به توضیح اجزایی که می توانند در یک فرم به کار روند خواهیم پرداخت. در این قسمت به تگ <form> و شناسه هایی که در آن به کار می روند می پردازیم. شکل کلی این تگ معمولاً به صورت زیر است :
<form action=”formProcessor.php” method=”get” name=”formName” target=”_blank”>
……………..اجزای مورد استفاده برای فرم
……………..
</form>
از میان شناسه های مورد استفاده در فرم استفاده از شناسه action
ضروری است. این شناسه مشخص کننده صفحه ای است که اطلاعات فرم باید به آن
ارسال شود. آدرس صفحه مورد نظر باید به عنوان مقدار این شناسه قرار گیرد.
لازم به یادآوری است که پس از اینکه کاربر اطلاعات مورد نظر را وارد کرد و
دکمه ارسال را کلیک کرد صفحه action برای پردازش اطلاعات باز خواهد شد.
البته استفاده از شناسه method هم اهمیت زیادی دارد ولی در صورتی که از این شناسه استفاده نشود از مقدار پیش فرض آن یعنی get استفاده می شود.
اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از
فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر
وارد شده اند به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی
مانند کادر ورودی متن (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
برای ساختن دکمه ارسال فرم باید از تگ <input> استفاده کنیم. برای این کار باید از submit به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه ارسال فرم آورده شده است:
<input name=”buttonName” type=”submit”>
در اینجا می توانید دکمه ارسال فرم ایجاد شده را مشاهده کنید البته چون
این دکمه در تگ <form> قرار ندارد با کلیک کردن بر روی آن اتفاقی رخ
نمی دهد اما اگر این دکمه در تگ فرم قرار داشته باشد با کلیک کردن بر روی
آن اطلاعات وارد شده در فرم به صفحه action ارسال می شوند.
دکمه ارسال فرم (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) حالت مورد نظر خود را
در مثال زیر انتخاب کنید و نتیجه را در دکمه زیر مشاهده کنید:
برای ساختن دکمه های رادیو هم باید از تگ <input> استفاده کنیم. برای این کار باید از radio به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه رادیو آورده شده است:
<input name=”someNeme” type=”radio” value=”مقدار مورد نظر”>
در اینجا می توانید دکمه رادیو ایجاد شده را مشاهده کنید:
حتماً تا به حال دکمه های رادیویی را که در یک زمان فقط یکی از آنها می
تواند انتخاب شده باشد مشاهده کرده اید. برای ساختن این نوع دکمه ها از کد
بالا استفاده می شود همه دکمه هایی که باید به این گونه رفتار کنند دارای
یک نام هستند اما مقادیر قرار گرفته شده در شناسه value در آنها متفاوت
است. در زیر می توانید کد مربوط به یک دسته دکمه رادیو را در ادامه ببینید:
دکمه های رادیو (Radio Button)
برای ساختن دکمه های رادیو هم باید از تگ <input> استفاده کنیم. برای این کار باید از radio به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه رادیو آورده شده است:
<input name=”someNeme” type=”radio” value=”مقدار مورد نظر”>
در اینجا می توانید دکمه رادیو ایجاد شده را مشاهده کنید:
حتماً تا به حال دکمه های رادیویی را که در یک زمان فقط یکی از آنها می
تواند انتخاب شده باشد مشاهده کرده اید. برای ساختن این نوع دکمه ها از کد
بالا استفاده می شود همه دکمه هایی که باید به این گونه رفتار کنند دارای
یک نام هستند اما مقادیر قرار گرفته شده در شناسه value در آنها متفاوت
است. در زیر می توانید کد مربوط به یک دسته دکمه رادیو را ببینید:
در اینجا هم می توانید این دکمه ها را مشاهده کرده و آنها را آزمایش کنید:
Radio Button 1
Radio Button 2
Radio Button 3
در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می
روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ
<input> به کار روند.
type :
برای اینکه یک دکمه رادیو ایجاد کنیم باید مقدار این شناسه را radio قرار دهیم.
name :
این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود.
value :
این شناسه در مورد در مورد دکمه رادیو مقداری است که در صورت انتخاب شدن
این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در
مورد چک باکس و دکمه های رادیو ضروری است.
“checked=”checked :
این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و
باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده
نمایش داده شوند.
توجه داشته باشید که در یک دسته دکمه رادیو که در بالا یک نمونه از آن آورده شده است نباید بیش از یک دکمه دارای این شناسه باشد.
“disabled=”disabled :
از این شناسه برای غیر فعال دکمه رادیو استفاده می شود. به صورتی که کاربر
نمی تواند دکمه مربوطه را انتخاب کند. مقادیر مربوط به فیلدهایی که به صورت
disabled هستند با ارسال فرم به سرور ارسال نمی شوند.
برای مشاهده دکمه رادیو در حالت غیر فعال (disabled) حالت مورد نظر خود
را در مثال زیر انتخاب کنید و نتیجه را در دکمه رادیوی زیر مشاهده کنید:
از یک 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 :
این شناسه کادر را به صورت غیر فعال در می آورد و بازدید کننده نمی تواند
متن موجود در آن را تغییر دهد یا آنرا انتخاب کند. (این رفتار بسته به
مرورگر متفاوت است)
کادر های متنی با بیش از یک سطر (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
احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز
به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را
وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن
باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام
پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که
کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با
این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک
نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.
برای ساختن کادر کلمه عبور می توانید از کد زیر استفاده کنید:
<input type=”password” name=”someName” size=”30″>
کادر به دست آمده مانند زیر است. می توانید متنی را در آن بنویسید و نتیجه را مشاهده کنید:
همانطور که در کد بالا مشاهده می کنید ما از شناسه “size=”30
برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای
متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند.
کادر کلمه عبور (Password)
احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز
به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را
وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن
باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام
پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که
کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با
این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک
نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.
برای ساختن کادر کلمه عبور می توانید از کد زیر استفاده کنید:
<input type=”password” name=”someName” size=”30″>
کادر به دست آمده مانند زیر است. می توانید متنی را در آن بنویسید و نتیجه را مشاهده کنید:
همانطور که در کد بالا مشاهده می کنید ما از شناسه “size=”30
برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای
متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند.
فیلدهای مخفی (Hidden Fields)
ممکن است برای شما پیش آمده باشد که بخواهید قسمتی از اطلاعات به همراه
فرم ارسال شوند ولی کاربر آنها را مشاهده نکند و نیازی نباشد آنها را وارد
کند. برای این کار می توانید از فیلدهای مخفی استفاده کنید. کد زیر مربوط
به یک فیلد مخفی است:
<input type=”hidden” name=”FieldName” value=”اطلاعات مورد نظر شما” >
در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود.
اگر تمایل دارید شکل فونت متن خود را در یک صفحه تغییر دهید، می توانید این کار
را با استفاده از تگ 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
اگر تمایل دارید شکل فونت متن خود را در یک صفحه تغییر دهید، می توانید این کار
را با استفاده از تگ 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
البته نکاتی هست که باید به آنها توجه کنید:
افرادی که صفحه شما را تماشا می کنند برای اینکه بتوانند صفحه را با فونتی که
شما برای آن تنظیم کرده اید ببینند باید حداقل مرورگر اینترنت اکسپلورر یا نت اسکیپ
۳ به بالا داشته باشند.(زیاد نگران این قسمت نباشید، اکنون تقریباً تمامی کاربران
مرورگرهای جدیدتری دارند)
افراد بیننده صفحه شما باید فونت مورد استفاده شما را قبلاً نصب کرده باشند
تا بتوانند صفحه شما را به خوبی مشاهده کنند.
وقتی شما در صفحه خود می خواهید از یک فونت خاص استفاده کنید مراقب باشید و فونتی
را استفاده کنید که بیشتر افراد به صورت پیش فرض داشته باشند. برای مثال وقتی ویندوز
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 استفاده کنید.
فرض کنید می خواهیم از یک خط افقی در صفحه خود استفاده کنیم، اما می خواهیم طول
آن برابر یک تصویر یا قسمتی از یک متن باشد. یا شاید به یک خط افقی کوتاه که در سمت
چپ یا راست صفحه قرار بگیرد، نیاز داشته باشیم. اینها خواصی هستند که ما می توانیم
برای تگ HR یعنی همان خط افقی استفاده کنیم:
width :
این فرمان مقدار عرض خط افقی را مشخص می کند. ر این فرمان شما می توانید
از مقیاس پیکسل یا درصد استفاده کنید. گزینه پیش فرض برای این فرمان ۱۰۰% است.
“align=”left :
این فرمان سمت قرار گرفتن خط افقی را مشخص می کند. شما می توانید خط را
به صورت چپ چین، راست چین و در مرکز صفحه قرار دهید. گزینه پیش فرض این فرمان
center است که خط را در مرکز صفحه قرار می دهد. البته
زمانی این وضعیت مشخص می شود که عرض خط افقی کمتر از عرض صفحه باشد.
“size=”3 :
این فرمان اندازه خط را مشخص می کند. اندازه پیش فرض برای خط ۲ است.
“noshade=”noshade :
این فرمان خط را به صورت تو پر نشان می دهد.
در اینجا هر کدام از فرمانهای بالا را با یک مثال بیشتر توضیح می دهیم.
فرض کنید می خواهیم از یک خط افقی در صفحه خود استفاده کنیم، اما می خواهیم طول
آن برابر یک تصویر یا قسمتی از یک متن باشد. یا شاید به یک خط افقی کوتاه که در سمت
چپ یا راست صفحه قرار بگیرد، نیاز داشته باشیم. اینها خواصی هستند که ما می توانیم
برای تگ HR یعنی همان خط افقی استفاده کنیم:
width :
این فرمان مقدار عرض خط افقی را مشخص می کند. ر این فرمان شما می توانید
از مقیاس پیکسل یا درصد استفاده کنید. گزینه پیش فرض برای این فرمان ۱۰۰% است.
“align=”left :
این فرمان سمت قرار گرفتن خط افقی را مشخص می کند. شما می توانید خط را
به صورت چپ چین، راست چین و در مرکز صفحه قرار دهید. گزینه پیش فرض این فرمان
center است که خط را در مرکز صفحه قرار می دهد. البته
زمانی این وضعیت مشخص می شود که عرض خط افقی کمتر از عرض صفحه باشد.
“size=”3 :
این فرمان اندازه خط را مشخص می کند. اندازه پیش فرض برای خط ۲ است.
“noshade=”noshade :
این فرمان خط را به صورت تو پر نشان می دهد.
در اینجا هر کدام از فرمانهای بالا را با یک مثال بیشتر توضیح می دهیم.
—————————————————————————————————————
<hr width=”250″>
با این فرمان خطی افقی مانند زیر خواهید داشت:
—————————————————————————————————————
<hr width=”250″ align=”right”>
با این تگ یک خط افقی با عرض ۲۵۰ پیکسل و در سمت راست صفحه خواهید داشت. مانند زیر:
—————————————————————————————————————
<hr width=”250″ size=”10″>
با این تگ یک خط افقی با عرض ۲۵۰ پیکسل و پهنای ۱۰ خواهید داشت:
—————————————————————————————————————
حالا یک اندازه بزرگ را برای پهنای خط انتخاب می کنیم، مثلاً ۸۰ ، نتیجه به این
صورت خواهید بود:
همانطور که ملاحظه می کنید، خط به صورت تو خالی و مانند یک حباب به نظر می رسد.
حالا اگر از فرمان noshade استفاده کنید، خط به صورت
تو پر نمایش داده می شود:
در برخی مرورگرها مانند اینترنت Internet Explorer 4.0
به بعد و Mozilla Firefox امکان تغییر رنگ خط نیز وجود دارد.
اما ممکن است این رنگ در همه مرورگرها مثلاً Opera 9.0 قابل
مشاهده نباشد و خط به رنگ پیش فرض مشاهده شود.
در این قسمت اگر با مرورگری مثل اینترنت اکسپلورر صفحه را مشاهده می کنید، می توانید
خطی را به رنگ زرد مشاهده کنید اما اگر با مرورگری مثل Opera
این صفحه را مشاهده می کنید، خط زیر را به رنگ خاکستری (رنگ پیش فرض) خواهید
دید.
اگر صفحه شما جابجا شد یا به هر دلیلی خواستید مسیر بازدیدکنندگان خود را تغییر
دهید می توانید از تگ meta refresh برای بردن بازدید کنندگان
به صفحه مورد نظرتان استفاده کنید. البته در استفاده از این روش برای تغییر مسیر بازدید
کنندگان، مخصوصاً در صفحه اصلی سایت خود باید به این نکته توجه کنید که برخی از موتورهای
جستجو به دنبال تگهای meta refresh می گردند که بازدید کنندگان
را از یک صفحه که با کلمات کلیدی پر شده است، به صفحه واقعی می برند که ممکن است در
آن از کلمات کلیدی استفاده نشده باشد و در نتیجه با موضوع مورد نظر بازدید کننده مرتبط
نباشد. بنابراین تغییر مسیر بازدید کننده از یک صفحه با سرعت زیاد (معمولاً کمتر از
۱۰ ثانیه) ممکن است باعث شود این صفحه در لیست موتور جستجو قرار نگیرد. البته اگر این
صفحه صفحه اصلی سایت شما نباشد ممکن است نخواهید در لیست موتور جستجو قرار گیرد.
اگر صفحه شما جابجا شد یا به هر دلیلی خواستید مسیر بازدیدکنندگان خود را تغییر
دهید می توانید از تگ meta refresh برای بردن بازدید کنندگان
به صفحه مورد نظرتان استفاده کنید. البته در استفاده از این روش برای تغییر مسیر بازدید
کنندگان، مخصوصاً در صفحه اصلی سایت خود باید به این نکته توجه کنید که برخی از موتورهای
جستجو به دنبال تگهای meta refresh می گردند که بازدید کنندگان
را از یک صفحه که با کلمات کلیدی پر شده است، به صفحه واقعی می برند که ممکن است در
آن از کلمات کلیدی استفاده نشده باشد و در نتیجه با موضوع مورد نظر بازدید کننده مرتبط
نباشد. بنابراین تغییر مسیر بازدید کننده از یک صفحه با سرعت زیاد (معمولاً کمتر از
۱۰ ثانیه) ممکن است باعث شود این صفحه در لیست موتور جستجو قرار نگیرد. البته اگر این
صفحه صفحه اصلی سایت شما نباشد ممکن است نخواهید در لیست موتور جستجو قرار گیرد.
بسیار خوب، کد زیر را می توان برای تغییر مسیر بازدید کننده استفاده کرد:
این نکته را مد نظر داشته باشید که تگ 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>
