آموزش معرفی تگهای HTML5 قسمت دوم
آموزش معرفی تگهای HTML5
فهرست موضوعات در این آموزش
باسلام خدمت تمام شما کاربران وب سایت پاسخ وردپرس دخدمت شما هستم با یکی دیگه از آموزش های HTML5 و CSS3 .
توی این جلسه میخواهیم تگهای figure و figcaption و input type های html5 خدمت شما آموزش بدیم پس با من همراه باشید .
تگ figure در HTML5
تگ <figure> محتوای خود مانند تصاویر، نمودار ها، عکس ها، لیست کد و … را مشخص می کند.
در حالی که محتوای تگ <figure> با جریان اصلی سند مرتبط است، جایگاهی مستقل دارد و در صورتی که این تگ حذف شود، نباید تاثیری بر جریان اصلی بگذارد.
تگ <figure> یک تگ جدید در HTML5 است. و در نسخه های قبلی html وجود نداشت.
تگ <figure> مانند بسیاری از تگ های html دارای یک تگ باز ( opening tag ) و یک تگ بسته ( closing tag ) می باشد.
نکته مهم :
تگ figcaption یک عنوان یا caption به تگ <figure> اضافه می کند.
این تگ می تواند به عنوان اولین یا آخرین عنصر داخل تگ <figure> قرار بگیرد. استفاده از این تگ اختیاری است .
مثال در مورد تگ figure در HTML
|
1 2 3 4 |
<figure> <img src="shasta.jpg" alt="پاسخ وردپرس"> <figcaption>پاسخ وردپرس مرجع آموزش های رایگان</figcaption> </figure> |
انواع ورودی ها در HTML5
اضافه شدن چند نوع ورودی در HTML5 :
- color
- date
- month
- number
- range
- search
- tel
- time
- url
- week
انواع ورودی های جدید که توسط مرورگرهای وب قدیمی تر پشتیبانی نمی شود، به صورت <input= “text”> رفتار می کنند .
نوع ورودی Color
<input type=”color”> مورد استفاده برای رنگ فیلد ورودی است .
بسته به پشتیبانی از مرورگر، جمع کننده رنگ می توانید در فیلد ورودی نشان می دهد .
|
1 2 3 |
<form> <input type=”color” name=”color”> </form> |
نوع ورودی Date
<input type=”date”> مورد استفاده برای ورودی یک تاریخ است .
برای نشان دادن یک انتخابگر تاریخ در فیلد ورودی ، به پشتیبانی مرورگر بستگی دارد .
|
1 2 3 4 5 6 |
<form> Enter a date before 1980-01-01: <input type=”date” name=”bday” max=”1979-12-31″><br> Enter a date after 2000-01-01: <input type=”date” name=”bday” min=”2000-01-02″><br> </form> |
نوع ورودی Datetime-local
<input type=”datetime-local”> مورد استفاده برای یک فیلد ورودی تاریخ و زمان، با ناحیه (جدول) تاریخ است .
نشان دادن یک فیلد ورودی تاریخ و زمان با ناحیه (جدول) تاریخ ، به پشتیبانی مرورگر بستگی دارد .
|
1 2 3 |
<form> <input type=”datetime-local”> </form> |
نوع ورودی Email
<input type=”email”> مورد استفاده برای یک فیلد ورودی که باید حاوی یک نشانی ایمیل باشد .
نشان دادن یک فیلد ورودی تاریخ با ناحیه (جدول) تاریخ ، به پشتیبانی مرورگر بستگی دارد .
بعضی گوشی های هوشمند نوع فیلد ایمیل را تشخیص می دهند ، و برای ورودی ایمیل “com.” و “@” را به صفحه کلید اضافه می کند .
|
1 2 3 |
<form> <input type=”email”> </form> |
نوع ورودی Month
<input type=”month”> مورد استفاده برای یک فیلد ورودی ماه و سال همراه با جدول تاریخ کند .
نشان دادن یک فیلد ورودی تاریخ با ناحیه (جدول) تاریخ ، به پشتیبانی مرورگر بستگی دارد .
|
1 2 3 |
<form> <input type=”month” name=”bdaymonth”> </form> |
نوع ورودی Number
<input type=”number”> مورد استفاده برای یک فیلد ورودی عدد است .
شما همین طور می توانید محدودیتی در اعدادی که پذیرفته می شوند تنظیم کنید .
در مثال زیر نمایش یک فیلد ورودی عددی ، در آن شما می توانید یک مقدار از ۱ تا ۵ را وارد کنید :
|
1 2 3 |
<form> <input type=”number” name=”quantity” min=”1″ max=”5″> </form> |
نوع ورودی Range
<input type=”range”> یک رنج کنترل بین شماره هاست برای وارد کردن یک شماره که مقدار دقیق مهم نیست . رنج در حالت پیش فرض بین ۰ تا ۱۰۰ است .
با این حال ، شما می توانید محدودیت هایی از اعداد را ایجاد کنید با مقدار دادن به min و max ، حتی می توانید ویژگی step برای تغییر روند اعداد تعریف کنید :
|
1 2 3 |
<form> <input type=”range” name=”points” min=”0″ max=”10″> </form> |
نوع ورودی Search
<input type=”search”> مورد استفاده برای فیلدهای جستجو (فیلد جستوجو از یک فیلد متنی و یک دکمه جستوجو تشکیل می شود).
|
1 2 3 |
<form> <input type=”search” name=”search”> <span style="color: #008000;"></form></span> |
نوع ورودی Tel
<input type=”tel”> مورد استفاده برای فیلد ورودی شماره تلفن ها است .
نوع tel در حال حاضر فقط در نسخه سافاری ۸ پشتیبانی می شود .
|
1 2 3 |
<form> <input type=”tel” name=” Telephone”> </form> |
نوع ورودی Time
<input type=”time”> مورد استفاده برای فیلد ورودی زمان تنها است .
نشان دادن یک فیلد ورودی زمان ، به پشتیبانی مرورگر بستگی دارد .
|
1 2 3 |
<form> <input type=”time” name=”usr_time”> </form> |
نوع ورودی Url
<input type=”url”> مورد استفاده برای یک فیلد ورودی آدرس URL است .
نشان دادن یک فیلد ورودی آدرس URL ، به پشتیبانی مرورگر بستگی دارد .
بعضی گوشی های هوشمند نوع فیلد آدرس URL را تشخیص می دهند ، و برای ورودی آدرس “com.” را به صفحه کلید اضافه می کند .
|
1 2 3 |
<form> <input type=”url” name=”home”> </form> |
نوع ورودی Week
<input type=”week”> مورد استفاده برای یک فیلد ورودی انتخاب هفته و سال است .
نشان دادن یک فیلد ورودی انتخاب هفته و سال ، به پشتیبانی مرورگر بستگی دارد .
|
1 2 3 |
<form> <input type=”week” name=”week”> </form> |
این جلسه آموزش هم همین جا به پایان رسید امید وارم که مفید بوده باشه تا یکی دیگه از جلسات آموزش وب سایت پاسخ وردپرس خدا نگهدار
هنوز بررسی‌ای ثبت نشده است.