ویژگی های input در HTML

input ها دارای ویژگی های بسیاری هستند. 

در این بخش می خواهیم با برخی از این ویژگی ها آشنا شویم.

برای دادن مقدار پیشفرض به input ها ، باید از ویژگی value استفاده کنید.

مثالی از ویژگی value :

<input type="text" value="متن خود را وارد کنید">

<input type="text" value="متن خود را وارد کنید">

input هایی که دارای ویژگی readonly هستند ، فقط برای خواندن هستند.

ویژگی readonly مشخص می کند که متن برای تغییر دادن نیست. 

نکته: input با ویژگی readonly در هنگام ارسال فرم ، ارسال می شود !

<input type="text" reandoly="متن را بخوانید">

<input type="text" reandoly="متن را بخوانید">

ویژگی disabled یک input را به صورت غیر فعال نمایش می دهد.

این ویژگی غیر قابل کلیک می باشد. 

نکته: input با ویژگی disabled هنگام ارسال اطلاعات فرم ، ارسال نمی شود.

<input type="text" disabled="متن غیر فعال می باشد">

<input type="text" disabled="متن غیر فعال می باشد">

برای تعیین اندازه input ، باید از ویژگی size استفاده کنید.

مقدار پیشفرض این ویژگی برابر با 20 می باشد.

مثالی از ویژگی size را مشاهده می کنید :

<input type="text" size="40">

<input type="text" size="40">

ویژگی maxlength به کاربر اجازه نوشتن فقط چند کاراکتر را می دهد.

مثالی از ویژگی maxlength را مشاهده می کنید :

<input type="text"  maxlength ="8">

<input type="text"  maxlength ="8">

برای تعیین اینکه هر input ، باید بین چند تا چند کاراکتر را بپذیرد ، می توانید از ویژگی min و max استفاده کنید.

مثالی از ویژگی min و max را مشاهده می کنید :

<input type="text" min="4" max="8">

<input type="text" min="4" max="8">

ویژگی multiple مشخص می کند که یک input باید چند مقدار را بگیرد.

مثالی از ویژگی multiple را مشاهده می کنید :

<input type="file" id="files" name="files" multiple>

<input type="file" id="files" name="files" multiple>

ویژگی pattern مشخص می کند که یک input ، هنگام ارسال ، باید با یک عبارت منظم برسی شود.

مثالی از ویژگی pattern را مشاهده می کنید :

<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

ویژگی placeholder ، در داخل input مورد نظر ، یک راهنما می گذارد.

این راهنما هنگام نوشتن اطلاعات از بین می رود.

در صورت refresh شدن صفحه ، متن راهنما نمایش داده می شود.

مثالی از ویژگی placeholder را مشاهده می کنید :

<input type="text" placeholder="... نام خود را وارد کنید">

<input type="text" placeholder="... نام خود را وارد کنید">

ویژگی requirde ، یک فیلد اجباری را نمایش می دهد.

در صورت پر نشدن فیلد هنگام ارسال ، این ویژگی مشکلی را در صفحه نمایش می دهد.

مثالی از ویژگی requirde را مشاهده می کنید :

<input type="text" requirde>

<input type="text" requirde>

ویژگی step مشخص می کند که فیلد ورودی باید بر چه عددی بخش پذیر باشد. 

نکته: این ویژگی برای فیلد هایی که فقط عدد را می پذیرند کاربردی است.

مثالی از ویژگی step را مشاهده می کنید :

<input type="text" step="4">

<input type="text" step="4">

ویژگی autofocus کاری می کند که input هنگام بارگیری صفحه ، فوکوس شود.

مثالی از ویژگی autofocus را مشاهده می کنید :

<input type="text" autofocus>

<input type="text" autofocus>

برای تعیین عرض و ارتفاع یک input ، باید از ویژگی width و height استفاده کنید.

اغلب از این ویژگی برای input  با type=image استفاده می کنند.

ویژگی width برای عرض ، و ویژگی height برای تنظیم کردن ارتفاع می باشد.

مثالی از ویژگی width و height را مشاهده می کنید :

<input type="image" height="200" width="300">

<input type="image" height="200" width="300">

قبل از اینکه این بخش را مطالعه کنید ، بخش  المان های form را به صورت کامل بخوانید.

ویژگی list ، به المان های پیشفرض تگ datalist اشاره دارد.

مقدار ویژگی list باید با مقدار ویژگی id در المان input برابر باشد.

مثالی از ویژگی list را مشاهده می کنید :

<input type="text" list="color">

<input type="text" list="color">