٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش صفات ورودی HTML

این فصل خصوصیات مختلف <input>عنصر HTML را توصیف می کند. صفت مقدار valueویژگی ورودی مقدار اولیه را برای یک قسمت ورودی مشخص می کند: مثال فیلدهای ورودی با مقادیر اولیه (پیش فرض): <form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="John"><br> <label for="lname">Last name:</label><br> <input…

محمد یوسفی

1 جولای 2021

این فصل خصوصیات مختلف <input>عنصر HTML را توصیف می کند.


صفت مقدار

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

مثال

فیلدهای ورودی با مقادیر اولیه (پیش فرض):

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

ویژگی فقط خواندنی

readonlyویژگی ورودی مشخص می کند که یک قسمت ورودی فقط خواندنی است.

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

هنگام ارسال فرم ، مقدار یک قسمت ورودی فقط خواندنی ارسال می شود!

مثال

یک قسمت ورودی فقط خواندنی:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

صفت غیرفعال

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

یک قسمت ورودی غیرفعال غیرقابل استفاده و قابل کلیک نیست.

هنگام ارسال فرم ، مقدار یک قسمت ورودی غیرفعال ارسال نمی شود!

مثال

یک قسمت ورودی غیرفعال:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

اندازه صفت

sizeویژگی ورودی ، پهنای قابل مشاهده در فیلد ورودی را با نویسه مشخص می کند.

مقدار پیش فرض size20 است.

توجه:size ویژگی آثار با انواع ورودی زیر: متن، جستجو، تلفن، آدرس، ایمیل و رمز عبور.

مثال

برای فیلد ورودی عرض تعیین کنید:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form>

ویژگی حداکثر

maxlengthویژگی ورودی حداکثر تعداد نویسه های مجاز در یک قسمت ورودی را مشخص می کند.

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

مثال

حداکثر طول را برای یک قسمت ورودی تنظیم کنید:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>

صفت چندگانه

multipleویژگی ورودی مشخص می کند که کاربر مجاز است بیش از یک مقدار را در یک قسمت ورودی وارد کند.

multipleایمیل، و پرونده: ویژگی با انواع ورودی کار می کند.

مثال

یک قسمت بارگذاری پرونده که مقادیر متعددی را می پذیرد:

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

صفت الگوی

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

patternمتن، تاریخ، جستجو، آدرس، تلفن، ایمیل، و رمز عبور: ویژگی با انواع ورودی زیر کار می کند.

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

مثال

یک قسمت ورودی که می تواند فقط شامل سه حرف باشد (بدون عدد یا نویسه خاص):

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

ویژگی نگهدارنده مکان

placeholderویژگی ورودی یک نکته کوتاه را مشخص می کند که مقدار مورد انتظار یک فیلد ورودی را توصیف می کند (یک مقدار نمونه یا یک توصیف کوتاه از قالب مورد انتظار).

قبل از وارد کردن مقدار کاربر ، نکته کوتاه در قسمت ورودی نمایش داده می شود.

placeholderمتن، جستجو، آدرس، تلفن، ایمیل، و رمز عبور: ویژگی با انواع ورودی زیر کار می کند.

مثال

یک قسمت ورودی با متن متغیر نگهدارنده:

<form>
  <label for="phone">Enter a phone number:</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متن، جستجو، آدرس، تلفن، ایمیل، رمز عبور، جمع تاریخ، تعداد، چک باکس، رادیو، و پرونده: ویژگی با انواع ورودی کار می کند.

مثال

یک قسمت ورودی مورد نیاز:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

توجه: محدودیت های ورودی بی خطر نیستند و JavaScript روش های زیادی برای افزودن ورودی غیرقانونی ارائه می دهد. برای محدود کردن ایمن ورودی ، باید توسط گیرنده (سرور) نیز بررسی شود!


ویژگی فوکوس خودکار

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

مثال

هنگام بارگیری صفحه ، اجازه دهید قسمت ورودی “نام” به طور خودکار تمرکز شود:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" autofocus><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

ویژگی های ارتفاع و عرض

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

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

مثال

یک تصویر را به عنوان دکمه ارسال ، با ویژگی های ارتفاع و عرض تعریف کنید:

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

لیست ویژگی

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

مثال

یک عنصر <input> با مقادیر از پیش تعریف شده در یک <datalist>:

<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ویژگی آثار با <form>و زیر <input>انواع: متن، جستجو، آدرس، تلفن، ایمیل، رمز عبور، datepickers، دامنه، و رنگ.

مثال

فرم HTML با تکمیل خودکار روشن و خاموش برای یک قسمت ورودی:

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit" value="Submit">
</form>

نکته: در برخی از مرورگرها ممکن است لازم باشد یک عملکرد تکمیل خودکار را فعال کنید (به بخش “تنظیمات” در فهرست مرورگر نگاه کنید).

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها