خصوصیت readonly در HTML

html readonly attribute 2

13 آذر 1403

خصوصیت readonly در HTML

سلام! امروز می‌خواهیم درباره‌ی خصوصیت readonly در HTML صحبت کنیم. این خصوصیت معمولاً برای فیلدهای ورودی (input) استفاده می‌شود و به ما کمک می‌کند که بتوانیم فیلدهای موردنظر را به صورت فقط‌خواندنی تنظیم کنیم. یعنی کاربر نمی‌تواند محتوای آن را تغییر دهد، اما می‌تواند آن را مشاهده کند. این کار به ویژه در فرم‌ها که ما نمی‌خواهیم کاربر برخی از اطلاعات را تغییر دهد بسیار کاربردی است.

برای مثال، فرض کنید که فرمی داریم که اطلاعات آن از سمت سرور دریافت شده و ما نمی‌خواهیم کاربر بتواند آن اطلاعات را ویرایش کند. در اینجا می‌توانیم از readonly استفاده کنیم. با این کار اطلاعات به صورت ثابت باقی می‌مانند و کاربر فقط امکان مشاهده آن‌ها را دارد.

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

به عنوان مثال، اگر بخواهید یک فیلد ورودی داشته باشید که کاربر فقط اطلاعات آن را ببیند و نتواند آن را تغییر دهد، می‌توانید به راحتی از خصوصیت readonly استفاده کنید. در زیر یک مثال ساده برای شما می‌زنیم تا بیشتر با این خصوصیت آشنا شوید.

مثال استفاده از readonly در HTML

<form>
    <label for="email">ایمیل:</label>
    <input type="email" id="email" value="[email protected]" readonly>
    <input type="submit" value="ارسال">
</form>

توضیح کد

در این کد یک فرم ساده داریم که در آن از input نوع email استفاده شده است:

<form>: شروع یک فرم.

<label for="email">ایمیل:</label>: برچسبی برای فیلد ورودی ایمیل.

<input type="email" id="email" value="[email protected]" readonly>: فیلد ورودی ایمیل که فقط خواندنی است.

<input type="submit" value="ارسال">: دکمه ارسال برای فرم.

با این کد، کاربر می‌تواند ایمیل را ببیند، اما نمی‌تواند آن را تغییر دهد. در عین حال، ایمیل هنگام ارسال فرم به سرور فرستاده می‌شود.

دسته ‌بندی آموزش ها

برچسب ها

خصوصیت readonly در HTML