تاریخچه برند کرویت محصول آلمان Crivit (تک اسپرت)

معرفی و تاریخچه برند کرویت (Crivit)

برند کریویت (Crivit) یکی از زیرشاخه های برند لیدل (LIDL) آلمان می باشد که به طور اختصاصی انواع پوشاک و کفش ورزشی زنانه و مردانه عرضه می نماید. در ادامه با تک اسپرت همراه باشید.

برند کریویت

لیدل که به تولید و عرضه محصولات با کیفیت و در عین حال اقتصادی شهرت دارد، علاوه بر فروشگاه های زنجیره ای در اکثر کشورهای اتحادیه اروپا و آمریکا، دارای فروشگاه اینترنتی نیز می باشد. این غول بازار خرده فروشی هم اکنون دارای بیش از 10800 فروشگاه در 29 کشور جهان می باشد که به فروش انواع کالاهای خوراکی و غیر خوراکی می پردازد. یکی از بزرگترین افتخارات این بررند، عرضه محصولات مرغوب با قیمت مناسب به تمام مشتریان خود می باشد. (فروشگاه تک اسپرت)

همانطور که گفته شد برند کریویت (Crivit)، زیرشاخه برنند لیدل (LIDL) است. دیگر برندهای زیر شاخه لیدل، برندهای لوپیلو (Lupilu)، پپرتس (Pepperts)، لیورجی (Livergy)، اسمارا (Esmara) و نوبل لیگا (Nobel League) می باشند که هر کدام به شاخه خاصی از پوشاک اختصاص دارند. کریویت دامنه گسترده ای از پوشاک و کفش ورزشی زنانه و مردانه را پوشش می دهد که شامل تیشرت، تاپ، شلوار، شلوارک، سویشرت، کاپشن، کفش و … می باشد. به علاوه کریویت محصولات ورزشی حرفه ای خود شامل انواع لباس دوچرخه سواری، دوندگی، یوگا و … را با برند کریویت پرو (Crivit PRO) عرضه می نماید. فروشگاه اینترنتی تک اسپرت نیز افتخار دارد دامنه وسیعی از محصولات متنوع، با کیفیت و اقتصادی برند کریویت و کریویت پرو را با حفظ اصول این ببرند موفق آلمانی به شما ارائه نماید که می توانید آن ها را در همین صفحه مشاهده کنید.(فروشگاه تک اسپرت)

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

مناطق اعجاز آوری که قبل از مرگ باید حتما ببینید

اعجاز آورترین مکان های جهان

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

در کره خاکی ما انسانها همیشه مناطقی وجود داشته اند که بطور شگفت انگیزی چشم نواز بوده اند؛ همه انسانها دارای یک حس کنجکاو طلبانه هستند که آنها را وادار میکند تا به جاهایی قدم بگذارند که زمانی تنها یک رویا و آرزویی بیش نبوده. سفر به ماه و فضا یکی از بزرگترین و حیاتی ترین دستاورد علمی بشر خاکی بوده که انسانها را به دریچه ای جدید از یک زندگی جدید راهی کرده است. اما موضوع به همینجا ختم نمیشود؛ در کره زمین، خانه گذشته و حال ما مکانهایی هستند که انسانها به آنجا دست نیافته اند و در این بین مناطقی نیز وجود دارند که بسیار دیدنی تر و واقعی تر از تخیلات ما می باشند، مناظری که با تمام رویایی بودنشان در حقیقت وجود دارند باماروسفر همراه باشید

پترا – اردن(باماروسفر)

پلیتویک – کرواسی (باماروسفر)

پریکستولن – نروژ (باماروسفر)

سانتورینی – یونان

سقطرا – یمن

دیوار بزرگ چین

سنگ های رملی- آریزونا، آمریکا

آنتلوپ کنیون – آمریکا

دریاچه کاررا

دریاچه مورینی – کانادا

پاموک کاله – ترکیه

قوس بری هد – کانادا

جزیره بورا بورا

گراند کنیون – آمریکا

ایسلند

جزایر فی فی – تایلند

ماچو پیچو – پرو

جزایر مالدیو

مانیومنت ولی – آمریکا

غار کریستال – مکزیک

باگان – میانمار

آبشار آنجل – ونزوئلا

انگکور وات – کامبوج

آزور

پارک برایس کنیون – یوتا، آمریکا

اهرام جیزه – مصر

خلیج ها لانگ – ویتنام

استخر همیلیتون – تگزاس، آمریکا

متورا – یونان

