حقوقی

روانشناسی

حقوقی

روانشناسی

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

HTML

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

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

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 است.(ایران گستر)

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

<!DOCTYPE html>

<html>

<head>

<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 تعریف کنیم:(ایران گستر)

header, section, footer, aside, nav, main, article, figure {

display: block;

}

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

<!DOCTYPE html>

<html>

<head>

<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 دانلود کنید و یا کد زیر را به مرورگر خود اضافه کنید:(ایران گستر)

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

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

<!DOCTYPE html>

<html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Famous Cities</h1>

<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>

<h2>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

</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 و غیره باشیم. این مرورگرهای قدیمی خیلی وقت است که از رده خارج شده اند و به توصیه ی تمام محققین و متخصصین باید پشتیبانی از آن ها را رها کرد.(ایران گستر)

fateme شنبه 27 مهر 1398 ساعت 12:44

0 نظر

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

</body>

</html>

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

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

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

ویژگی autocomplete

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

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

<!DOCTYPE html>

<html>

<body>

<h2>The autocomplete Attribute</h2>

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>

</form>

<p dir='rtl'>فرم را پر کرده و سپس ارسال کنید. حالا یک بار صفحه را refresh کنید تا ببینید قابلیت تکمیل خودکار چطور کار می کند.</p>

<p dir='rtl'>توجه کنید که قابلیت تکمیل خودکار برای email غیر فعال است.</p>

</body>

</html>

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

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

ویژگی novalidate

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

<!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>

E-mail: <input type="email" name="user_email">

</form>

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در مرورگر های internet explorer 9 و نسخه های قبل آن و همچنین در safari 10 و نسخه های قبل آن کار نمی کند.</p>

</body>

</html>

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

ویژگی autofocus

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

<!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>

First name:<input type="text" name="fname" autofocus><br>

Last name: <input type="text" name="lname"><br>

</form>

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

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

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

ویژگی form

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

<!DOCTYPE html>

<html>

<body>

<h2>The form Attribute</h2>

<p>The form attribute specifies one or more forms an input element belongs to.</p>

First name: <input type="text" name="fname"><br>

</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 استفاده می شود:(ایران گستر)

<!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>

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

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

ویژگی formenctype

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

<!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>

First name: <input type="text" name="fname"><br>

</form>

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

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

ویژگی formmethod

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

<!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>

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

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

ویژگی formnovalidate

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

<!DOCTYPE html>

<html>

<body>

<h2>The formnovalidate Attribute</h2>

E-mail: <input type="email" name="userid"><br>

</form>

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

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

ویژگی formtarget

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

<!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>

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

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

ویژگی height و width

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

<!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>

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

</body>

</html>

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

ویژگی list

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

<!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>

</datalist>

</form>

<p dir='rtl'><strong>هشدار:</strong>

این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari پشتیبانی نمی شود.

</p>

</body>

</html>

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

ویژگی min و max

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

<!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>

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

</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> های از نوع ایمیل و فایل کار می کند:(ایران گستر)

<!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>

Select images: <input type="file" name="img" multiple>

</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، تلفن، ایمیل و رمز عبور کار می کند:(ایران گستر)

<!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>

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

</form>

</body>

</html>

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

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

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

ویژگی placeholder

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

<!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>

<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 کار می کند.(ایران گستر)

<!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>

Username: <input type="text" name="usrname" required>

</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 کار میکند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The step Attribute</h2>

<p>The step attribute specifies the legal number intervals for an input element.</p>

</form>

<p dir='rtl'><strong>هشدار:</strong>این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>

</body>

</htmlایران >

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

fateme شنبه 27 مهر 1398 ساعت 12:44

0 نظر

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

HTML

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

HTML[/caption]

Input های HTML5

همزمان با معرفی HTML5 انواع مختلفی از input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:(ایران گستر)

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text> نمایش داده خواهد شد.(ایران گستر)

Input های رنگی

این نوع از input ها به صورت <"input type="color> مشخص می شوند و کارشان ایجاد فیلد هایی است که رنگ خاصی را انتخاب کنند. اگر مرورگر کاربر از این input پشتیبانی کند یک color picker برای کاربر نمایش داده خواهد شد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>

<p dir='rtl'>رنگ مورد نظرتان را انتخاب کنید</p>

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و safari 9.1 و نسخه های قبلی این دو مرورگر پشتیبانی نمی شود.</p>

</body>

</html>

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

Input های تاریخ

input های نوع <"input type="date> فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p>

تاریخ تولد:

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>

</html>

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

شما همچنین می توانید از attribute های min و max استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>

