منوی برگه ها
TwitterRssFacebook
منوی دسته ها

ارسال شده توسط در تاریخ ۶ آذر ۱۳۹۳ در طراحی وب | ۰ دیدگاه

قسمت هفتم آموزش جامع HTML : ادامه کار با فرم ها

 

با سلام به همه دوستداران طراحی و برنامه نویسی وب

در این پست قصد داریم تا ادامه کار با فرم ها را با یکدیگر دنبال کنیم و مقادیر بیشتری از صفت type را یبا یکدیگر ببینیم و استفاده های بیشتری از این زبان ساختاری در صفحات وب تجربه کنیم:

 

Cheked » این مقدار زمانی به کار می رود که صفت type یا برابر       checkbox و یا radio باشد که  این صورت با وجود این مقدار باکس مربوطه به صورت پیش فرض به حالت تیک خورد تبدیل می شود.

 

22

و  نتیجه:

 

11

 

Src » صفتی است که آدرس اون عکسی را شامل می شود که قرار است به عنوان دکمه ارسال انتخاب شود و زمانی کاربرد دارد که مقدار صفت  type  برابر image باشد.

 

accept » در زمانی که ما مقدار صفت type را برابر file انتخاب می کنیم شاید بخواهیم که کاربر فقط یک نوع خاصی از فایل با یک فرمت دلخواه مثلا فقط   jpg و یا … را آپلود کند که در این صورت این خط باعث می شود تا فقط از این نوع اجازه آپلود داشته باشد.

< /’input type=’file’ accept=’image/jpeg>

 

readonly » از معنی کلمه پیداست که این صفت زمانی کاربرد دارد که بخواهید فرم مورد نظر ما فقط خواندنی گردد و باعث نگردد تا کاربر بتواند آن را تغییر دهد.

Disable » شباهت زیادی با صفت قبلی دارد و هر دو از اینکه کاربر در فرم شما تغییرات ایجاد کند جلوگیری می کنند اما این صفت محتویاتش به سرور منتقل نمی شود ولی readonly  سبب انتقال محتویات به سرور می گردد.

 

اما بد نیست که تعدادی از صفت های جدیدی را که برای تگ input در نظر گرفته شما را د ادامه مورد بررسی قرار دهیم.

autofocus » این صفت زمانی استفاده می شود تا بخواهیم در صورت باز شدن صفحه وب مورد نظر focus به صورت خودکار بر روی آن فیلد قرار گیرد که باید در هر صفحه فقط یک تگ  input دارای این صفت باشد.

 


33

 

 

Placeholder » بار ها شده که وارد یک وبسایتی شده و می بینید که در نوار سرچ سایت به صورت کمرنگ نوشته شده که “جست و جو کنید” و با کلیک بر روی آن نوار نوشته حذف شده و شما عبارت مورد نظر خود را می یابید . این کار در گذشته با استفاده از کدهای سنگین و زیاد جاوا اسکریپت اتفاق می افتاد ولی امروزه با آمدن html5 به راحتی می توان به عنوان مقدار این صفت عبارت کمرنگ مورد نظر خود را نشان داد.

55

 ونتیجه:

66

 

Required » از این صفت بولین زمانی استفاده می گردد که بخواهیم یک فیلد خالی نماند و اگر کاربری با وجود این صفت در فیلد ما باز هم خالی رها کرد مرورگر یک پیغام خطا برای پر نمودن این فیلد به کاربر می دهد البته توجه داشته باشید که این پیغام طبیعتا به زبان انگلیسی است و اگر شما می خواهید که پیغام شما به صورت فارسی نشان داده شود باید به جای این صفت از کدهای جاوا اسکریپت استفاده کنید.

 

111

 

ایجاد کردن cobobox و listbox :

از ترکیب دو تگ  select  و  option می توان اینگونه از عناصر فرم را ایجاد کرد.

این دو تگ را بایکدیگر بررسی می کنیم:

 

تگ <select>

Name » این صفت نامی را برای عنصر انتخاب می کند.

Size » برای ایجاد لیست باکس ها استفاده می شود و یک عدد صحیح را به عنوان مقدار می پذیرد و تعداد آیتم های نمایشی در این لیست باکس ها را نشان می دهد.

Multiple » برای زمانی است که کاربر قصد انتخاب چندین گزینه را دارد که البته این کار را با دکمه ctrl  انجام می دهد.

 

تگ <option>

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

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

 

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

 222

 و نتیجه:

 

333

 

تگ <optgroup>

اگر بخواهیم گروه بندی برای option های listbox و یا combobox انجام دهیم از این تگ استفاده می کنیم که برای این کار باید option های مورد نظر را بین تگ باز و بسته <optgroup> قرار دهیم:

 

555

 

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

تگ<textarea>

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

Rows وcols هر دو برای مقدار خودشون یک عدد صحیح می پذیرند که به ترتیب تعداد سطر و تعداد کاراکتر برای محیط نوشتاری تعیین می گردد.

البته دو صفت readonly و disabled که قبلا گفته شد هم به کار برده می شود.

<“textarea rows=”2” cols=”20> 