جزیره پالاوان – فیلیپین

یخچال پریتو مورینو – آرژانتین

پوزیتانو – ایتالیا

سالاردو ییونی – بولیوی

سیشل

تانا لوت – بالی

کوه تیانژی – چین

Twelve Apostles – استرالیا

اولورو – استرالیا

پارک ملی یوسیمیتی – کالیفرنیا، آمریکا

آموزش گام به گام و تصویری HTML قسمت بیستم و هشتم (ایران گستر)

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]

عناصر معنایی (Semantics)

Semantics به خودی خود و جدا از دنیای برنامه نویسی، مطالعه ی معنی کلمات و عبارات در یک زبان است و از دروس دانشگاهی بسیاری از رشته های علوم انسانی می باشد. اما در دنیای وب زمانی که می گوییم عناصر Semantic یعنی عناصری که فقط عنصر ظاهری نیستند بلکه معنی خاصی را نیز با خودشان دارند. این معنی از یک طرف برای مرورگر و موتور های جست و جو است و از طرف دیگر برای توسعه دهندگان.(ایران گستر)

عناصر غیر معنایی یا non-semantic مانند <div> و <span> معنا یا اطلاعاتی را در مورد محتوای خود به ما نمی دهند اما عناصر معنایی یا semantic مانند <form> و <table>و <article> مشخص می کنند که چه نوع محتوایی دارند.(ایران گستر)

قبل از ارائه ی HTML5 برای مشخص کردن قسمت های مختلف صفحه از کدهایی مثل <“div id=”nav> یا <“div class=”header> استفاده می کردیم اما امروزه چنین کاری منسوخ شده است (متاسفانه برخی از توسعه دهندگان هنوز هم این کار را می کنند). اجزای مختلف یک صفحه در HTML5 به این شکل است:(ایران گستر)

طرح کلی HTML5

بنابراین HTML5 عناصر معنایی جدیدی را برای پایه ریزی این طرح به ما می دهد:(ایران گستر)

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

عنصر <section>

این عنصر وظیفه ی تعریف یک قسمت خاص را در سند شما بر عهده دارد. بر اساس documentation ارائه شده از سمت W3C، این عنصر:(ایران گستر)

A section is a thematic grouping of content, typically with a heading.

یعنی عنصر <section> مجموعه ای از محتوا را که موضوع و مضمون مشابهی دارند در یک قسمت جمع می کند و معمولا یک heading نیز به آن ها می دهد. بنابراین صفحه ی اصلی سایت شما می تواند به <section> های مختلفی مانند مقدمه، محتوا، اطلاعات تماس و … تقسیم شود.(ایران گستر)

مثال:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <body>   <section>   <h1>WWF</h1>   <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>   <section>   <h1>WWF's Panda symbol</h1>   <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>   </body> </html>

مشاهده ی خروجی در JSBin

عنصر <article>

این عنصر محتوای مستقل و جداگانه ای در صفحه را مشخص می کند. یک <article> باید به خودی خود با معنی باشد به طوری که اگر تمام قسمت های دیگر صفحه را حذف کنیم باز هم آن قسمت به صورت جداگانه قابل خواندن و درک باشد و به هیچ عنوان به قسمت های دیگر وابسته نباشد. نمونه های <article>  عبارت اند از:(ایران گستر)

• پست هایی که کاربران در یک فروم (انجمن اینترنتی) می گذارند.
• پست هایی که در وبلاگ ها می گذاریم.
• مقالات مختلف در سایت های خبری.

به مثال زیر توجه کنید:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11

<!DOCTYPE html> <html> <body>   <article>   <h1>What Does WWF Do?</h1>   <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>   </body> </html>

مشاهده ی خروجی در JSBin

تو در تو سازی <article> در <section>

آیا تو در تو سازی <article> در <section> و یا بالعکس شدنی است؟ <article> مشخص کننده ی مقالات مستقل و جداگانه در صفحه ی ما بود. <section> نیز تعریف کننده ی یک قسمت خاص در صفحه ی ما بود.(ایران گستر)

سوال اینجاست: آیا قانون خاصی برای ترکیب این عناصر معنایی به جز معنی شان وجود دارد؟ پاسخ شما خیر است!

حتما در بعضی از وب سایت های اینترنتی دیده اید که <section>  درون تگ <article>  قرار دارد و <article> نیز دارای تگ های <section> است. همچنین برعکس این موضوع را نیز مشاهده کرده اید. به طور مثال ممکن است در یک خبرگزاری اینترنتی، مقالات ورزشی در یک <article> گذاشته شوند که قسمت (section) ورزشی قرار دارند، و از طرفی همان <article> ممکن است قسمت (section) های فنی داشته باشد. بنابراین تو در تو سازی (nesting) این عناصر بر پایه ی معنای آن ها است.(ایران گستر)