تاریخی قبل از سال 1980-01-01 را انتخاب کنید:<br>

تاریخی بعد از سال 2000-01-01 را انتخاب کنید:<br>

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>

</body>

</html>

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

Input های Datetime-local

این نوع از input ها با <"input type="datetime-local> مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone – منطقه ی زمانی) می باشد:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

Birthday (date and time):

</form>

<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>

</html>

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

Input های ایمیل

این نوع input ها با <"input type="email> مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.(ایران گستر)

همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید “com.” را اضافه کنند.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>

E-mail:

</form>

<b>هشدار:</b>این قابلیت در Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.</p>

</body>

</html>

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

سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.(ایران گستر)

Input های فایل

کار این نوع input ها که با <"input type="file> مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h1>File upload</h1>

<p>Show a file-select field which allows a file to be chosen for upload:</p>

<br>

یک فایل انتخاب کنید:

</form>

</body>

</html>

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

Input های ماه

نوع <"input type="month> به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select a month and year.</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

Birthday (month and year):

</form>

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>

</html>

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

Input های عددی

این نوع input ها که به صورت <"input type="number> مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.(ایران گستر)

در مثال زیر به مرورگر گفته ایم که کاربر حق دارد یک عدد بین 1 و 5 را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input field.</p>

<p>You can use the min and max attributes to add numeric restrictions in the input field:</p>

Quantity (between 1 and 5):

</form>

<p dir='rtl'><b>هشدار:</b> این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>

</body>

</html>

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

Input های محدوده

این نوع input ها با <"input type="range> مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Range Field</h2>

<p>Depending on browser support:<br>The input type "range" can be displayed as a slider control.<p>

Points:

</form>

<b>هشدار:</b>

این قابلیت در internet explorer 9 و نسخه های قبل تر از آن پشتیبانی نمی شود.

</p>

</body>

</html>

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

این نوع input ها به صورت <"input type="week> نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Week Field</h2>

<p>The <strong>input type="week"</strong> allows the user to select a week and year:</p>

<p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>

Select a week:

</form>

<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>

</body>

</html>

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

fateme شنبه 27 مهر 1398 ساعت 12:43

0 نظر

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

HTML

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

HTML[/caption]

Input های رایج و قدیمی

همانطور که در دو قسمت قبلی دیدیم، input ها قسمت مهمی از فرم های HTML هستند و ما می خواهیم در این قسمت انواع آن ها را بررسی کنیم. انواع input ها از این قرار هستند:(ایران گستر)

<"input type="button>
<"input type="checkbox>
<"input type="color>
<"input type="date>
<"input type="datetime-local>
<"input type="email>
<"input type="file>
<"input type="hidden>
<"input type="image>
<"input type="month>
<"input type="number>
<"input type="password>
<"input type="radio>
<"input type="range>
<"input type="reset>
<"input type="search>
<"input type="submit>
<"input type="tel>
<"input type="text>
<"input type="time>
<"input type="url>
<"input type="week>

ما می خواهیم این موارد را طی دو قسمت بررسی کنیم. در قسمت اول که همین قسمت می باشد، input هایی را به شما معرفی می کنیم که بسیار کاربردی بوده و سال های سال است که مورد استفاده قرار می گیرند. این نوع input ها توسط تمام برنامه نویسان وب شناخته شده هستند و سابقه ای دیرینه دارند. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند؛ این input ها تقریبا جدید تر هستند و بعضی از آن ها ممکن است در تمام مرورگر ها پشتیبانی نشوند اما امکانات بیشتری به ما می دهند. پس ابتدا برویم سراغ input های اصلی و رایج(ایران گستر)

Input های متنی

<"input type="text> به معنی این است که input ما از نوع متنی بوده و تبدیل به یک فیلد خالی برای تایپ کاربر می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Text field</h2>

<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p dir='rtl'>توجه داشته باشید که خود تگ form نمایش داده نمی شود.</p>

<p dir='rtl'>عرض پیش فرض هر فیلد 20 کاراکتر است</p>

</body>

</html>

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

Input های رمز عبور

فیلد های رمز عبور دقیقا مانند فیلد های متنی هستند بنابراین <"input type="password> هنوز هم یک فیلد خالی برای تایپ به ما می دهد اما تفاوت اینجاست که برای حفظ حریم شخصی کاربر، ظاهر هر چیزی که در این قسمت بنویسید با دایره های سیاه جایگزین می شود و کسی نمی تواند رمز تایپ شده ی شما را ببیند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Password field</h2>

<p>The <strong>input type="password"</strong> defines a password field:</p>

User name:<br>

<br>

