Input در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 3 دقیقه 28 آبان 1399

در این بخش برای شما توضیحاتی مفیدی را تحت عنوان Input در HTML آماده کرده ایم .

در پایان مقاله شما خواهید دانست ورودی HTML چیست و چگونه می توان آن را جمع آوری کرد؟

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

تعاریف اولیه input :

 در HTML می توان ورودی کاربر را با استفاده از عنصر <input> جمع آوری کرد. این خود محتوایی ندارد و بنابراین یک عنصر خالی است که نیازی به تگ بسته ندارد:

<form>
  My favourite food is:
  <input type="text">
  My pet name is:
  <input type="text">
  My pet is:
  <input type="radio" name="specie" checked>
  Dog
  <input type="radio" name="specie">
  Cat
  <input type="radio" name="specie">
  Rabbit
  <input type="submit" value="Add to Database">  
</form>

از نظر نمایش ، <input> یک عنصر درون خطی است. این بدان معناست که در خطی که در ابتدا قرار داشت باقی خواهد ماند و رفتار پیش فرض مرورگر قرار دادن چند عنصر ورودی با عرض کم در کنار هم خواهد بود:

<form>
 <input type="radio" name="day" value="monday" checked>Monday
 <input type="radio" name="day" value="tuesday">Tuesday
 <input type="radio" name="day" value="wednesday">Wednesday
</form>

با استفاده از عنصر <input>      می توانید ورودی کاربر را جمع آوری کرده و بعداً از آن در اسکریپت ها یا پایگاه های داده استفاده کنید. این یکی از محبوب ترین عناصر فرم HTML است.

استفاده از ویژگی ها برای تعریف ورودی

دلیل محبوبیت <input> همه کاره بودن آن است. با استفاده از ویژگی های مختلف و مقادیر آنها ، می توانید نتایج متفاوتی را از یک قسمت نوشتاری ساده گرفته تا یک دکمه ارسال یا یک فرم بارگذاری فایل ، دریافت کنید.

انتخاب گسترده ای از ترکیبات احتمالی و استفاده خاص از آن ها ، <input> را به یکی از پیچیده ترین عناصر در HTML تبدیل می کند.

نوع صفت Input در HTML

نحوه کارکرد عنصر <input> به ویژگی نوع اختصاص یافته و مقدار آن متکی است. اگر این اطلاعات را حذف کنید ، عنصر فرم به طور خودکار متن را تنظیم می کند.

توجه: برای افزودن یک ویژگی ، یک جفت نام و ارزش را در برچسب باز کنید.

در اینجا متداول ترین انواع ورودی HTML وجود دارد:

DefinitionType
تایپ کردن یک خط متن را مجاز می کند (معمولاً زیر 32 حرف)text
دسترسی به تقویم را برای انتخاب تاریخ فراهم می کندdate
تایپ آدرس ایمیل را تأیید می کند و آن را تأیید می کندemail
انتخاب چندین گزینه از یک مجموعه از پیش تعریف شده را مجاز می کندcheckbox
انتخاب یک گزینه واحد از یک مجموعه از پیش تعریف شده را مجاز می کندradio
دکمه ارسال را برای ارسال ورودی به سرور ایجاد می کندsubmit

سایر ویژگی های موجود برای input

یک سری ویژگی های دیگر برای Input در HTML وجود دارد که کمتر مورد استفاده قرار می گیرند. با این حال ، آن ها می توانند کاملا مفید باشند ، بنابراین با استفاده از جدول زیر آن ها را بشناسید:

DefinitionAttribute
یک کلید دسترسی (میانبر صفحه کلید) را تعریف می کندaccesskey
مشخص می کند که فیلد ورودی باید به طور خودکار توسط مرورگر تکمیل شودautocomplete
مشخص می کند که فیلد ورودی باید به طور خودکار توسط مرورگر متمرکز شودautofocus
منسوخ. مرز را برای عنصر ورودی مشخص کنیدborder
تعیین می کند که آیا یک گزینه باید به طور خودکار توسط مرورگر انتخاب شودchecked
عنصر ورودی را غیرفعال می کندdisabled
عنصر ورودی را به فرم HTML متصل می کندform
آدرس URL را برای ارسال داده تعریف می کندformaction
نحوه ارسال ورودی کاربر به سرور را مشخص می کندformenctype
روشی را برای استفاده در هنگام ارسال ورودی کاربر تعریف می کندformmethod
جایی که پاسخ سرور باید توسط مرورگر باز شود را تعیین می کندformtarget
اگر ورودی کاربر یک تصویر باشد ، ارتفاع را مشخص می کندheight
منسوخ. زبانی را که برای رویدادهای مربوط به ورودی استفاده می شود ، تعریف می کندlanguage
شناسه را عنصر تعریف می کندlist
حداکثر مقدار را برای عنصر ورودی تعریف می کندmax
حداکثر طول متن را برای عنصر ورودی تعریف می کندmaxlength
ورود چندین مقدار را مجاز می کندmultiple
حداقل مقدار را برای عنصر ورودی تعریف می کندmin
نام عنصر ورودی را تعریف می کندname
عبارتی منظم را که در اعتبار سنجی استفاده می شود ، تعریف می کندpattern
متن مکان یاب را به عناصر ورودی نوشتاری تعریف کنیدplaceholder
کاربر را برای تغییر مقدار ورودی منع می کندreadonly
در صورتی که فیلد مورد نیاز هیچ ورودی نداشته باشد کاربر را مایل به ارسال فرم می کندrequired
اندازه ورودی را با نویسه تعریف می کندsize
منبع ورودی تصویر را تعریف می کندsrc
فاصله بین مقادیر عددی معتبر را تعریف می کندstep
یک مقدار یا انتخاب پیش فرض را تعیین می کندvalue

نکات مهم Input در HTML

  • هنگام استفاده از ویژگی autofocus مراقب باشید: این می تواند مشکلاتی را برای خوانندگان صفحه ایجاد کند ، زیرا آن ها بدون هشدار به کاربر به طور خودکار به کنترل فرم می روند.
  • برخی از مرورگرها قابلیت automatic translation دارند. با این حال ، آن ها صفات را ترجمه نمی کنند. به همین دلیل است که استفاده از عنصر <label> برای توضیح ورودی در HTML در بسیاری از موارد بسیار بیشتر از یک موقعیت منطقی است.

دوره رایگان html را در دویکس دنبال کنید.

چه امتیازی به این مقاله می دید؟

5 / 5.00
[ 1 رای ]
مطالب مشابه

Related Posts