با سلام این روز با آموزش تگ input در HTML5 هستم.
تگ input چیز های زیادی رو داره اما ما قرار فقط type رو یاد بگیریم یعنی
<input type="" />
خب اولین متغیر ما.
همون طور که معلوم و واضحه برای متن استفاده میشه یعنی متن ساده و بدون هیچ تعریفی این کد این گونه نوشته میشه
<input type="text"/>
پیش نمایش :
شما میبینید که میتونید چیزی رو تایپ کنید.
البته برای استفاده از این کد ها باید کد هارو در تگ های html قرار بدین . یعنی
<html><input type="text"/> </html>
نکته : من در کد های بعدی تگ های html رو باز نمیکنم پس باید خودتون باز کنید.
خب این هم همونجوری که واضحه باید برای پسورد و کار های امنیتی استفاده میشه.
نحوه نوشتن این کد هم خیلی راحته یعنی آب خوردنه دقیق این text است ولی بجای "type="text از
"type="password استفاده میشه یعنی:
<input type="password"/>
پیش نمایش:
همین طور که معلومه اگه هم نیست باید بگم برای فقط عدد استفاده میشه.
یعنی مرور گر اجازه نمیده چیزی به جر عدد تایپ کنی.
نحوه نوشتن این تابع هم با بقیه فرق خوصی نمیکنه .
<input type="number"/>
پیش نمایش :
خب رسیدم به یکی از قوترین تابع های input یعنی file ایت تابع از تمامی مرورگر ها پشتیبانی میکنه
حتا اینترنت اکسپلور این تابع فرقی نمیکنه شاید تاحالا دیده باشین که جاهایی مثلا میگن عکسی رو
اپلود کن از این تابع استفاده میشه.
نحوه نوشتن این تابع هم خیلی راحته :
<input type="file" />
پیش نمایش:
ایمیل به معنا پست الکترونیک
خود مرورگر میبینه گه ایا @ در این به کار رفته یه جورایی جنبه ی دیزاینی داره و حیاتی نیست.
نحوه نوشتن این کد هم اینجوری اع
<input type="email" />
پیش نمایش:
خب این به جرعت میتونم بگم جز قویترین های input است.
نوشتن این کد هم راحته :
<input type="color" />
پیش نمایش:
خب این هم برای فرم ثبت نام و اینجور چیز ها خیلی بدرد میخوره مثلا قسمتی است که میگه شرایط و قوانین رو پذیرفتم در غیر این صورت مرورگر اجازه ادامه کار رو نمیدن.
با اینکه نوشتن این کد ها در کل راحتن این هم راحته:
<input type="checkbox" />
پیش نمایش:
این از اون تابع های بیخودی است و بدرد فرم های ثبت نام میخوره بعضی از جاها دیدین تاحالا دیدن که فرم ثبت نامی گذینه ای به نام از اول و . داره که بعد از کلیک روی اون تمامی چیز هایی که پر کردید پاک میشه؟؟
این فقط در صورتی کار میکنه که به فرم بیگین که به کجا بره بعد از سابمیت یعنی اگه نفره کلیک کرد روی سابمیت کجا بره و . چی بشه ما این رو این گونه تعریف میکنیم.
<form id="login_form" action="login.php" method="post" class="centered_form">
باید بجای login.php فایلی یا لینکی که بعد از سابمیت به اونجا ارسال بشه رو ادرسشو بزنید.
و اما نحوه نوشتن کد rest اینگونه است:
<input type="reset" />
یکی از تگ های انتخابی است که معمولا برای سفارش چیزی مثلا میخوایم انلاین پیتزا سفارش بدیم
انتخاب میکنیم چه نوعی باشه .
نحوه نوشتن این کد راحته
<input type="radio" />
پیش نمایش:
نکته : اصلا خوشم نمیاد که اول از نکته شروع کنم ولی مجبورم ( چون سابمیت و باتتون تقریبا باهم برابرند و فرق خواصی نمیکنن هردو رو با هم میگم.
نحوه نوشتن سابمیت:
<input typr="submit" />
باتون:
<input type="button" />
پیش نمایش : نمیزام خودتوناین یکی رو امتخان کنید.
این به معنی تایم و زمان است و به تاریخ قرمری است ( این تاریخ شمسی هم برای ما دردسر شد )
نوشتن این کد خیلی خیلی خیلی راحته و یکی از بهترین توابع input است.
<input type="date" />
پیش نمایش:
خب این یکم پیچیدس یعنی اینکه ما نمینویسیم
<input type="data-time" />
یا اینکه
<input type="data+time" />
ما اینجوری مینویسیم
<input type="datetime-local" />
پیش نمایش:
خب همونطور که واضحه این برای ساعت به کار میره نحوه نوشتن این کد هم آب خوردنه !!!
<input type="time" />
پیش نمایش :
به معنی ماه است یعنی مثلا ما از مشتری یا فردی میخوایم که تاریخ تولد یا مثلا زمان ملاقات رو بنویسه نحوه نوشتن این کد هم اینگونه است:
<input type="month" />
خب اگه شما انگلیسی بدونین می فهمین که tel به معنی شماره موبایل است و نه چیز دیگری
نحوه نوشتن این کد ها هم این جوری هستند.
<input type="tel" />
پیش نمایش:
این معمولا برای جاهایی استفاده میشه که میخوایم تعیین کنیم که مثلا شما که میخوای پیتزا بخری
چقد پنیری باشه یا مثلا هاست با ترافیک ماهیانه چقدر باشه
نکته : برای این باید min و max تعیین کنیم.
یعنی اگه تا ته رفت چند باشه اول که شروعه چند باشه min برای شروع و max برای پایان استفاده میشه.
این رو اینجوری مینویسیم:
<input type="range" min="0" max="100" />
پیش نمایش :
و
این اخرین است و خیلی خیلی خیلی راحته این برای هفته استفاده میشه
نحوه نوشتن این کد هم اینجوری اع
<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 بیشتره نمیتونید بارگذاری کنید.
پیش نمایش:
به پایان این اموزش رسیدیم اگه مشکلی داشتید میتوانید کامنت بنویسید یا از صحفه چت انلاین با ما ارتباط برقرار کنید .
خداحافظ و نگهدارتون.
درباره این سایت