User password:<br>

</form>

<p dir='rtl'>کاراکتر هایی که در input های رمزی تایپ می شوند دیده نمی شوند. می توانید در قسمت راست این موضوع را امتحان کنید.</p>

</body>

</html>

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

Input های ارسال فرم

<"input type="submit> بدین معنا است که input مورد نظر می خواهد فرمی را ثبت و ارسال (submit) کند. این فرم سپس به یک form-handler ارسال می شود. همانطور که قبلا هم توضیح دادیم form-handler صفحات اسکریپتی در سمت سرور هستند که کار پردازش و ذخیره ی داده های ارسالی را بر عهده دارند و آدرسشان در قسمت action مشخص می شود:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Submit Button</h2>

<p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>

</body>

</html>

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

نکته: اگر مقدار value را برای submit تعیین نکنید، یک مقدار پیش فرض برای آن تعیین می شود که معمولا همان کلمه ی submit است.(ایران گستر)

Input های پاک کردن فرم

input هایی که به صورت <"input type="reset> نوشته می شوند، معمولا یک reset button (دکمه ی ریستارت یا شروع مجدد) را ایجاد می کنند و زمانی که کاربر روی این دکمه کلیک کند تمام محتوایی که در فیلد ها نوشته است پاک می شود.(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button that will reset all form values to their default values:</p>

First name:<br>

<br>

Last name:<br>

</form>

<p dir='rtl'>اگر در فیلد های بالا مقداری را بنویسید و تغییرشان دهید، سپس روی دکمه ی reset کلیک کنید تمام محتوای فرم به حالت اولیه ی آن بازمیگردد.</p>

</body>

</html>

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

Input های radio

در جلسات قبل با radio button ها آشنا شدیم؛ آن ها به هر کاربر اجازه می دهند تا از بین چند گزینه تنها یک گزینه را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<p dir='rtl'>لطفا جنسیت خود را انتخاب کنید:</p>

<input type="radio" name="gender" value="other"> نمیخواهم اعلام کنم<br><br>

</form>

</body>

</html>

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

Input های Checkbox

input های checkbox به صورت <"input type="checkbox> ساخته می شوند؛ آن ها به کاربر اجازه می دهند که از بین چند گزینه صفر، یک، دو، سه و … یا همه را انتخاب کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<p dir='rtl'>مالک کدام موارد هستید؟</p>

<input type="checkbox" name="vehicle1" value="Bike">من دوچرخه دارم

<br>

<input type="checkbox" name="vehicle2" value="Car">من ماشین دارم

<br>

<input type="checkbox" name="bus" value="Car">من اتوبوس دارم

</form>

</body>

</html>

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

Input های دکمه ای

این نوع از input ها به صورت <"input type="button> تعریف می شوند. سوالی که در ابتدا پیش می آید این است که برخی از input های قبلی نیز دکمه می شدند. چرا به این نوع از input ها به طور خاص دکمه ای می گوییم؟ جواب این است که این نوع از input ها تنها یک دکمه هستند و کارکرد آن ها را شما و معمولا با جاوا اسکریپت مشخص می کنید. input های قبلی که تبدیل به یک دکمه شدند کارشان تعریف شده بود و از این نظر با input های دکمه ای متفاوت هستند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Input Button</h2>

</body>

</html>

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

تا اینجای کار با input های معروف HTML آشنا شدیم. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند، یعنی:(ایران گستر)

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

fateme جمعه 26 مهر 1398 ساعت 11:45

0 نظر

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

HTML

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

HTML[/caption]

عنصر <input>

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

<!DOCTYPE html>

<html>

<body>

<h2>The input Element</h2>

Enter your name:

</form>

</body>

</html>

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

نکته: اگر مقدار type را خالی بگذارید، مقدار پیش فرض که همان text است برایش تعیین می شود.(ایران گستر)

عنصر <select>

این عنصر یک لیستِ drop-down را می سازد. لیست های drop-down لیست هایی هستند که با کلیک روی آن ها می توانید از بین گزینه هایشان که نمایان می شود انتخاب کنید. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

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

نکته: این خروجی ها تنها برای نمایش ظاهر این عناصر هستند و فاقد قدرت پردازشی می باشند، بنابراین با کلیک روی submit اتفاقی نمی افتد اما در حالت واقعی داده ها پردازش خواهند شد.(ایران گستر)

هر کدام از <option> های بالا یکی از گزینه های لیست ما می باشد و در حالت پیش فرض اولین <option> بدون کلیک و در فیلد ما نمایان خواهد بود. اگر می خواهید این موضوع را تغییر دهید و <option> مورد نظر خود را گزینه ی پیش فرض کنید از selected استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute.</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

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

همچنین اگر می خواهید تعداد گزینه هایی که نمایان هستند افزایش پیدا کنند، می توانید از size استفاده کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<body>

<h2>Allow Multiple Seletcions</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<option value="volvo">Volvo</option>

</select>

</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

</body>

</html>

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

برای این کار کاربر باید کلید کنترل (Ctrl) را نگه دارد و سپس گزینه های مورد نظرش را انتخاب کنید. بدین ترتیب می توان چندین گزینه را انتخاب نمود. می توانید این مورد را در مثالا بالا امتحان کنید.(ایران گستر)

عنصر <textarea>

عنصر <textarea> یک فیلد متنیِ چند خطی را ایجاد می کند. به مثال زیر توجه کنید:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>

<br>

</form>

</body>

</html>

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

در کد بالا rows مسئول مشخص کردن تعداد خطوط قابل رویت در text area و cols مسئول مشخص کردن عرض قابل رویت آن هستند. البته می توانید این اندازه ها را با CSS نیز تعیین کنید:(ایران گستر)

The cat was playing in the garden.

</textarea>

عنصر <button>

عنصر <button> یک دکمه را تعریف می کند:(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The button Element</h2>

</body>

</html>

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

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

نکته: مرورگر های مختلف ممکن است از مقادیر مختلفی برای حالت پیش فرضِ type استفاده کنند بنابراین بهتر خودتان آن را مشخص کنید.(ایران گستر)

عناصر HTML5

با معرفی HTML5 دو عنصر دیگر نیز به عناصر بالا اضافه شدند:(ایران گستر)

<datalist>
<output>

این عناصر جدید هستند بنابراین در مرورگر های قدیمی نمایش داده نمی شوند و جای آنها خالی گذاشته می شود.(ایران گستر)

عنصر <datalist> لیستی از گزینه های از پیش تعیین شده را برای <input> ایجاد می کند و کاربران هنگام کار با آن با یک لیست drop-down سر و کار دارند. همچنین list مربوط به <input> باید به id مربوط به <datalist> اشاره کند.(ایران گستر)

مثال:

<!DOCTYPE html>

<html>

<body>

<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input element.</p>

</datalist>

</form>

<p dir='rtl'><b>هشدار:</b> این قابلیت در مرورگر های سافاری و اینترنت اکسپلورر 9 و قبل تر پشتیبانی نمی شود</p>

</body>

</html>

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

عنصر <output> نیز نماینده ی یک محاسبه است (معمولا محاسبه هایی که با اسکریپت و در سمت سرور انجام می شوند):(ایران گستر)

<!DOCTYPE html>

<html>

<body>

<h2>The output Element</h2>

<p>می توانید مقدار جمع این دو عدد را به راحتی پیدا کنید</p>

<form action="/action_page.php"

oninput="x.value=parseInt(a.value)+parseInt(b.value)">

100 +

</form>

<p dir='rtl'><strong>هشدار:</strong> این قابلیت در Edge 12 و IE و مرورگر های قدیمی پشتیبانی نمی شود</p>

</body>

</html>

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

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

fateme جمعه 26 مهر 1398 ساعت 11:45

0 نظر

269
1
...
40
41
صفحه 42
43
44
...
54

حقوقی

جدیدترین یادداشت‌ها

بایگانی

جستجو

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

HTML

HTML5 چیست؟

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

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

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

HTML

ویژگی value

ویژگی readonly

ویژگی disabled

ویژگی size

ویژگی maxlength

ویژگی autocomplete

ویژگی novalidate

ویژگی autofocus

ویژگی form

ویژگی formaction

ویژگی formenctype

ویژگی formmethod

ویژگی formnovalidate

ویژگی formtarget

ویژگی height و width

ویژگی list

ویژگی min و max

ویژگی multiple

ویژگی pattern

ویژگی placeholder

ویژگی required

ویژگی step

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

HTML

Input های HTML5

Input های رنگی

Input های تاریخ

Input های Datetime-local

Input های ایمیل

Input های فایل

Input های ماه

Input های عددی

Input های محدوده

Input های جست و جو

Input های تلفن

Input های زمان

Input های URL

Input های هفته

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

HTML

Input های رایج و قدیمی

Input های متنی

Input های رمز عبور

Input های ارسال فرم

Input های پاک کردن فرم

Input های radio

Input های Checkbox

Input های دکمه ای

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

HTML

عنصر <input>

عنصر <select>

عنصر <textarea>

عنصر <button>

عناصر HTML5