ویژگی های input
input ها دارای ویژگی های بسیاری هستند.
در این بخش می خواهیم با برخی از این ویژگی ها آشنا شویم.
Attribute Value
برای دادن مقدار پیشفرض به input ها ، باید از ویژگی value استفاده کنید.
مثالی از ویژگی value :
<input type="text" value="متن خود را وارد کنید">Attribute readonly
input هایی که دارای ویژگی readonly هستند ، فقط برای خواندن هستند.
ویژگی readonly مشخص می کند که متن برای تغییر دادن نیست.
نکته: input با ویژگی readonly در هنگام ارسال فرم ، ارسال می شود !
<input type="text" reandoly="متن را بخوانید">Attribute disabled
ویژگی disabled یک input را به صورت غیر فعال نمایش می دهد.
این ویژگی غیر قابل کلیک می باشد.
نکته: input با ویژگی disabled هنگام ارسال اطلاعات فرم ، ارسال نمی شود.
<input type="text" disabled="متن غیر فعال می باشد">Attribute size
برای تعیین اندازه input ، باید از ویژگی size استفاده کنید.
مقدار پیشفرض این ویژگی برابر با 20 می باشد.
مثالی از ویژگی size را مشاهده می کنید :
<input type="text" size="40">Attribute maxlength
ویژگی maxlength به کاربر اجازه نوشتن فقط چند کاراکتر را می دهد.
مثالی از ویژگی maxlength را مشاهده می کنید :
<input type="text" maxlength ="8">Attribute min & max
برای تعیین اینکه هر input ، باید بین چند تا چند کاراکتر را بپذیرد ، می توانید از ویژگی min و max استفاده کنید.
مثالی از ویژگی min و max را مشاهده می کنید :
<input type="text" min="4" max="8">Attribute multiple
ویژگی multiple مشخص می کند که یک input باید چند مقدار را بگیرد.
مثالی از ویژگی multiple را مشاهده می کنید :
<input type="file" id="files" name="files" multiple>Attribute Pattern
ویژگی pattern مشخص می کند که یک input ، هنگام ارسال ، باید با یک عبارت منظم برسی شود.
مثالی از ویژگی pattern را مشاهده می کنید :
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">Attribute placeholder
ویژگی placeholder ، در داخل input مورد نظر ، یک راهنما می گذارد.
این راهنما هنگام نوشتن اطلاعات از بین می رود.
در صورت refresh شدن صفحه ، متن راهنما نمایش داده می شود.
مثالی از ویژگی placeholder را مشاهده می کنید :
<input type="text" placeholder="... نام خود را وارد کنید">Attribute requirde
ویژگی requirde ، یک فیلد اجباری را نمایش می دهد.
در صورت پر نشدن فیلد هنگام ارسال ، این ویژگی مشکلی را در صفحه نمایش می دهد.
مثالی از ویژگی requirde را مشاهده می کنید :
<input type="text" requirde>Attribute Step
ویژگی step مشخص می کند که فیلد ورودی باید بر چه عددی بخش پذیر باشد.
نکته: این ویژگی برای فیلد هایی که فقط عدد را می پذیرند کاربردی است.
مثالی از ویژگی step را مشاهده می کنید :
<input type="text" step="4">Attribute autofocus
ویژگی autofocus کاری می کند که input هنگام بارگیری صفحه ، فوکوس شود.
مثالی از ویژگی autofocus را مشاهده می کنید :
<input type="text" autofocus>Attribute height & width
برای تعیین عرض و ارتفاع یک input ، باید از ویژگی width و height استفاده کنید.
اغلب از این ویژگی برای input با type=image استفاده می کنند.
ویژگی width برای عرض ، و ویژگی height برای تنظیم کردن ارتفاع می باشد.
مثالی از ویژگی width و height را مشاهده می کنید :
<input type="image" height="200" width="300">Attribute list
قبل از اینکه این بخش را مطالعه کنید ، بخش المان های form را به صورت کامل بخوانید.
ویژگی list ، به المان های پیشفرض تگ datalist اشاره دارد.
مقدار ویژگی list باید با مقدار ویژگی id در المان input برابر باشد.
مثالی از ویژگی list را مشاهده می کنید :
<input type="text" list="color">Attribute autocomplete
ویژگی autocomplete دو مقدار on و off را می گیرد.
در صورت off بودن ویژگی autocomplete ، گزینه های پیشفرض برای المان input نمایش داده نمی شوند.
و درصورت on بودن این ویژگی ، گزینه های پیشفرض برای المان input نمایش داده می شوند.
مقدار این ویژگی به صورت پیشفرض on می باشد.
مثالی از ویژگی size را مشاهده می کنید :
<input type="text" autocomplete="off">
احسان اسلامی