عنصر <header>

این عنصر یک header (موضوع) برای کل سند شما و یا یک section در صفحه ی شما تعیین می کند. در واقع باید از <header> به صورت نگه دارنده ی اطلاعاتی مانند موضوع و … استفاده کرد و از آن جایی که می توان چند مقاله در یک صفحه داشت، می توانیم چندین <header> نیز در یک صفحه داشته باشیم.(ایران گستر)

به مثال زیر توجه کنید:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<!DOCTYPE html> <html> <body>   <article>   <header>     <h1>What Does WWF Do?</h1>     <p>WWF's mission:</p>   </header>   <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>   </body> </html>

مشاهده ی خروجی در JSBin

عنصر <footer>

این عنصر برای صفحه ی شما یک footer (قسمت پایینی وب سایت یا یک مقاله که معمولا اطلاعات تکمیلی مانند اطلاعات تماس یا نام نویسنده در آن قرار می گیرد) تعیین می کند. بنابراین <footer> باید اطلاعاتی در مورد عنصر نگه دارنده اش داشته باشد و معمولا شامل این موارد می شود: نام نویسنده، اطلاعات مربوط به کپی رایت، شرایط و قوانین استفاده، اطلاعات تماس و …. . از آنجا که می توان چندین مقاله در یک صفحه داشت، می توانیم چندین <footer> نیز در یک صفحه داشته باشیم.(ایران گستر)

به مثال زیر توجه کنید:

 

1 2 3 4 5 6 7 8 9 10 11 12

<!DOCTYPE html> <html> <body>   <footer>   <p>Posted by: Amir Zouerami</p>   <p>Contact information: <a href="mailto:[e-mail]">   [e-mail]</a>.</p> </footer>   </body> </html>

مشاهده ی خروجی در JSBin

عنصر <nav>

این عنصر لینک های navigation (مسیریابی – لینک هایی که در بالای سایت هستند مانند «خانه» و «تماس با ما» و …) را در بر می گیرد. نکته ای که باید به آن توجه کنید این است که لازم نیست هر لینکی داخل <nav> قرار بگیرد. <nav> ها تنها برای مجموعه ای از لینک ها هستند که قرار است کاربر را به قسمت خاصی منتقل کنند. مثال:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13

<!DOCTYPE html> <html> <body>   <nav>   <a href="https://www.roxo.ir/series/html-tutorials/">HTML</a> |   <a href="https://www.roxo.ir/series/html-tutorials/">CSS</a> |   <a href="https://www.roxo.ir/series/javascript-tutorials/">JavaScript</a> |   <a href="https://www.roxo.ir/series/sql-language-tutorial/">MySQL</a> </nav>   </body> </html>

مشاهده ی خروجی در JSBin

عنصر <aside>

این عنصر محتوایی را تعیین می کند که در کنار محتوای اصلی قرار می گیرد (مانند sidebar ها – مثلا لیست مقالات پر بازدید که به صورت عمودی در برخی از سایت ها موجود است). محتوای درون <aside> باید با محتوای پیرامونش مرتبط باشد.(ایران گستر)

مثال:

 

1 2 3 4 5 6 7 8 9 10 11 12 13

<!DOCTYPE html> <html> <body>   <p>My family and I visited The Epcot center this summer.</p>   <aside>   <h4>Epcot Center</h4>   <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>   </body> </html>

مشاهده ی خروجی در JSBin

عنصر <figure>

هدف <figure> ارائه ی توضیحات متنی برای یک تصویر است. در HTML5 می توانیم این توضیح متنی را به همراه تصویر مورد نظر در <figure> قرار دهیم. بنابراین درون <figure> یک تگ img و یک تگ <figcaption> قرار دارد که حاوی توضیحات متنی است.(ایران گستر)

مثال:

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!DOCTYPE html> <html> <body>   <h2>Places to Visit</h2>   <p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>   <figure>   <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" style="width:100%">   <figcaption dir='rtl'>خانه های Trulli در ایتالیا</figcaption> </figure>   </body> </html>

مشاهده ی خروجی در JSBin

چرا عناصر معنایی؟

