صفات عناصر Input در HTML

همانطور که در فصل آشنایی با صفات اشاره کردیم ، صفات اطلاعات اضافی را در مورد عنصر HTML فراهم می آورد. در فصول قبلی به بعضی از این صفات اشاره کرده و کاربرد آنها را توضیح دادیم. در این فصل به طور خاص به صفات مربوط به عناصر Input خواهیم پرداخت.


 صفت value

مقدار اولیه برای یک فیلد ورودی از طریق صفت value مشخص میشود. در مثال زیر مقدار اولیه برای فیلد ورودی firstname ، مقدار John تعیین شده است :

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>
خودتان امتحان کنید

صفت readonly

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

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>
خودتان امتحان کنید

صفت disabled

برای نمایش یک فیلد ورودی در حالتی که غیر فعال است از صفت disabled استفاده میکنیم. فیلد های Input در حالت غیر فعال ، غیر قابل کلیک و غیر قابل انتخاب بوده و مقادیر آنها در هنگام submit، به سمت سرور ارسال نمیشود.

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form>
خودتان امتحان کنید

نکته : به نحوه ی به کاربردن صفت disabled در مثال دقت کنید. بر خلاف دیگر صفات که از قاعده ی نام / مقدار استفاده میکنند برای استفاده از این صفت به به کاربردن نام آن به تنهایی کافی است.


صفت maxlength 

حداکثر تعداد کاراکتری که میتوان در یک فیلد ورودی تایپ کرد توسط صفت maxlength تعیین میشود. در مثال زیر حداکثر تعداد کارکتر برای فیلد firstname مقدار 10 تعیین شده است.

<form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form>
خودتان امتحان کنید

دقت داشته باشید که صفت maxlength هشداری را برای زمانی که کاربر از مقدار مجاز تعداد کارکتر عبور کند فراهم نمی آورد و این وظیفه ی شما به عنوان برنامه نویس است که با استفاده از زبان JavaScript این هشدار را برای کاربر فراهم کنید.


صفات در HTML5

