Input Type جدید

Input Type جدید

تگ <input> :

از تگ <input> برای قرار دادن انواع کنترل های دریافت اطلاعات از کاربر در فرم های Html استفاده می شود . بوسیله خاصیت type تگ <input> می توانید نوع کنترل آن را مشخص نمایید ،  مثلا اینکه کادر متن باشد یا منوی کرکره ای .

Input Type جدید input type جدید Input Type جدید HTML5 forms input types

Input Type جدید

چند نکته راجع به تگ <input> :

  • این تگ حتما بایستی درون یک تگ <from> قرار بگیرد .
  • تگ <input> در همان تگ ابتدایی بسته شده و دارای محتویات نیست . فقط می توان برای آن خواص تعیین کرد .

شکل کلی استفاده از تگ <input> بصورت زیر است :

Input Type جدید در Html5

 فیلد رنگ با color : به عنوان مثال ، اگر شما بخواین یک فیلد برای کاربر در نظر بگیرید که رنگ مورد علاقشو وارد کنه ، نوع فیلد و color میذاریم

 فیلد تاریخ با date : اگر شما بخواین یک فیلد برای کاربر در نظر بگیرید که یک تایخ مثلا تاریخ تولدشو وارد کنه ، نوع فیلد و date میذاریم.

 فیلد تاریخ و زمان با  datetime و یا datetime-local : زمانی که شما بخواین یک فیلد برای ورود تاریخ و زمان برای کاربر در نظر بگیرید از نوع  datetime یا datetime-local استفاده می کنیم.

فیلد ایمیل با  email : اگر بخواین یک فیلد برای کاربر در نظر بگیرید که ایمیلشو وارد کنه از نوع email استفاده می کنید ، که در این صورت ، خود مرورگر درستی ایمیل رو تشخیص میده و در صورت صحیح نبودن به کاربر پیغام مید.

 

 نتیجه ی کد بالا در صورت ورود ایمیل نامعتبر :

Input Type جدید input type جدید Input Type جدید 53

Input Type جدید

فیلد ماه و سال با month : برای فیلدهایی که بخواین ماه و سال رو وارد کنید ، از این نوع استفاده می کنید

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

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

 

Input Type جدید input type جدید Input Type جدید 61

Input Type جدید

 

خواص جدید تگ <input> در HTML 5 :

نام خاصيت نوع خاصيت شرح
accept */audio
*/video
*/image
این خاصیت نوع فایلی که سرور برای کنترل قبول می کند را تعیین می کند .
autocomplete on
off
این خاصیت تعیین می کند که آیا قابلیت پر کردن خودکار کنترل روشن باشد یا خیر .
autofocus autofocus تعیین می کند که آیا کنترل بصورت اتوماتیک در هنگام لود سدن صفحه فوکوس را در اختیار بگیرد یا خیر .
form form_id این خاصیت تعیین کننده یک یا در id فرم است که کنترل مورد نظر به آن تعلق دارد .
formaction URL این خاصیت آدرس URL ای را تعیین می کند که قرار است اطلاعات کنترل را پردازش کند .
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
مشخص می کند هنگامی که اطلاعات کنترل به سرور ارسال می شود چگونه و با چه فرمتی پردازش شود .
formmethod get
post
این خاصیت متد HTTP مورد نظر برای ارسال اطلاعات فرم را مشخص می کند .
formnovalidate formnovalidate تعیین می کند که اطلاعات کنترل های فرم در هنگام ارسال اعتبارسنجی نشوند .
formtarget _blank
_self
_parent
_top
framename
این خاصیت نحوه باز شدن صفحه ای که فرم به آن ارسال می شود را مشخص می کند .
list datalist_id این خاصیت تعیین کننده id تگ <datalist> ای است که آیتم های از پیش تعیین شده ای را برای کنترل مشخص می سازد .
max number
date
این خاصیت حداکثر مقدار عددی قابل قبول برای یک کنترل <input> را تعیین می کند .
min number
date
این خاصیت حداقل مقدار عددی قابل قبول برای یک کنترل <input> را تعیین می کند .
multiple multiple این خاصیت تعیین می کند که آیا کاربر می تواند در یک کنترل بیش از یک مقدار را وارد کند یا خیر .
pattern regexp این خاصیت یک قالب یا شیوه را برای سنجش و اعتبارسنجی داده وارد شده در کنترل تعیین می کند .
placeholder text بوسیله این خاصیت می توان یک مقدار از پیش تعیین شده را در یک کادر متن برای راهنمایی کاربر جهت وارد نمودن صحیح اطلاعات درخواستی قرار داد .
required required این خاصیت تعیین می کند که حتما کنترل باید پر شود ( خالی نماند ) .
step number این خاصیت میزان گام افزایش یا کاهش مقدار عددی را برای یک کنترل <input> تعیین می کند .

 

آموزش HTML آموزش طراحی وب

دیدگاه خود را بیان کنید