طراحی سایت ساناتک
0
تگ Text Input

Text input

این کنترل را بسیار در صفحات وب دیده اید. Text input ، ساده ترین نوع اطلاعات ورودی فُرم است که کاربر سایت وارد می کند.

یک text input ساده

یک text input ساده

کد HTML برای این کنترل به صورت زیر است:

<p>

<label for="yourname">Enter your name:</label>

<input type="text" name="yourname" id="yourname"/>

</p>

 بیایید به تک تک اجزاء نگاهی بیاندازید

تگ label

این تگ برای label دار کردن یک کنترل استفاده می شود تا کاربر بداند چه نوع اطلاعاتی را باید وارد کند.

خصوصیت type

می توانیم تگِ input را به یک ورودی ساده متن—text input control—تبدیل کنیم، این کار با استفاده از تنظیم خصوصیت type به مقدار text صورت می گیرد.

خصوصیت name

بخش yourname از خصوصیت name تگِ input آمده است که به ما می فهماند کدام بخش از اطلاعات از کنترل مورد نظر آمده است.

خصوصیت id

در نگاه اول خصوصیت id با خصوصیت name و برای برخی از کنترل ها یکسان به نظر می رسد و در برخی موارد نیز هست. گرچه بعدها خواهیم دید که بعضی از کنترل ها می توانند اسامی یکسانی را داشته باشند و در این شرایط است که id  در تمییز دادن بین کنترل های صفحه سایت به ما کمک می کند.

خصوصیت id استفاده های متعددی دارد، یکی از آن ها را در CSS دیده ایم، در این مثال هدف از استفاده این خصوصیت اعطای یک نقطه ارجاع به label است.

شاید قصد افزودن خصوصیت های دل بخواهی و نه چندان مهم را نیز داشته باشید.

size

برای مرورگر تعریف می کند که در جعبه نوشته چند کاراکتر به عنوان ورودی نمایش داده شود(در حالت ایده آل باید عرض را با CSS تعریف کنید).

maxlenghth

حد بالایی برای میزان کاراکترهای ورودی از طرف کاربر درون جعبه متن تعریف می کند.ا

تنظیم مقدار یک جعبه متن 

اگر می خواهید مقدار اولیه یک جعبه متن را تعریف کنید می توانید از خصوصیت value استفاده کنید. برای این کار markup زیر را در یک فُرم بارگزاری کنید، خواهید دید که یک جعبه متن با مقدار “Bob” برای شما به نمایش در می آید.

<p>

<label for="yourname">Enter your name:</label>

<input type="text" name="yourname" id="yourname" value="Bob"/>

</p>

ورودی کلمه عبور

کنترل password input تقریبا به مانند کنترل text input می ماند، البته با یک تفاوت مهم: در اینجا کاراکترهای وارد شده به صورت نقطه یا ستاره به نمایش در خواهند آمند. 

<p>

<label for="password">Your password:</label>

<input type="password" id="password" name="password"/>

</p>

کنترل password input کاراکترها را به شکل ستاره نمایش داده است

 کنترل password input کاراکترها را به شکل ستاره نمایش داده است

یک password input فُرم شما را ایمن نخواهد کرد

با وجود اینکه password input از به نمایش در آمدن کاراکترها جلوگیری کرده و افراد دیگر کاراکترهای وارد شده را نمی بینند اما این به معنی امنیت ارسال داده ها نیست. برای ایمن کردن عمل ارسال داده باید از پروتکل HTTPS استفاده کنید، شاید توجه نکرده باشید اما فرآیند submit در سایت هایی چون آمازون در صفحاتی با این پروتکل صورت می گیرند، به همین دلیل است که در بخش آدرس بالای مرورگر علامت قفل کوچکی به نمایش در می آید..

تعداد بازدید: 287
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
verification
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید