دوره آموزشی HTML | جلسه آخر


1/5 - (1 امتیاز)

با سلام خدمت همه دوستان و همراهان عزیز نیوزسک، خدمت هستیم با جلسه آخر از دوره آموزشی HTML.

طراحی فرم ها در HTML:

برای ایجاد یک فرم از تک <form></form> استفاده میکنیم، کل المان های فرم درون این تگ قرار میگیرند.

 

صفات تگ <form></form>:

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

 

تگ <input>:

این تگ Text Level میباشد که این تگ درون تگ <form></form> قرار میگیرد که کار آن ایجاد پارامتر های یک فرم است، با تغییر صفت type در این تگ میتوانیم پارامتر های متفاوت داشته باشیم.

 

صفات تگ <input>:

 

  • type یکی از صفات این تگ است که دارای مقادیر زیر است:
  1. text: ایجاد یک Text Field کوجک برای کاربر که میتواند درون آن رشته وارد کند ، معمولا برای ورودی هایی مانند نام،نام خانوادگی، پسورد، ایمیل و موارد این چنینی استفاده میشود.
  2. radio: ایجاد چند گزینه که کاربر فقط میتواند یکی از آن ها را انتخاب کند. برای مثال جنسیت یا میتواند فقط مرد باشد یا فقط زن، برای اینکه کاری کنیم ک کاربر فقط بتواند یک گزینه را انتخاب کند باید درون تگ <input> از شفت name هم استفاده کنیم و مقدار آن را برای تمام input ها یکی بگذاریم تا کاربر فقط بتواند یک گزینه انتخابی داشته باشد.
  3. checkbox: فضایی ایجاد میکند که کاربر قابلیت انتخاب دارد و میتواند چندین انتخاب داشته باشد ، انتخاب ها را با تیک زدن میتواند استفاده کند.
  4. file: به کاربر اجازه آپلود فایل میدهد.
  5. hidden: دریافت اطلاعات از کاربر به صورت مخفی مثلا دریافت زمان ثبت نام که لزوما نباید کاربر از آن اطلاعی داشته باشد.
  6. Submit: برای کاربر دکمه ای ایجاد میکند که روی آن بتواند کلیک کند تا ذخیره اطلاعات یا خروج انجام شود.
  7. reset: کل تنظبمات فرم را به حالت اول بر میگرداندو تمام ورودی های کاربر را پاک میکند.
  8. email: اگر کاربر فرمت وارد شده برای ایمل را وارد نکند موقع زدن دکمه submit از او ایراد گرفته خواهد شد
  9. password: کاربر زمانی که رشته وارد میکند هر کاراکتر به صورت * نمایش داده میشود، این موارد برای Text Field هایی استفاده میشود که ورودی آن اطلاعات مهم مثل پسورد است.
  • checked دومین صفت از این تگ است که به طور پیش فرض میتوانیم مقدار دلخواه به ورودی ها بدهیم ، برای تایپ های Radio و checkbox استفاده کنیم یک مقدار را به طور پیش فرض انتخاب میکند.
  • value سومین صفت از این تگ است که در تایپ های text میتوانیم با صفت value مقدار پیش فرض به آن بدهیم تا به طور خودکار و باز شدن صفحه این مقدار درون Text Field ذخیره شود اما دقت داشته باشید تمام المان های فرم دارای صفت value هستند
  • placeholder چهارمین صفت از این تگ است که مقدار آن توضیحی است راجب Text Filed در صورتی که تایپ input برابر با text باشد، تا کاربر متوجه بشود چه چیزی را وارد کند.
  • maxlength پنجمین صفت از این تگ است که مقداری که که این صفت میگیرد یک عدد است که به تعداد آن عدد کاربر میتواند در Text Field کاراکتر ایجاد کند، مثلا اگر 5 باشد کاربر بیشتر از 5 کاراکتر نمیتواند وارد کند.
  • size ششمین صفت از این تگ است که عرض Text Field ها را کنترل میکند و مقدار آن عدد است هر چه عدد بزرگتر باشد اندازه عرض بیشتر میشود.
  • required هفتمین صفت از این تگ است که این صفت مقدار ندارد و کمک میکند تا کاربر مواردی که حتما باید آن ها را پر کند اگر پر نکند و Submit کند ارسال اطلاعات انجام نخواهد شد و یک پیغام کمکی برای کاربر نمایش داده میشود که این فیلد حتما باید پر شود.

تگ <textarea></textarea>:

این تگ Text Level میباشد که مانند تگ <input> عمل میکند و یک Text Filed میسازد با این تفاوت که اندازه آن بزرگنر از Text Field ی است که توسط تگ <input> ساخته میشود، کاربرد آن در مواردی مانند گرفتن آدرس از کاربر است.

 

صفات تگ <textarea></textarea>: 

rows: مقدار آن عدد است که بر حسب آن عدد تعداد سطر خط برای ما فضای خالی میگذارد
cols: مقدار آن عدد است که بر حسب آن عدد تعداد ستون خط برای ما فضای خالی میگذارد

 

تگ <select></select>:

این تگ Text Level میباشد که کار این تگ ایجاد یک لیست برای کاربر است و هر آیتم لیست درون تگ <option></option> قرار میگیرد. در این تگ صفتی به اسم multiple وجود دارد که مقدار ندارد و به کاربر اجازه میدهد با گرفتن CTRL چندین انتخاب داشته باشد.
اگر بخواهیم در این لیست گروه و زیر گروه مشخص باشد به عنوان مثال استان باشد و زیر مجموعه آن شهر های آن استان باشد در این صورت از تگ <optgroup></optgroup> استفاده میکنیم که باید حتما در آن از صفت label استفاده کنیم ، این صفت مقدار آن همان مجموعه بزرگ ما مثل استان است ، و سپس تمام زیر مجموعه ها را درون تگ <option></option> می آوریم. دقت کنید که برای کاربر مجموعه ها قابل کلیک نیستند.
اگر بخواهیم یک آیتم در لیست در اول لیست قرار بگیرد کافی است درون تگ <option></option> از صفت selected استفاده کنیم و مقداری به آن ندهیم.

 

تگ <filedset></fieldset>:

این تگ Block Level میباشد که یک خط را دور تا دور محتوا درون خود می اندازد برای مثال اگر درون این تگ، تگ <form></form> را اجاد کنیم دور تا دور فرم ما یک خط کشیده خواهد شد.
بعد از تگ بالا میتوانیم از تگ <legend></legend> استفاده کنیم که محتوا درون خود را در بین بالا سمت راست خط ایجاد شده توسط تگ <filedset></fieldset> وارد میکند.

تگ <label></label>:

این تگ Block Level میباشد که محتوا ما درون این تگ قرار میگیرد و نمایش داده میشود کار خاصی انجام نمیدهد و خصوصیات آن توسط CSS کنترل میشود.

 

کاراکتر های خاص در HTML:

گفته شد در HTML زدن Space فایده ای ندارد اما گه گاهی ما میخوایم بین محتوا یک Space فاصله باشد،
برای اینکه بدانیم هر کاراکتر خاص چه کاری را انجام میدهد کافی است در محیط PHP-Storm فقط & بزاریم و سپس CTRL+Space بزنیم تا خود ابزار به ما کمک کند.

پایان جلسه آخر از دوره آموزشی HTML.

بدون دیدگاه

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

نشانی ایمیل شما منتشر نخواهد شد.