پاسخ : آموزش HTML [TABLE] [TR] [TD]معرفی فرم در HTML و شناسه های مهم آن [/TD] [/TR] [TR] [TD="colspan: 3"]اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر وارد شده اند به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی مانند کادر ورودی متن (Text Field)، جعبه مربوط به ورود متن (Text Area)، دکمه های رادیویی (Radio Button)، منوهای کشویی، چک باکس و ... باشد. در بخشهای بعدی به توضیح اجزایی که می توانند در یک فرم به کار روند خواهیم پرداخت. در این قسمت به تگ <form> و شناسه هایی که در آن به کار می روند می پردازیم. شکل کلی این تگ معمولاً به صورت زیر است : <form action="formProcessor.php" method="get" name="formName" target="_blank"> .................اجزای مورد استفاده برای فرم ................. </form> از میان شناسه های مورد استفاده در فرم استفاده از شناسه action ضروری است. این شناسه مشخص کننده صفحه ای است که اطلاعات فرم باید به آن ارسال شود. آدرس صفحه مورد نظر باید به عنوان مقدار این شناسه قرار گیرد. لازم به یادآوری است که پس از اینکه کاربر اطلاعات مورد نظر را وارد کرد و دکمه ارسال را کلیک کرد صفحه action برای پردازش اطلاعات باز خواهد شد. البته استفاده از شناسه method هم اهمیت زیادی دارد ولی در صورتی که از این شناسه استفاده نشود از مقدار پیش فرض آن یعنی get استفاده می شود. در اینجا لیستی از شناسه های پر استفاده در تگ فرم آورده شده است : action : همانطور که گفته شد از این شناسه برای مشخص کردن صفحه پردازش کننده اطلاعات ورودی کاربر استفاده می شود. [HR][/HR] method : این شناسه طریقه ارسال اطلاعات را به فایل action مشخص می کند و شامل دو مقدار زیر است: get : در این روش اطلاعات از طریق آدرس صفحه (نوار آدرس) ارسال می شوند. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سؤال بعد از آدرس صفحه action قرار می گیرند و ارسال می شوند. از این روش نمی توان برای اطلاعات طولانی یا کاراکترهای غیر ASCII استفاده کرد. همچنین بهتر است برای اطلاعات مهم از قبیل نام کاربری و کلمه عبور هم از این روش استفاده نشود. چون در این صورت این اطلاعات در نوار آدرس مرورگر نمایش داده می شوند. post : این روش برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. مزیت این روش نسبت به روش قیل امنیت بیشتر به دلیل عدم نمایش اطلاعات ارسالی به کاربر و همچنین امکان ارسال اطلاعات طولانی تر است. [HR][/HR] name : از این شناسه برای تعریف کردن یک نام منحصر به فرد برای فرم استفاده می شود. [HR][/HR] 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[/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE="align: center"] [TR] [TD="class: header, colspan: 3"][/TD] [/TR] [TR="class: page"] [/TR] [/TABLE] [TABLE="align: center"] [TR] [TD] [TABLE] [TR] [TD]ساختن کادرهای ورودی متن برای استفاده در فرمهای HTML [/TD] [/TR] [TR] [TD="colspan: 3"]ما با استفاده از تگ <input> می توانیم بسیاری از اطلاعاتی را که در فرمها نیاز داریم از طریق کاربران به دست آوریم. در حقیقت این تگ برای وارد کردن اطلاعات توسط کاربر استفاده می شود. این تگ در HTML4.01 نیازی به تگ پایانی ندارد. از تگ <input> می توانیم برای ساختن کادرهای مربوط به وارد کردن متن، کادر کلمه عبور، فیلدهای مخفی، دکمه های رادیو، چک باکس، دکمه ارسال فرم، دکمه پاک کردن فرم و انواع دیگر دکمه ها و چند نوع ورودی دیگر استفاده کنیم. در اینجا هر کدام از این ورودی ها را به صورت جداگانه مورد بررسی قرار می دهیم. [h=3]جعبه ورودی متن (Text Box)[/h] از این نوع ورودی برای ایجاد یک کادر یک سطری برای ورود متن استفاده می شود. برای ساختن این کادر باید از شناسه "type="text در تگ <input> استفاده کنیم. در صورت تعریف نشدن شناسه type در مرورگرهای جدید این شناسه به صورت پیش فرض به کار می رود و یک Text Box را نمایش می دهد اما برخی از مرورگرهای قدیمی در صورتی که از ایسن شناسه استفاده نشود این کادر را نمایش نمی دهند. یک نمونه از کد مربوط به ایجاد این کادر را می توانید در اینجا مشاهده کنید: <input type="text" name="testField" maxlength="50" size="30" value="کادر ورود متن"> کادر متنی بالا به صورت زیر نمایش داده می شود: در اینجا به توضیح برخی از شناسه هایی که با این نوع ورودی به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند. type : برای اینکه یک کادر متنی ایجاد کنیم باید مقدار این شناسه را text قرار دهیم. [HR][/HR] name : این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود. [HR][/HR] maxlength : این شناسه برای مشخص کردن حداکثر تعداد کاراکترهای ورودی استفاده می شود. این شناسه در مورد ورودی متنی یک سطری استفاده می شود و مقدار آن باید عددی مثبت باشد. [HR][/HR] size : این شناسه در مورد این نوع ورودی طول کادر را بر حسب تعداد کاراکتر مشخص می کند. البته مرورگرهای مختلف ممکن است بر حسب نوع فونت مورد استفاده اندازه این کادر را مانند هم نشان ندهند. مقدار این شناسه باید عددی مثبت باشد. مقدار پیش فرض این شناسه 20 است. [HR][/HR] value : این شناسه در مورد کادرهای متنی، متنی را که به صورت پیش فرض در کادر متنی نمایش داده می شود معین می کند. [HR][/HR] "readonly="readonly : این شناسه فقط برای کادرهای متنی مورد استفاده قرار می گیرد و باعث می شود تا کاربر نتواند تغییری در متن نوشته شده در این کادر ایجاد کند اما کاربر می تواند متن را مشاهده کند و آنرا انتخاب کند. مقادیر مربوط به فیلدهایی که به صورت readonly هستند اگرچه توسط کاربر تغییر نمی کنند ولی با ارسال فرم به سرور ارسال می شوند. [HR][/HR] "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[/TD] [/TR] [TR] [/TR] [/TABLE] [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE="align: center"] [TR] [TD="class: header, colspan: 3"][/TD] [/TR] [TR="class: page"] [/TR] [/TABLE] [TABLE] [TR] [TD]آموزش نحوه ساختن چک باکس برای استفاده در فرمهای html [/TD] [/TR] [TR] [TD="colspan: 3"] [h=3]چک باکس (checkbox)[/h] برای ساختن چک باکس هم باید از تگ <input> استفاده کنیم. برای این کار باید از checkbox به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن چک باکس آورده شده است: <input name="someNeme" type="checkbox" value="مقدار مورد نظر"> در اینجا می توانید چک باکس ایجاد شده را مشاهده کنید: در اینجا به توضیح برخی از شناسه هایی که برای چک باکس به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند. type : برای اینکه چک باکس متنی ایجاد کنیم باید مقدار این شناسه را checkbox قرار دهیم. [HR][/HR] name : این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود. [HR][/HR] value : این شناسه در مورد در مورد چک باکس مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است. [HR][/HR] "checked="checked : این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند. [HR][/HR] "disabled="disabled : از این شناسه برای غیر فعال چک باکس استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند یا آنرا به صورت انتخاب نشده در آورد. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند. برای مشاهده چک باکس در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در چک باکس زیر مشاهده کنید: حالت مورد نظر شما : فعال غیر فعال چک باکس نمونه : [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE] [TR] [TD]آموزش نحوه ساختن دکمه های رادیو در فرمهای html [/TD] [/TR] [TR] [TD="colspan: 3"] [h=3]دکمه های رادیو (Radio Button)[/h] برای ساختن دکمه های رادیو هم باید از تگ <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 قرار دهیم. [HR][/HR] name : این شناسه برای اختصاص یک نام برای ورودی مربوطه استفاده می شود. [HR][/HR] value : این شناسه در مورد در مورد دکمه رادیو مقداری است که در صورت انتخاب شدن این دکمه باید به صفحه action انتقال داده شود. استفاده از این شناسه در مورد چک باکس و دکمه های رادیو ضروری است. [HR][/HR] "checked="checked : این شناسه فقط برای چک باکس و دکمه های رادیو مورد استفاده قرار می گیرد و باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند. توجه داشته باشید که در یک دسته دکمه رادیو که در بالا یک نمونه از آن آورده شده است نباید بیش از یک دکمه دارای این شناسه باشد. [HR][/HR] "disabled="disabled : از این شناسه برای غیر فعال دکمه رادیو استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را انتخاب کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند. برای مشاهده دکمه رادیو در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه رادیوی زیر مشاهده کنید: حالت مورد نظر شما : فعال غیر فعال دکمه رادیو نمونه : [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE] [TR] [TD]ساختن دکمه ها با استفاده از تگ input در html [/TD] [/TR] [TR] [TD="colspan: 3"] [h=3]دکمه ارسال فرم (Submit)[/h] برای ساختن دکمه ارسال فرم باید از تگ <input> استفاده کنیم. برای این کار باید از submit به عنوان مقدار شناسه type استفاده کنیم. در اینجا یک نمونه از کدی که برای ساختن دکمه ارسال فرم آورده شده است: <input name="buttonName" type="submit"> در اینجا می توانید دکمه ارسال فرم ایجاد شده را مشاهده کنید البته چون این دکمه در تگ <form> قرار ندارد با کلیک کردن بر روی آن اتفاقی رخ نمی دهد اما اگر این دکمه در تگ فرم قرار داشته باشد با کلیک کردن بر روی آن اطلاعات وارد شده در فرم به صفحه action ارسال می شوند. [HR][/HR] [h=3]دکمه پاک کردن فرم (Reset)[/h] برای ساختن این دکمه هم از تگ <input> استفاده می شود به این صورت که برای شناسه type از مقدار reset استفاده می کنیم. در اینجا می توانید یک نمونه از کدی را که برای ساختن این دکمه استفاده می شود ملاحظه کنید: <input name="buttonName" type="reset"> در اینجا می توانید دکمه ای را که با استفاده از تگ بالا ساخته شده است ملاحظه کنید. این دکمه هم مثل دکمه ارسال فرم باید در تگ فرم قرار داشته باشد تا با کلیک بر روی آن اطلاعاتی که کاربر وارد کرده است حذف شوند و فرم به حالت اولیه بازگردد. [HR][/HR] [h=3]ساختن دکمه (Button)[/h] به جز دکمه های ارسال فرم و پاک کردن فرم دکمه هایی هم وجود دارد که بیشتر برای استفاده در جاوا اسکرپت استفاده می شوند. این دکمه ها به صورت پیش فرض وظیفه خاصی را انجام نمی دهند و وظیفه آنها بستگی به موقعیت و مورد استفاده آنها از نظر برنامه نویس دارد. در اینجا به توضیح برخی از شناسه هایی که برای دکمه های رادیو به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند. برای مثال دکمه هایی که در پایین همین صفحه قرار دارند و برای رفتن به بخش قبلی یا بعدی استفاده می شوند از همین نوع دکمه ها هستند. از کد زیر برای ساختن این دکمه ها استفاده می شود: <input name="buttonName" type="button"> [HR][/HR] در اینجا به معرفی برخی از شناسه هایی که برای دکمه ها در تگ <input> استفاده می شوند می پردازیم : type : برای دکمه ارسال فرم باید از submit برای مقدار این شناسه استفاده شود. برای دکمه پاک کردن فرم باید از reset برای مقدار این شناسه استفاده شود. برای سایر دکمه ها باید از button برای مقدار این شناسه استفاده شود. [HR][/HR] name : این شناسه برای اختصاص یک نام به هر دکمه استفاده می شود. [HR][/HR] value : در مورد دکمه ها این شناسه مشخص کننده متنی است که در روی دکمه نمایش داده می شود. [HR][/HR] "disabled="disabled : از این شناسه برای غیر فعال دکمه ها استفاده می شود. به صورتی که کاربر نمی تواند دکمه مربوطه را کلیک کند. مقادیر مربوط به فیلدهایی که به صورت disabled هستند با ارسال فرم به سرور ارسال نمی شوند. برای مشاهده دکمه زیر در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در دکمه زیر مشاهده کنید: حالت مورد نظر شما : فعال غیر فعال دکمه نمونه : [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE] [TR] [TD]کادر کلمه عبور و فیلدهای مخفی در طراحی فرمهای HTML [/TD] [/TR] [TR] [TD="colspan: 3"] [h=3]کادر کلمه عبور (Password)[/h] احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد. برای ساختن کادر کلمه عبور می توانید از کد زیر استفاده کنید: <input type="password" name="someName" size="30"> کادر به دست آمده مانند زیر است. می توانید متنی را در آن بنویسید و نتیجه را مشاهده کنید: همانطور که در کد بالا مشاهده می کنید ما از شناسه "size="30 برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند. [HR][/HR] [h=3]فیلدهای مخفی (Hidden Fields)[/h] ممکن است برای شما پیش آمده باشد که بخواهید قسمتی از اطلاعات به همراه فرم ارسال شوند ولی کاربر آنها را مشاهده نکند و نیازی نباشد آنها را وارد کند. برای این کار می توانید از فیلدهای مخفی استفاده کنید. کد زیر مربوط به یک فیلد مخفی است: <input type="hidden" name="FieldName" value="اطلاعات مورد نظر شما" > در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود. [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE] [TR] [TD]کادر متنی با بیش از یک سطر (Text Area) [/TD] [/TR] [TR] [TD="colspan: 3"][h=3]کادر های متنی با بیش از یک سطر (Text Area)[/h] از یک 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> الزامی است. [HR][/HR] rows : این شناسه مشخص کننده تعداد سطرهای قابل مشاهده در کادر است. این مقدار هم باید عددی مثبت باشد. استفاده از شناسه rows برای تگ <textarea> الزامی است. [HR][/HR] name : از این شناسه می توان برای اختصاص دادن یک نام مشخص به textarea استفاده کرد. [HR][/HR] "readonly="readonly : این شناسه کادر را به صورت فقط خواندنی در می آورد و کاربر نمی تواند متن موجود در کادر را تغییر دهد. [HR][/HR] "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 [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE] [TR] [TD]اصول نوشتن لیستهای کشویی برای استفاده در فرمهای HTML [/TD] [/TR] [TR] [TD="colspan: 3"] [h=3]لیستهای کشویی (Select)[/h] برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ <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 : از این شناسه برای تخصیص یک نام به لیست استفاده می شود. [HR][/HR] size : این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع رتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این شناسه باید عددی بزرگتر از صفر باشد. [HR][/HR] "multiple="multiple : در صورتی که این شناسه به تگ <select> اضافه ضود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند. [HR][/HR] "disabled="disabled : این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند. برای مشاهده لیست در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را مشاهده کنید: حالت مورد نظر شما : فعال غیر فعال کادر متنی نمونه : از رویداد های زیر هم می توانیم در تگ <select> استفاده کنیم: onfocus, onblur, onchange [HR][/HR] [h=3]وارد کردن گزینه ها به لیست با تگ <option>[/h] برای ساختن گزینه هایی که در لیست نمایش داده می شود باید از تگ <option> استفاده کنیم. با استفاده از مقداری که برای این تگ با استفاده از شناسه value تعریف می کنیم می توانیم در اطلاعات ارسال شده فرم گزینه انتخاب شده توسط بازدید کننده را تشخیص دهیم. برای تگ <option> هم می توانید از شناسه هایی استفاده کنید که در این جا مشاهده می کنید: value : این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود. [HR][/HR] "selected="selected : از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود. استفاده از رویداد های زیر در تگ <option> مجاز است: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup [HR][/HR] [h=3]دسته بندی گزینه های لیست های کشویی با استفاده از <optgroup>[/h] اگر یک لیست کشویی طولانی دارید توانید برای سهولت کار برای بازدید کننده گزینه های مرتبط با هم را در یک دسته قرار دهید به صورتی که از سایر گزینه ها جدا باشند. برای انجام این کار می توانید از تگ <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 [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE] [TR] [TD]آشنایی با متا تگها و موارد استفاده آنها در HTML [/TD] [/TR] [TR] [TD="colspan: 3"] تگهای META مورد استفاده موتورهای جستجو برای بررسی و شاخص گذاری صفحات قرار می گیرند. مخصوصاً اگر صفحه شما فریم (قاب) داشته باشد. این تگها باید در قسمت HEAD صفحه شما قرار گیرند. در سطر زیر یکی از معمول ترین تگهای META را می بینید: <head> <title>عنوان صفحه</title> <meta name=" " content=" "> </head> شناسه name : مشخص کننده نوع متا تگی است که شما قصد استفاده از آن را دارید. [HR][/HR] شناسه content : تعیین کننده محتویات متا تگ برای موتورهای جستجو است. در این بخش به توضیح دو متا تگ که برای موتورهای جستجو اهمیت بیشتری دارند می پردازیم. [HR][/HR] [h=3]META Keywords[/h] <meta name="keywords" content="متا تگ, موتور جستجو"> "name="keywords این فرمان برنامه اسپایدر موتورهای جستجو را از وجود یک دسته از کلمات کلیدی این صفحه در این تگ آگاه می کند. [HR][/HR] "متا تگ، موتور جستجو"=content این قسمت لیستی از کلمات کلیدی موجود در این صفحه است. در این قسمت برای جدا کردن کلید واژه ها از یکدیگر از علامت کاما استفاده می شود. توجه داشته باشید که نباید یک کلید واژه را چندین بار تکرار کنید و کلی واژه ها باید با متن شما در صفحه مربوطه ارتباط باشند. موتورهای جستجو معمولاً رتبه بندی صفحاتی را که در آنها با تکرار بیش از حد یک کلید واژه یا ذکر کلید واژه ای که با متن صفحه ارتباطی ندارد سعی می شود رتبه بالایی را به دست بیاورند، متوقف می کنند. [HR][/HR] [h=3]META Description[/h] این تگ محتویات صفحه را توصیف می کند. <meta name="description" content="افزودن متا تگ به صفحه"> "name="description این بخش توضیحی در باره صفحه برای برنامه اسپایدر موتورهای جستجو است. [HR][/HR] "افزودن متا تگ به صفحه"=content این بخش توصیفی است که شما از صفحه خود می نویسید. در این قسمت هر چیزی را که می خواهید درباره صفحه خود توضیح دهید، همچنین می توانید از یک دو تا از کلید واژه ها هم استفاده کنید. بسیاری از موتورهای جستجو این قسمت را در لیست نتایج جستجو به عنوان توضیح صفحه نشان می دهند. [HR][/HR] دو متا تگ ذکر شده در بالا از بقیه متا تگها پر کاربرد تر هستند. متا تگ های دیگری هم وجود دارند که در زیر به برخی از آنها اشاره می شود: <meta name="author" content="نام نویسنده صفحه"> این تگ به شما اجازه می دهد که نویسنده صفحه را مشخص کنید. فقط نام نویسنده را در این تگ بنویسید تا هر کسی که کدهای HTML این صفحه را می بیند، بداند چه کسی این صفحه را نوشته است. موتور های جستجو معمولاً از این تگ برای رتبه بندی صفحات استفاده نمی کنند. <meta name="generator" content="نام برنامه مورد استفاده شما"> این تگ به شما اجازه می دهد که به افرادی که کدهای این صفحه را می بینند بگویید که شما از چه برنامه ای برای نوشتن این کدها استفاده کرده اید. این تگ نیز برای رتبه بندی صفحات در موتورهای جستجو استفاده نمی شود. [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [TABLE] [TR] [TD]تغییر مسیر بازدید کنندگان پس از مدت مشخص با HTML [/TD] [/TR] [TR] [TD="colspan: 3"] اگر صفحه شما جابجا شد یا به هر دلیلی خواستید مسیر بازدیدکنندگان خود را تغییر دهید می توانید از تگ 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> [/TD] [/TR] [TR] [/TR] [/TABLE]