در این قسمت باید متن مورد نظر خود را بنویسید 

</textarea>

و نتیجه:

777

 

با ایجاد دکمه ها آشنا شوید:

تگ<button>

تگ فوق دارای صفات زیر است :

Name » یک نام برای دکمه تعیین می شود.

Value » مقداری را برای اینکه بتوان آن را به پردازش فرستاد تعیین می شود.

Type » نوع دکمه ای را که قرار است ایجاد گردد مشخص می کند و سه مقدار زیر را می پذیرد.

Submit : دکمه ای برای ارسال فرم جهت پردازش.

Reset : برای اینکه بتوان عناصر فرم را پاک کرد از این دکمه استفاده می شود.

Button : یک دکمه ایست که به خودی خود رفتار پیشفرضی ندارد.

بین این تگ عبارتی را کعه می خواهید روی دکمه نوشته شود جایگزین می شود.

<“button type=”button>

کلیک کنید

</button>

نتیجه:

12

 

تگ<fieldset>

برای نظم دهی و مرتب سازی گروه بندی دیگر عناصر استفاده می گردد.

 تگ<legend>

این تگ برای استفاده داخل تگ <fieldset>   استفاده می شود و عنوان آن را تعیین می کند و از صفت های زیر پشتیبانی می کند:

Alighn » این صفت را در قسمت های پیش بیان کردیم که برای تعیین موقعیت عناصر بود و دارای سه مقدار  right و    center  و  left می باشد.

 

369

و نتیجه در مرورگر:

 

11

اما آخرین تگی که در این پست از قسمت فرم ها برای شما بیان می کنم تگ  <progress> نام دارد که برای نمایش پردازش دانلود و آپلود و …. استفاده می شود.

این نوار برای روند دانلود است:

<“progress value=”52” max=”100>

</progress>

 

نتیجه:

665

 

خوب از این لحظه به بعد می خواهیم به موضوع استفاده از عناصر چند رسانه ای در صفحات وب بپردازیم:

در سال های گذشته و به خصوص در کشور ما که هم پهنای باند اتصالات اینترنتی پاییین بود و هم دانش های برنامه نویسی وب هنوز گسترده نشده بود توانایی اینکه بتوان در صفحه وب یک ویدئو و یا موزیک و یا یک فایل فلش تبلیغاتی و … گذاشت وجو نداشت اما امروزه این امکان فرآهم گردیده و به راحتی می توان این کار را انجام داد.

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

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

اما در اینجا با تعدادی از عناصر چند رسانه ای که می توان آن ها را در صفحات وب به کار برد آشنا می شویم:

 

فایل های متنی:

متن های در واقع می توانند در قالب صفحات html و  pdf درآیند ومورد استفاده قرار گیرند ولی برای این کار مرورگر نیاز به نرم افزار کمکی acrobat reader دارد.

تصاویر:

همان عکس ها را شامل می شود که خود مرورگر آن ها را به صورت خودکا و بدون هیچ پلاگین اضافه تری اجرا می کند و به ما نشان می دهد . از جمله مهمترین و پرکاربردترین فرمت های موجود در صفحات وب برای عکس و تصاویر .png و  .jpg و .gif می باشد.

فایل های صوتی:

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

Midi » این فرمت حجم بسیار پایینی دارد و معمولا فایل هایی با پسوند .mid یا .midi از این نوع دسته اند.

Wave » این نوع فرمت فقط روی سیستم عامل ویندوز قابل اجراست و دارای پسوند .wav می باشد البته روی تمامی مرورگر ها قابل اجراست ولی خوب حجم زیادی را به خود اختصاص می دهد.

Mp3 » نوع سومی است که برای فرمت فایل صوتی تعیین می گردد و از همه فرمت های نام برده شده همین فرمت و wave بیشتر استفاده می شود.

 

فایل های ویدیئویی:

Avi » این نوع فرمت ویدیئویی از نوع متداول فرمت ها در صفحات وب است که توسط شرکت مایکوسافت ارائه شده است . فایل های از این نوع در فرمت .avi ذخیره می گردد.

Wmv » از جمله رایج ترین فرمت های معمول مورد استفاده است و البته فقط روی سیستم عامل ویندوز قابل اجراست وبرای اجرا روی دیگر سیستم عامل ها نیاز به راه انداز دارد.

Mpeg » محبوب ترین و پر استفاده ترین فرمت ویدئویی مورد استفاده در صفحات وب همین فرمت است که در همه سیستم عامل ها و مرورگر ها به خوبی پشتیبانی می گردد و با پسوند .mpg یا .mpegقابل نمایش است.

Flash » این نوع فایل ها هم که زیاد در صفحات وب کاربرد دارد برای نشان دادن بنر هاییست که با فلش ساخته شده است و برای اجرای آن نیاز به برنامه flash player می باشد که در صورت نصب نبودن خود مرورگر توصیه می کند که ان را دانلود کرده و نصب کنید.

 

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

با تشکر از جزوات مفید استاد احمد بادپی

 

تا پست بعدی خدا نگهدار

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.

Pin It on Pinterest

Share This

Share This

Share this post with your friends!