میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

صفات Input در Html

آموزش صفات Input در Html

با عرض سلام و خسته نباشید خدمت تمام برنامه نویسان و دوستان عزیز و گرامی
در جلسات قبل با فرم و انواع تگ های فرم خدمت شما عزیزان بودیم .
در این جلسه به معرفی و آموزش صفات Input در Html خواهیم پرداخت.
خوب بریم سراغ آموزش

 

 

صفت value

ویژگی input value مقدار اولیه را برای یک قسمت input مشخص می کند:

<form >
  <label for=”fname”>نام :</label>
  <input type=”text” id=”fname” name=”fname” value=”علی”>
  <label for=”lname”>نام خانوادگی :</label><
  <input type=”text” id=”lname” name=”lname” value=”محمدی”>
</form>

نتیجه در مرورگر :

 

  


 

صفت readonly

ویژگی readonly مشخص می کند که یک قسمت ورودی فقط خواندنی است.
یک قسمت ورودی فقط خواندنی قابل اصلاح نیست (با این وجود کاربر می تواند در آن تب بزند ، آن را برجسته کند و متن را از آن کپی کند).
هنگام ارسال فرم ، مقدار یک قسمت ورودی فقط خواندنی ارسال می شود!

صفت disabled

ویژگی disabled مشخص می کند که یک قسمت ورودی باید غیرفعال شود.
یک قسمت ورودی غیرفعال غیرقابل استفاده و قابل کلیک نیست.
هنگام ارسال فرم ، مقدار یک قسمت ورودی غیرفعال ارسال نمی شود!

صفت size

ویژگی size ، پهنای قابل مشاهده یک فیلد ورودی را به نویسه مشخص می کند.
مقدار پیش فرض size برابر ۲۰ است.
توجه: ویژگی size با انواع تگ های input زیر کار می کند: text, search, tel, url, email, password.

 

صفت maxlength

ویژگی maxlength حداکثر تعداد نویسه های مجاز در یک input  را مشخص می کند.
توجه: هنگام تنظیم maxlength ، قسمت ورودی input بیش از تعداد نویسه مشخص شده را نمی پذیرد. با این حال ، این ویژگی هیچ بازخوردی ارائه نمی دهد. بنابراین ، اگر می خواهید به کاربر هشدار دهید ، باید کد JavaScript را بنویسید.

صفت min و max

صفت min و max مقادیر حداقل و حداکثر را برای یک قسمت ورودی مشخص می کند.

ویژگی های min و max با انواع input types زیر کار می کنند: number, range, date, datetime-local, month, time ، week.

صفت multiple

ویژگی multiple مشخص می کند که کاربر مجاز است بیش از یک مقدار را در یک قسمت input  وارد کند.
ویژگی multiple با انواع input  زیر کار می کند:  email, file

 

صفت pattern

ویژگی pattern ، عبارتی منظم را مشخص می کند که هنگام ارسال فرم ، مقدار فیلد ورودی برابر الگو  آن بررسی می شود.
ویژگی pattern  با انواع input types زیر کار می کند: text, date, search, url, tel, email, password.

<form>
  <label for=”country_code”>کد کشور</label>
  <input type=”text” id=”country_code” name=”country_code”
pattern=”[A-Za-z]{3}”
>

</form>

صفت placeholder

ویژگی placeholder یک اشاره کوتاه را مشخص می کند که مقدار مورد انتظار یک قسمت input را توصیف می کند.
قبل از وارد کردن مقدار کاربر ، نکته کوتاه در قسمت ورودی نمایش داده می شود.
ویژگی placeholder با انواع input types زیر کار می کند:  text, search, url, tel, email, password.

<form>
  <label for=”phone”>شماره تلفن خود را وارد کنید :</label>
  <input type=”tel” id=”phone” name=”phone”
  placeholder=”123-45-678″
  pattern=”[0-9]{3}-[0-9]{2}-[0-9]{3}”
>

</form>

نتیجه در مرورگر :

 

  

 

صفت required

ویژگی required مشخص می کند که یک قسمت ورودی باید قبل از ارسال فرم پر شود.
ویژگی required  با انواع input types زیر کار می کند: text, search, url, tel, email, password, date pickers, number, checkbox, radio, file.

 

صفت step

ویژگی step فواصل قانونی شماره را برای یک input types مشخص می کند.
مثال: اگر step = “3 باشد ، اعداد قانونی می توانند -۳ ، ۰ ، ۳ ، ۶ و غیره باشند.
نکته: از این ویژگی می توان به همراه ویژگی های max و min برای ایجاد طیف وسیعی از مقادیر قانونی استفاده کرد.
ویژگی step  با انواع input types زیر کار می کند: ت number, range, date, datetime-local, month, time , week.

 

صفت autofocus

ویژگی autofocus مشخص می کند که هنگام بارگیری صفحه ، یک input باید به طور خودکار تمرکز پیدا کند.

 

<form>
  <label for=”fname”>نام :</label>
  <input type=”text” id=”fname” name=”fname” autofocus>
  <label for=”lname”>نام خانوادگی :</label>
  <input type=”text” id=”lname” name=”lname”>
</form>

نتیجه در مرورگر :

  


 

 

صفت height و width

مشخصه های width و height ارتفاع و عرض تگ <input type = “image”> را مشخص می کند.

نکته: همیشه ویژگی های ارتفاع و عرض را برای تصاویر مشخص کنید. در صورت تنظیم ارتفاع و عرض ، فضای بارگیری شده برای تصویر هنگام بارگذاری صفحه محفوظ است. بدون این ویژگی ها ، مرورگر اندازه تصویر را نمی داند و نمی تواند فضای مناسب را برای آن رزرو کند. نتیجه این خواهد بود که در هنگام بارگذاری تصاویر صفحه آرایی تغییر می کند.

صفت list

ویژگی list به یک تگ <datalist> اشاره دارد که شامل گزینه های از پیش تعریف شده برای تگ <input> است.

<form>
  <input list=”browsers”>
  <datalist id=”browsers”>
    <option value=”Internet Explorer”>
    <option value=”Firefox”>
    <option value=”Chrome”>
    <option value=”Opera”>
    <option value=”Safari”>
  </datalist>
</form>

نتیجه در مرورگر :

  

صفت autocomplete 

ویژگی autocomplete مشخص می کند که آیا فرم یا فیلد input باید تکمیل خودکار روشن یا خاموش داشته باشند یا نه ؟
تکمیل خودکار به مرورگر اجازه می دهد تا مقدار را پیش بینی کند. هنگامی که کاربر شروع به تایپ در فیلد می کند ، مرورگر باید گزینه هایی را برای پر کردن فیلد ، براساس مقادیر تایپ شده قبلی ، نمایش دهد.
ویژگی autocomplete با <form> و انواع <input>  زیر کار می کند:  text, search, url, tel, email, password, datepickers, range, color

 

امیدواریم این بخش از آموزش در مورد صفات Input در Html نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