در نسخه های قبلی HTML مانند HTML4 توسعه دهندگان بر اساس سلیقه ی خود از هر عنصری که می خواستند برای ایجاد هر قسمتی از صفحه که می خواستند استفاده می کردند. این موضوع باعث می شود که موتور های جست و جو نتوانند قسمت های مختلف یک صفحه را تشخیص دهند اما با عناصر HTML5 این کار راحت تر شده است.(ایران گستر)

آموزش گام به گام و تصویری HTML قسمت بیستم و هفتم (ایران گستر)

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]

HTML5 چیست؟

برای درک HTML5 بهتر است تاریخچه ای کوتاه از زبان HTML را بدانیم. ما از سال 1991 تا سال 1999 شاهد عرضه ی نسخه های 1 تا 4 از HTML بوده ایم. سپس در سال 2000 کنسرسیوم جهانی وب (W3C) پیشنهاد استفاده از XHTML 1.0 را داد که توسعه دهندگان را مجبور به نوشتن کد های تمیز و دقیق می کرد. این مسئله تا جایی پیش رفت که در سال 2004 کنسرسیوم جهانی وب تصمیم گرفت که دیگر HTML را توسعه ندهد بلکه فقط به XHTML بپردازد.(ایران گستر)

سپس در سال 2004 نهاد و گروهی به نام WHATWG (مخفف Web Hypertext Application Technology Working Group) ایجاد شد که هدفشان توسعه ی HTML به صورت مرتب بود، به نحوی که با نسخه های قدیمی هم سازگاری داشته باشد. این گروه طی سال های 2004 تا 2006 توانست پشتیبانی اکثر شرکت های سازنده ی مرورگرهای اینترنتی مطرح را به دست آورد. سپس در سال 2006 کنسرسیوم جهانی وب اعلام کرد که از WHATWG پشتیبانی می کند.(ایران گستر)

در نهایت در سال 2008 اولین نسخه ی آزمایشی HTML5 منتشر شد. سپس در سال 2012 گروه WHATWG و کنسرسیوم جهانی وب تصمیم گرفتند که از هم جدا شوند چرا که WHATWG میخواست زبان HTML را به صورتی توسعه دهد که مرتبا بروزرسانی و ویرایش شود، و در عین بروزرسانی با قابلیت های قدیمی نیز سازگار باشد. به همین دلیل اولین نسخه ی ارائه شده توسط گروه WHATWG در سال 2012 ارائه شد. از طرفی کنسرسیوم جهانی وب قصد داشت استانداردی مشخص و قطعی برای HTML5 و XHTML بنویسد. بنابراین اولین نسخه ی پیشنهادی HTML5 طبق اعلام کنسرسیوم جهانی وب در 28 اکتبر سال 2014 ارائه شد. متعاقبا HTML5.1 و HTML5.2 نیز به ترتیب در 3 اکتبر 2017 و 14 دسامبر 2017 ارائه شدند.(ایران گستر)

بنابراین همانطور که میدانید HTML5 نسخه ی جدیدتر HTML بوده و در صدد ارتقاء تجربه ی کاربری و کدنویسی افراد در دنیای وب تلاش هایی را انجام داده است. در این مقاله میخواهیم بیشتر با این نسخه از HTML آشنا شویم.(ایران گستر)

DOCTYPE مورد نیاز برای تعریف HTML5 بسیار ساده است:

 

1	<!DOCTYPE html>

همچنین تعیین encoding مناسب نیز بسیار راحت شده است:(ایران گستر)

 

1	<meta charset="UTF-8">

البته باید بدانید که encoding پیش فرض در HTML5 همان UTF-8 است.(ایران گستر)

بنابراین یک سند عادی به این شکل خواهد بود:

 

1 2 3 4 5 6 7 8 9 10 11 12 13

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> <body>   <h1>This is a Heading</h1> <p>This is a paragraph.</p>   </body> </html>

در HTML5 عناصر جدیدی نیز معرفی شده اند:(ایران گستر)

• عناصر معنایی جدید مانند: <header> و <footer> و <article> و <section> و …
• attribute های جدید برای فرم ها مانند: number و date و time و calendar و range و …
• عناصر گرافیکی مانند: <svg> و <canvas>
• عناصر چند رسانه ای جدید: <audio> و <video>

همچنین API جدیدی نیز معرفی شده است که عبارت اند از:(ایران گستر)

• HTML Geolocation
• HTML Drag and Drop
• HTML Local Storage
• HTML Application Cache
• HTML Web Workers
• HTML SSE

بعدا با این موارد آشنا خواهیم شد.