زبان HTML5 صفات زیر را به عنصر <input> اضافه کرده است :

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • (pattern (regexp
  • placeholder
  • required
  • step

و البته صفاتی را هم برای عنصر <form> فراهم آورده است :

  • autocomplete
  • novalidate 

که در ادامه به بعضی از آنها خواهیم پرداخت.


صفت autocomplete

در صفاتی که در قسمت قبل به آنها اشاره کردیم ، صفت autocomplete هم برای عنصر <input> و هم برای عنصر <form> وجود دارد.

صفت autocomplete مشخص میکند که قابلیت تکمیل خودکار برای عناصر <input> و یا <form> وجود داشته باشد یا خیر. قابلیت تکمیل خودکار به این معناست که اگر کاربری قبلا مقادیری را در عناصری مانند <input> وارد کرده باشد، بار بعدی مرورگر براساس مقادیر قبلی میتواند فیلد ها را پر کند.

وقتی از این صفت برای عنصر <form> استفاده میکنیم ، آن به تمام عناصر input داخل فرم اعمال میشود. در این حالت میتوان عنصری خاص را با مقدار "autocomplete="off از بقیه متمایز کرد.

نمونه مثال زیر نحوه ی استفاده از صفت autocomplete را نشان میدهد :

<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

در بعضی از مرورگر ها ممکن است برای استفاده از قابلیت تکمیل خودکار نیاز به فعال کردن عملکرد autocomplete باشد.


صفت novalidate

از این صفت برای عنصر <form> استفاده میشود.

فرم ها با استفاده از زبان جاوااسکریپت میتوانند قبل از این که به سمت سرور ارسال شوند، اعتبارسنجی شوند. برای جلوگیری از این عمل میتوان از صفت novalidate در فرم استفاده کرد.

نمونه کد زیر نحوه ی استفاده از این صفت را نشان میدهد :

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت autofocus

گاهی اوقات نیاز است وقتی کاربر صفحه ای را باز میکند مستقیما فیلد ورودی انتخاب شده باشد. یعنی کاربر نیاز نداشته باشد برای تایپ در فیلد ورودی ابتدا آن را انتخاب کند. برای رسیدن به چنین امکانی از صفت autofocus استفاده میکنیم.

نمونه مثال زیر نحوه ی استفاده از این صفت را نشان میدهد :

First name:<input type="text" name="fname" autofocus>
خودتان امتحان کنید

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت form

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

نمونه مثال زیر نحوه ی استفاده از این صفت را نشان میدهد :

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

در مثال بالا فیلد ورودی lname متعلق به فرم form1 است. این قابلیت در اینترنت اکسپلورر پشتیبانی نمیشود.


صفت formaction

صفت formaction آدرسی از یک صفحه را مشخص میکند که وقتی فرم به سمت سرور ارسال میشود کنترل input توسط آن پردازش میشود.

صفت formaction صفت action عنصر  <form> را override میکند.

صفت formaction با صفت های "type="submit و "type="image استفاده میشود.

 در نمونه مثال زیر عنصر فرم دارای دو دکمه ی submit با دو اکشن مختلف است :

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت formenctype

صفت formenctype مشخص میکند که هنگام submit ، داده های فرم چگونه باید انکد شود (تنها برای فرم هایی که از صفت "method="post استفاده میکنند).

صفت formenctype  صفت enctype عنصر <form> را override میکند.

صفت formenctype با صفت های "type="submit و "type="image استفاده میشود.

در نمونه مثال زیر وقتی روی دکمه ی سابمیت اولی کلیک شود داده ها به روش پیشفرض انکد شده ، درحالی که با کلیک روی دکمه ی سابمیت دوم، داده ها به عنوان "multipart/form-data" انکد میشوند.

<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت formmethod

صفت formmethod روش HTTP را برای ارسال داده های فرم به یک آدرس مشخص تعریف میکند.

صفت formmethod صفت method عنصر <form> را override میکند.

صفت formmethod با صفت های "type="submit و "type="image استفاده میشود.

در نمونه مثال زیر در هنگام استفاده از دکمه ی سابمیت اول داده ها به روش get ارسال میشود ، در حالی که دکمه ی سابمیت دوم داده ها را به روش post ارسال میکند.

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="action_page_post.asp"
  value="Submit using POST">
</form>

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت formnovalidate

صفت formnovalidate صفت novalidate فرم را لغو میکند. این صفت با استفاده از صفت "type="submit میتواند مورد استفاده قرار گیرد.

در نمونه مثال زیر یک فرم با دو دکمه submit را نشان میدهد (یکی اعتبارسنجی میکند و دیگری نه) :

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت formtarget

صفت formtarget مشخص میکند که پاسخ فرم ارسالی به سمت سرور در کجا نمایش داده شود.

صفت formtarget مقدار صفت target عنصر فرم را لغو میکند.

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

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت placeholder

از صفت placeholder برای نمایش متنی در فیلد ورودی قبل از ورود داده های کاربر استفاده میشود. مقدار این صفت هنگام تایپ اولین کارکتر توسط کارکتر از بین می رود.
در نمونه مثال زیر نحو ه ی استفاده از این صفت را نشان میدهد :

<input type="text" name="fname" placeholder="First name">
خودتان امتحان کنید

این صفت در مرورگر اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.


صفت required

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

در نمونه مثال زیر نحو ه ی استفاده از این صفت را نشان میدهد :

Username: <input type="text" name="usrname" required>

این صفت در مرورگر سافاری و اینترنت اکسپلورر 9 و نسخه های قدیمی تر آن پشتیبانی نمیشود.

منتشر شده در ۲ تیر ۱۳۹۶ حمید رضا ملکی ۱۱۵۴ بازدید
دیدگاه ها
محمد چهار شنبه ۲۸ شهریور ۱۳۹۷

آموزش ها عالی هستند و همینکه از سبک w3 استفاده کردید برای نمایش نمونه ها کار بسیار عالی بود. فقط تو این بخش یکسری اشکالات هست: 1- در بخش maxlength به جای استفاده از صفت maxlength از size استفاده شده و در متن از مقدار 10 نام بردید که 40 درج شده. طبق منبع باید از صفت maxlength استفاده بشه. منبع :https://www.w3schools.com/tags/att_input_maxlength.asp 2- در بخش formaction این صفت خاصیت action روی تگ form رو override می کنه و شما از عبارت "از کار نمی اندازد" استفاده کردید که به نظر من بهتر بود از معنی خود override استفاده می کردید تا متن خاصیت علمی و فنی خودشو داشته باشه. در بخشی هم فرمودید که روی submit و submit کار می کنه که طبق منبع روی submit و image کار می کنه و به اشتباه دوبار submit درج شده منبع: https://www.w3schools.com/tags/att_input_formaction.asp 3- در بخش formenctype همان مشکل override را داریم.مشکل 2 تا subimt هم داریم در این بخش بهتر بود انواع encryption هم توضیح می دادید. application/x-www-form-urlencoded multipart/form-data text/plain منبع: https://www.w3schools.com/TAGS/att_form_enctype.asp در بخش formmethod همان مشکل دو تا submit منبع: https://www.w3schools.com/tags/att_input_formmethod.asp مجددا از آموزش شما کمال تشکر را دارم.

حمید رضا ملکی پنجشنبه ۲۹ شهریور ۱۳۹۷

ممنون از اینکه وقت گذاشتید و اشکالات را برای ما فرستادید. اصلاح شد