UnderLub



با سلام این روز با آموزش تگ input  در HTML5 هستم.

تگ input چیز های زیادی رو داره اما ما قرار فقط type رو یاد بگیریم یعنی

<input type="" />

خب اولین متغیر ما.

TEXT

همون طور که معلوم و واضحه برای متن استفاده میشه یعنی متن ساده و بدون هیچ تعریفی این کد این گونه نوشته میشه 

<input type="text"/>

پیش نمایش :

شما میبینید که میتونید چیزی رو تایپ کنید.

البته برای استفاده از این کد ها باید کد هارو در تگ های html قرار بدین . یعنی 

<html><input type="text"/> </html>

نکته : من در کد های بعدی تگ های html رو باز نمیکنم پس باید خودتون باز کنید.

 

Password

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

نحوه نوشتن این کد هم خیلی راحته یعنی آب خوردنه دقیق این text است ولی بجای "type="text از 

"type="password استفاده میشه یعنی:

<input type="password"/>

پیش نمایش:

 

Number

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

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

نحوه نوشتن این تابع هم با بقیه فرق خوصی نمیکنه .

<input type="number"/>

پیش نمایش :

File

خب رسیدم به یکی از قوترین تابع های input یعنی file ایت تابع از تمامی مرورگر ها پشتیبانی میکنه

حتا اینترنت اکسپلور این تابع فرقی نمیکنه شاید تاحالا دیده باشین که جاهایی مثلا میگن عکسی رو 

اپلود کن از این تابع استفاده میشه.

نحوه نوشتن این تابع هم خیلی راحته :

<input type="file" />

پیش نمایش:

 

E-mail

ایمیل به معنا پست الکترونیک

خود مرورگر میبینه گه ایا @ در این به کار رفته یه جورایی جنبه ی دیزاینی داره و حیاتی نیست.

نحوه نوشتن این کد هم اینجوری اع

<input type="email" />

پیش نمایش:

Color

خب این به جرعت میتونم بگم جز قویترین های input است.

نوشتن این کد هم راحته :

<input type="color" />

پیش نمایش:

Checkbox

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

با اینکه نوشتن این کد ها در کل راحتن این هم راحته:

<input type="checkbox" />

پیش نمایش:

rest

این از اون تابع های بیخودی است و بدرد فرم های ثبت نام میخوره بعضی از جاها دیدین تاحالا دیدن که فرم ثبت  نامی گذینه ای به نام از اول و . داره که بعد از کلیک روی اون تمامی چیز هایی که پر کردید پاک میشه؟؟

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

<form id="login_form" action="login.php" method="post" class="centered_form">

باید بجای login.php فایلی یا لینکی که بعد از سابمیت به اونجا ارسال بشه رو ادرسشو بزنید.

و اما نحوه نوشتن کد rest اینگونه است:
 

<input type="reset" />

radio

یکی از تگ های انتخابی است که معمولا برای سفارش چیزی مثلا میخوایم انلاین پیتزا سفارش بدیم 

انتخاب میکنیم چه نوعی باشه .

نحوه نوشتن این کد راحته

<input type="radio" />

پیش نمایش:

button + Submit

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

نحوه نوشتن سابمیت:

<input typr="submit" />

باتون:

<input type="button" />

پیش نمایش : نمیزام خودتوناین یکی رو امتخان کنید.

Date

این به معنی تایم و زمان است و به تاریخ قرمری است ( این تاریخ شمسی هم برای ما دردسر شد )

نوشتن این کد خیلی خیلی خیلی راحته و یکی از بهترین توابع input است.

<input type="date" />

پیش نمایش:

Date time

خب این یکم پیچیدس یعنی اینکه ما نمینویسیم 

<input type="data-time" />

یا اینکه 

<input type="data+time" />

ما اینجوری مینویسیم

 <input type="datetime-local" />

پیش نمایش:

 

Time

خب همونطور که واضحه این برای ساعت به کار میره نحوه نوشتن این کد هم آب خوردنه !!!

<input type="time" />

پیش نمایش : 

Month

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

<input type="month" />

Tel

خب اگه شما انگلیسی بدونین می فهمین که tel به معنی شماره موبایل است و نه چیز دیگری

نحوه نوشتن این کد ها هم این جوری هستند.

<input type="tel" />

پیش نمایش:

Range

این معمولا برای جاهایی استفاده میشه که میخوایم تعیین کنیم که مثلا شما که میخوای پیتزا بخری 

چقد پنیری باشه یا مثلا هاست با ترافیک ماهیانه چقدر باشه 

نکته : برای این باید  min و max تعیین کنیم.

یعنی اگه تا ته رفت چند باشه اول که شروعه چند باشه min برای شروع و max برای پایان استفاده میشه.

این رو اینجوری مینویسیم:

<input type="range"  min="0" max="100" />

پیش نمایش :

و 

Week

این اخرین است و خیلی خیلی خیلی راحته این برای هفته استفاده میشه 

نحوه نوشتن این کد هم اینجوری اع 

<input type="week" />

پیش نمایش :

چند نکته غیر درسی : 

1 برای اینکه ما به طور پیش فرض چیزی رو وارد کنیم از value استفاده میکنیم.

یعنی اگه بخواهیم چیزی به صورت پیش فرض پربشه از value استفاده میکنیم نحوه استفاده هم اینگونه است:

<input type="text" value="test" />

الان این به ضورت پیش فرض داخلش test نوشته شده.

پیش نمایش:

حتما که نباید از value استفاده کرد برای مثال میتونین که یک پس زمینه دیده بشه و به محض تایپ بره از placeholder استفاده میشه.

برای مثال میتوین اینجوری ازش استفاده کرد.

<input type="password" placeholder="Password" />

پیش نمایش: 

3 حتما نباید از این قاعده ها استفاده کنید خب شما میتوانید که از قاعده های دیگری هم برای دیزاین و خشگلی استفاده کنید مثلا گوگل در واقع بجای 

<input type="text" />

از 

<input type="serch" />

استفاده کرده یعنی برای خشگلی و اینجور چیزها از serch استفاده شده در حالی نتیجه هیچ تفاوتی نداره مثلا شما می خواهید یک وبسایت سفارش غذا درست کنید میتونین بجای text از food 

استفاده کنید واصح تر بیان کنم هرچیز که شما در بین گیومه های قرار بدین و معنی برای مرورگر نداشته باشه درواقع همون text حساب میگیره.

و اخرین قسمت درمورد accept است accept برای file به معنی پسوند فایل است یعنی اینکه چه فایل هایی قابل 

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

<input type="file" accept=".zip" />

دیگه فقط فرمت zip قابل برداشت است.

پیش نمایش :

نکته : حتما باید از . ( دات یا نقطه استفاده کنید)

نکته 2 : اگر می خواهید هم زمان چند تا فرمت رو کنید می تونی از , استفاده کنید مثلا اگر ما بنویسیم:

<input type="file" accept=".zip,.png"  />

فقط می تونید فایل های که فرمت png و zip باشن رو اپلود کنید.

نکته : برای فایل عکس از image/* استفاده میکنیم یعنی:

<input type="file" accept="image/*" />

پیش نمایش: 

و برای فایل صوتی از audio/* و برای ویدیو از video/* استفاده می شه.

 

برای تایین حداکثر سایز از size استفاده می شه که یعنی:

<input type="file" size="20" />

این یعنی شما فایلی رو که حجمش از 20 mb بیشتره نمیتونید بارگذاری کنید.

پیش نمایش:

 

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

 

خداحافظ و نگهدارتون.


آخرین ارسال ها

آخرین جستجو ها