ورود ثبت نام
کادر کلمه عبور در HTML و textarea
» طراحی سایت » آموزش HTML » کادر کلمه عبور (Password) و فیلد مخفی در HTML
11063 بازدید

کادر کلمه عبور (Password) و فیلد مخفی در HTML

کادر کلمه عبور (Password)

احتمالاً تا الان به سایتی رفتید که برای عضویت یا ورود نیاز به کلمه عبور داشته باشد . و شما هم مسلماً دوست ندارید وقتی که کلمه عبور را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به دیدن آن باشند . به همین دلیل معمولاً سایت ها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم  نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که معمولاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش هر کاراکتر از کلمه عبور از یک نقطه یا ستاره (بستگی به مرورگر دارد ) استفاده می کند .

برای ساختن کادر کلمه عبور یا پسورد می تونید از کد زیر استفاده کنید :

<input type=”password” name=”namepass” size=”30″ >

اگر کد را اجرا کنید خواهید دید کادر کلمه عبور را مشاهد خواهید کرد و همان طور که در کد بالا می بینید من از شناسه “size = “30 استفاده کردم ، تقریبا ً همه شناسه هایی که برای کادر های متنی در جلسات قبل گفتم در مورد کادر کلمه عبور هم قابل استفاده است .

فیلد های مخفی (Hidden Fields)

ممکن است برای شما هم پیش آمده باشد که بخواهید قسمتی از اطلاعات به همراه فرم ارسال شوند ولی کاربر آن ها را مشاهده نکند و نیازی نباشد آن ها را وارد کند . برای این کار می توانید از فیلد مخفی استفاده کنید . کد زیر مربوط به یک فیلد مخفی می باشد :

<input type=”hidden” name=””pass” size=”20″ value=”اطلاعات مورد نظر”>

در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value قرار دهید و به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود .

کادر متنی با بیش از یک سطر (Text Area)

از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر (حرف)  در بیش از یک سطر استفاده کنند . بهتر است برای متن های طولانی به جای Text Box از Text Area استفاده کنیم تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آن را ویرایش کنند و کاربر می تواند به راحتی با درگ کردن از گوشه پایین سمت راست این کادر را کوچکتر یا بزرگتر کند  ، مثلاً در ثبت نظر کاربران می شود از این کادر استفاده کرد .

برای ایجاد Text Area باید از تگ <textarea> استفاده کنیم این تگ برخلاف تگ <input> یک تگ پایانی دارد و باید به وسیله تگ <textarea/> بسته شود . در مثال زیر می توانید کد مربوط به این تگ رو مشاهد کنید :

<textarea name=”nametext” cols=”30″ rows=”40″>متن مورد نظر
</textarea>

متنی که بین تگ ابتدایی و تگ پایانی قرار دارد به صورت پیش فرض در کادر Text Area نمایش داده می شود .  در اینجا به برخی از شناسه های قابل استفاده در تگ Text Area می پردازیم :

cols :

این شناسه عرض کادر را بر حسب تعداد کاراکتر تعیین می کند ، مقدار این شناسه باید مقدار مثبت باشد ، البته این عرض بستگی به اندازه فونت تعریف شده برای صفحه و مرورگر دارد . استفاده از این شناسه برای تگ <textarea>  الزامی است .

rows :

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

name :

از این شناسه برای اختصاص دادن یک نام مشخص برای تگ <textarea> استفاده می شود.

“readonly=”readonly :

این شناسه کادر را به صورت فقط خواندنی در می آورد و کاربر نمی تواند متن موجود در کادر را تغییر دهد .

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. سلام.ممنون بابت مطالب و وبسایت زیبایی که دارید