از طرفی عناصر مختلفی نیز منسوخ شدند و شما دیگر نباید از آن ها استفاده کنید:(ایران گستر)

عنصر منسوخ	نسخه ی جدید آن
<acronym>	<abbr>
<applet>	<object>
<basefont>	قوانین CSS
<big>	قوانین CSS
<center>	قوانین CSS
<dir>	<ul>
<font>	قوانین CSS
<frame>	–
<frameset>	–
<noframes>	–
<strike>	قوانین CSS یا <s> یا <del>
<tt>	قوانین CSS

 

ناسازگاری مرورگرهای قدیمی

وقتی صحبت از HTML5 میکنیم بسیاری از توسعه دهندگان نگران موضوع عدم سازگاری با تکنولوژی های قدیمی هستند اما شما می توانید به مرورگرهای قدیمی تر بگویید که در مواجهه با HTML5 چکار کنند. همانطور که حدس می زنید، HTML5 در تمام مرورگرهای امروزی پشتیبانی می شود اما در مورد مرورگر های قدیمی تر نکته ی جالبی وجود دارد؛ تمام مرورگرها، چه جدید و چه قدیمی، در برخورد با عنصری که آن را نشناسند، آن را یک عنصر inline در نظر می گیرند. به همین دلیل شما می توانید به مرورگرهای قدیمی یاد بدهید که چطور با عناصر HTML5 که برایشان ناشناخته است کنار بیایند. شما حتی می توانید به IE6 که متعلق به Windows XP 2001 است نیز یاد بدهید که چطور با HTML5 کار کند.(ایران گستر)

HTML5 هشت عنصر معنایی (semantic) جدید را معرفی کرده است که همگی از نوع block هستند. بنابراین برای حل مشکل عدم سازگاری می توانیم دوباره آن ها را در CSS به صورت block تعریف کنیم:(ایران گستر)

 

1 2 3

header, section, footer, aside, nav, main, article, figure {   display: block; }

شما همچنین می توانید عناصر جدیدی را در HTML ایجاد کنید. به طور مثال در کد زیر یک عنصر جدید به نام <myHero> را به دلخواه خود ساخته ایم و سپس آن را استایل دهی کرده ایم:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<!DOCTYPE html> <html> <head> <script>document.createElement("myHero")</script> <style> myHero {   display: block;   background-color: #dddddd;   padding: 50px;   font-size: 30px; }   </style> </head> <body>   <h1>A Heading</h1> <myHero>My Hero Element</myHero>   </body> </html>

مشاهده ی خروجی در JSBin

کد کوتاه جاوا اسکریپت در مثال بالا (("document.createElement("myHero) برای ایجاد عناصر در مرورگرهای IE 9 و قدیمی تر لازم است.(ایران گستر)

شما می توانید از این راه حل برای تمام مرورگرها استفاده کنید اما متاسفانه مرورگرهای IE8 و نسخه های قدیمی تر آن اجازه ی استایل دهی به عناصر ناشناخته را نمی دهند. خوشبختانه آقای Sjoerd Visscher کد جاوا اسکریپتی به نام HTML5Shiv ساخته است که به مرورگرهایی مانند IE8 و نسخه های قدیمی تر اجازه ی این کار را می دهد.(ایران گستر)

برای استفاده از HTML5Shiv باید آن را در قسمت <head> و درون تگ <script>  قرار دهید. شما می توانید آن را در صفحه ی گیت هاب HTML5Shiv دانلود کنید و یا کد زیر را به مرورگر خود اضافه کنید:(ایران گستر)

 

1 2 3 4 5

<head>   <!--[if lt IE 9]>     <script src="/js/html5shiv.js"></script>   <![endif]--> </head>

بنابراین یک مثال کامل از HTML5Shiv به این شکل خواهد بود:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--[if lt IE 9]>   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> </head> <body>   <section>   <h1>Famous Cities</h1>   <article> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </article>   <article> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </article>   <article> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </article>   </section>   </body> </html>

مشاهده ی خروجی در JSBin

نکته: تمام این موارد فقط و فقط جهت اطلاع شما گفته شده است. در دنیای واقعی نیازی به این کار نیست؛ توجه کنید که ما (در زمان نگارش این مقاله) در سال 2019 هستیم و به هیچ عنوان نباید نگران سازگاری با مرورگرهای IE8 و غیره باشیم. این مرورگرهای قدیمی خیلی وقت است که از رده خارج شده اند و به توصیه ی تمام محققین و متخصصین باید پشتیبانی از آن ها را رها کرد.(ایران گستر)

آموزش گام به گام و تصویری HTML قسمت بیستم و ششم (ایران گستر)

HTML

ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.

[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]

ویژگی value

این ویژگی مقدار اولیه ی یک input در فرم ما را مشخص می کند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The value Attribute</h2> <p>The value attribute specifies the initial value for an input field:</p>   <form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی readonly

این ویژگی باعث می شود که input ما read only شود یعنی هیچکس نتواند آن را تغییر دهد:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The readonly Attribute</h2> <p>The readonly attribute specifies that the input field is read only (cannot be changed):</p>   <form action=""> First name:<br> <input type="text" name="firstname" value ="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی disabled

این ویژگی باعث می شود که input ما غیرفعال شود. input ای که غیرفعال باشد، غیر قابل کلیک کردن و تغییر دادن است و همچنین مقدار آن در هنگام submit (ارسال نهایی) فرم به سرور ارسال نمی شود:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The disabled Attribute</h2> <p>The disabled attribute specifies that the input field is disabled:</p>   <form action=""> First name:<br> <input type="text" name="firstname" value ="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی size

این ویژگی سایز یک input را بر اساس تعداد کاراکتر تعیین می کند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The size Attribute</h2> <p>The size attribute specifies the size (in characters) of the input field:</p>   <form action=""> First name:<br>   <input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی maxlength

این ویژگی حداکثر طول مجاز یک input را برای کاربر تعیین می کند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The maxlength Attribute</h2> <p>The maxlength attribute specifies the maximum allowed length for the input field:</p>   <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> <br> Last name:<br> <input type="text" name="lastname"> </form>   </body> </html>

مشاهده ی خروجی در JSBin

به طور مثال اگر مقدار maxlength را 5 بگذارید دیگر فرم اجازه ی تایپ بیشتر از 5 کاراکتر را به کاربر نمی دهد اما توجه داشته باشید که این ویژگی هیچ هشداری به کاربر نمیدهد بنابراین اگر میخواهید پیامی برای کاربر نمایش داده شود و به او بگوید که این فیلد محدود است و یا اینکه چرا این فیلد محدود است باید از کد های جاوا اسکریپت یا روش های دیگر استفاده کنید.(ایران گستر)

هشدار: تمام روش های محدود سازی با HTML (مانند مثال بالا) و Javascript قابل دور زدن هستند و اصلا امن نیستند، بلکه تنها برای راحتی سرور شما و خود کاربران ایجاد شده اند. لازم است که حتما و حتما داده ها را در سمت سرور نیز چک کنید.(ایران گستر)

 

ویژگی autocomplete

این ویژگی می گوید که آیا یک فرم قابلیت autocomplete (تکمیل خودکار) داشته باشد یا خیر. زمانی که autocomplete فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس مقادیری که کاربر قبلا وارد کرده است پر می کند. autocomplete با عنصر <form> و <input> های متنی، جست و جو، URL، تلفن، ایمیل، رمز عبور، datepicker ها، محدوده و رنگ ها کار می کند.(ایران گستر)

نکته: شما می توانید autocomplete را برای کل فرم (<form>) فعال کرده و سپس برای برخی از input ها غیر فعالش کنید.(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!DOCTYPE html> <html> <body>   <h2>The autocomplete Attribute</h2>   <form action="/action_page.php" autocomplete="on">   First name:<input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   E-mail: <input type="email" name="email" autocomplete="off"><br>   <input type="submit"> </form>   <p dir='rtl'>فرم را پر کرده و سپس ارسال کنید. حالا یک بار صفحه را refresh کنید تا ببینید قابلیت تکمیل خودکار چطور کار می کند.</p> <p dir='rtl'>توجه کنید که قابلیت تکمیل خودکار برای email غیر فعال است.</p>   </body> </html>

مشاهده ی خروجی

برای مشاهده ی خروجی در صفحه مورد نظر کلید Run را بزنید.

ویژگی novalidate

این ویژگی میگوید که داده های فرم در هنگام ارسال نباید Validate (اعتبار سنجی) شوند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <body>   <h2>The novalidate Attribute</h2> <p>The novalidate attribute specifies that the form data should not be validated when submitted.</p>   <form action="/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>   <p dir='rtl'><strong>هشدار:</strong> این قابلیت در مرورگر های internet explorer 9 و نسخه های قبل آن و همچنین در safari 10 و نسخه های قبل آن کار نمی کند.</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی autofocus

این ویژگی باعث می شود که پس از بارگذاری صفحه، یکی از input های ما (به انتخاب خودمان) focus بگیرد (یعنی بدون کلیک کاربر فعال شود):(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The autofocus Attribute</h2> <p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>   <form action="/action_page.php">   First name:<input type="text" name="fname" autofocus><br>   Last name: <input type="text" name="lname"><br>   <input type="submit"> </form>   <p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>   </body> </html>

مشاهده ی خروجی در JSBin

پس از ورود به صفحه ی خروجی دکمه ی RUN را بزنید و متوجه خواهید شد که فیلد اول انتخاب شده است و آماده ی تایپ کردن شماست! این همان حالت focus است.(ایران گستر)

ویژگی form

این ویژگی مشخص می کند که فلان <input> متعلق به کدام فرم و یا چند فرم است:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The form Attribute</h2> <p>The form attribute specifies one or more forms an input element belongs to.</p>   <form action="/action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form>   <p dir='rtl'>فیلد Last name که در زیر مشاهده می کنید خارج از form بالا است اما هنوز هم به آن تعلق دارد.</p> Last name: <input type="text" name="lname" form="form1">   </body> </html>

مشاهده ی خروجی در JSBin

نکته: در صورتی که میخواهید یک فیلد را به چند فرم نسبت دهید از ویرگول انگلیسی بین آن ها استفاده کنید.(ایران گستر)

ویژگی formaction

این ویژگی مسیر فایلی را مشخص می کند که قرار است فرم ما را پردازش کند. این ویژگی action را باطل می کند و با "type="submit و "type="image استفاده می شود:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!DOCTYPE html> <html> <body>   <h2>The formaction Attribute</h2> <p>The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.</p>   <form action="/action_page.php">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="Submit"><br>   <input type="submit" formaction="/action_page2.php" value="Submit to another page"> </form>   <p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی formenctype

این ویژگی encoding ارسال فرم را تعیین می کند (فقط برای فرم های “method=”post) و attribute قبلی فرم یعنی enctype را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The formenctype Attribute</h2> <p>The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post").</p>   <form action="/action_page_binary.asp" method="post">   First name: <input type="text" name="fname"><br>   <input type="submit" value="Submit">   <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form>   <p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی formmethod

این ویژگی متد HTTP برای ارسال فرم ها به action را تعیین می کند و attribute قبلی فرم یعنی method را باطل می کند. این ویژگی با "type="submit و "type="image استفاده می شود:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!DOCTYPE html> <html> <body>   <h2>The formmethod Attribute</h2> <p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>   <form action="/action_page.php" method="get">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="Submit">   <input type="submit" formmethod="post" value="Submit using POST"> </form>   <p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی formnovalidate

این ویژگی، novalidate را باطل کرده و تغییر میدهد و با  "type="submit استفاده می شود:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The formnovalidate Attribute</h2>   <form action="/action_page.php">   E-mail: <input type="email" name="userid"><br>   <input type="submit" value="Submit"><br>   <input type="submit" formnovalidate value="Submit without validation"> </form>   <p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>     </body> </html>

مشاهده ی خروجی در JSBin

ویژگی formtarget

این ویژگی مشخص می کند که مرورگر جواب دریافتی از سرور (پس از ارسال فرم) را کجا نمایش دهد. این ویژگی attribute قبلی فرم یعنی target را باطل می کند و این ویژگی با "type="submit و "type="image استفاده می شود:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html> <html> <body>   <h2>The formtarget Attribute</h2> <p>The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.</p>   <form action="/action_page.php">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="submit" value="Submit as normal">   <input type="submit" formtarget="_blank" value="Submit to a new window/tab"> </form>     <p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی height و width

این دو ویژگی عرض و ارتفاع <"input type="image> را مشخص می کنند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!DOCTYPE html> <html> <body>   <h2>The height and width Attributes</h2> <p>The height and width attributes specify the height and width of an input type="image" element.</p>   <form action="/action_page.php">   First name: <input type="text" name="fname"><br>   Last name: <input type="text" name="lname"><br>   <input type="image" src="https://www.w3schools.com/html/img_submit.gif" alt="Submit" width="48" height="48"> </form>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی list

این ویژگی به <datalist> اشاره می کند که گزینه های از پیش تعریف شده ای برای <input> دارد:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<!DOCTYPE html> <html> <body>   <h2>The list Attribute</h2> <p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>   <form action="/action_page.php" method="get">   <input list="browsers" name="browser"> <datalist id="browsers">   <option value="Internet Explorer">   <option value="Firefox">   <option value="Chrome">   <option value="Opera">   <option value="Safari"> </datalist> <input type="submit"> </form>   <p dir='rtl'><strong>هشدار:</strong>   این قابلیت در internet explorer 9 و نسخه های قبل تر آن  و همچنین در safari پشتیبانی نمی شود.   </p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی min و max

این دو ویژگی حداقل و حداکثر مقادیر مجاز برای <input> را تعیین می کنند و با input های عددی، محدوده ای، تاریخ، datetime-local، ماه، زمان و هفته کار می کند (اگر با انواع input ها آشنا نیستید به قسمت های قبل از همین سری آموزشی مراجعه کنید):(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<!DOCTYPE html> <html> <body>   <h2>The min and max Attributes</h2> <p>The min and max attributes specify the minimum and maximum values for an input element.</p>   <form action="/action_page.php">     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>     Quantity (between 1 and 5):   <input type="number" name="quantity" min="1" max="5"><br>     <input type="submit">    </form>   <p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>   <p dir='rtl'><strong>هشدار:</strong>این دو ویژگی اگر برای تاریخ و زمان به کار بروند در مرورگر Internet explorer 10 کار نمی کنند.</p>     </body> </html>

مشاهده ی خروجی در JSBin

ویژگی multiple

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html> <html> <body>   <h2>The multiple Attributes</h2> <p>The multiple attribute specifies that the user is allowed to enter more than one value in the input element.</p>   <form action="/action_page.php">   Select images: <input type="file" name="img" multiple>   <input type="submit"> </form>   <p>Try selecting more than one file when browsing for files.</p>     <p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی pattern

این ویژگی از regular expression (عبارات با قاعده) استفاده می کند تا محتوای فرم را چک کند و با انواع input های متنی، جست و جو، URL، تلفن، ایمیل و رمز عبور کار می کند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <body>   <h2>The pattern Attribute</h2> <p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>   <form action="/action_page.php">   Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">   <input type="submit"> </form>   <p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>   </body> </html>

مشاهده ی خروجی در JSBin

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

نکته: برای اینکه به کاربر کمک کنید تا بهتر متوجه الگوی درخواستی بشود از attribute ای به نام title استفاده کنید.(ایران گستر)

ویژگی placeholder

این ویژگی متنی کوتاه را در فیلد مورد نظر نشان می دهد تا به کاربر توضیحات خلاصه ای ارائه کند. به طور مثال اگر میخواهید به کاربر بگویید که در این قسمت با حروف انگلیسی تایپ کند می توانید از این ویژگی استفاده کنید. این ویژگی با input های متنی، جست و جو، URL، تلفن، ایمیل و رمز کاربری کار می کند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!DOCTYPE html> <html> <body>   <h2>The placeholder Attribute</h2> <p>The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).</p>   <form action="/action_page.php">   <input type="text" name="fname" placeholder="First name"><br>   <input type="text" name="lname" placeholder="Last name"><br>   <input type="submit" value="Submit"> </form>   <p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی required

این ویژگی تعیین می کند که فلان فیلد این فرم اجباری است و حتما باید پُر شود و با انواع فیلد های text, search, url, tel, email, password, date pickers, number, checkbox, radio, و file کار می کند.(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <body>   <h2>The required Attribute</h2> <p>The required attribute specifies that an input field must be filled out before submitting the form.</p>   <form action="/action_page.php">   Username: <input type="text" name="usrname" required>   <input type="submit"> </form>   <p dir='rtl'><strong>هشدار:</strong>این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن و همچنین در Safari 10.1 و نسخه های قبل تر آن کار نمی کند.</p>   </body> </html>

مشاهده ی خروجی در JSBin

ویژگی step

این ویژگی بازه های مجاز برای یک <input> را تعیین می کنند. به طور مثال اگر این ویژگی برابر با 3 باشد (“step=”3) اعداد مجاز 3- و 0 و 3 و 6 و … خواهند بود. همچنین می توانید از max و min هم به همراه آن استفاده کنید. این ویژگی با فیلد های umber, range, date, datetime-local, month, time و week کار میکند:(ایران گستر)

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <body>   <h2>The step Attribute</h2> <p>The step attribute specifies the legal number intervals for an input element.</p>   <form action="/action_page.php">   <input type="number" name="points" step="3">   <input type="submit"> </form>   <p dir='rtl'><strong>هشدار:</strong>این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>   </body> </htmlایران >

مشاهده ی خروجی در JSBin