مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش html را دنبال می کنند. در بخش قبلی انواع مختلف عناصر input فرم ها را ارائه کردیم و کاربرد هر یک را نیز توضیح دادیم. عناصر input دارای صفات و ویژگی ها گسترده ای است که به شما اجازه می دهد تا انواع مختلف قوانین و محدودیت ها را به عناصر input خود اعمال کرده و یا ویژگی های خاصی را به آن اضافه کنید. این صفات در واقع در ایجاد عناصر input سفارشی کاربرد وسیعی دارند. برای آشنایی با انواع صفات input در html و طرز استفاده از آن در ادامه ی مباحث این بخش با ما همراه باشید.
خصوصیات input در html
در ادامه ی آموزش ما انواع صفات input در html به همراه ساختار و مثال هایی از آن ها را ارائه کرده ایم.
صفت value
صفت value مقدار داخل یک فیلد input را تعریف می کند:
مثال : صفت value
| <form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form> |
صفت readonly
صفت readonly محتوای یک فیلد input را غیر قابل ویرایش و فقط خواندنی می کند.
مثال : صفت readonly
| <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> </form> |
صفت disabled
صفت disabled یک فیلد input را غیر فعال می کند.
یک فیلد ورودی disabled (غیرفعال) غیر قابل استفاده و غیر قابل کلیک است و در هنگام ارسال فرم آن ارزش ارسال نمی شود:
مثال : صفت disabled
| <form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> </form> |
صفت size
صفت size اندازه (در کاراکترها) را برای فیلد input تعریف می کند.
مثال : صفت size
| <form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> </form> |
صفت maxlength
صفت maxlength حداکثر طول ورودی را برای فیلد input تعریف می کند.
مثال : صفت maxlenght
| <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> </form> |
با استفاده از ویژگی maxlength ، فیلد text، ورودی بیشتر از حد تعیین شده را قبول نمی کند.
ویژگی maxlength فقط جلوی ورودی اضافه تر را می گیرد و به کاربر هیچ اعلامی نمی کند.
برای هرگونه اعلام به کاربر باید از کدهای جاوااسکریپت استفاده کنید.
صفات HTML 5
در HTML 5 صفات جدیدی به فیلد input اضافه شده که به شرح زیر است:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- (pattern (regexp
- placeholder
- required
- step
همچنین صفات زیر برای <form> است:
صفت autocomplete
خصیصه autocomplete مشخص می کند که آیا یک فرم یا فیلد ورودی باید به صورت خودکار تکمیل شود یا خیر.
زمانیکه صفت autocomplete فعال باشد، مرورگر بصورت خودکار مقادیر ورودی را در هنگام تایپ کردن کاربر بر اساس مقادیری که کاربر قبلا وارد کرده تکمیل می کند.
نکته : ممکن است برای تکمیل فرم به صورت خودکار صفت autocomplete برای فرم “on” و برای فیلدهای ورودی خاص “off” یا برعکس باشد.
صفت autocomplete با <form> و انواع <input> از جمله : text, search, url, tel, email, password و… کار می کند.
مثال : تکمیل خودکار کد
| <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> |
صفت novalidate
ویژگی novalidate یک صفت برای یک <form> است.
Novalidate مشخص می کند که داده های فرم هنگام ارسال نمایش داده نمی شود.
مثال : عدم اعتبارسنجی
| <form action="/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> |
صفت autofocus
صفت focus مشخص می کند که یک فیلد input هنگام بارگذاری صفحه وب باید به حالت focus (انتخاب) برود.
صفت form
خصیصه form یک یا چند فرم را مشخص می کند که عنصر <input> متعلق به آن است.
نکته: برای مراجعه به بیش از یک فرم، از یک لیست از شناسه های فرم space-separated استفاده کنید.
مثال : عنصر form
| <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"> |
صفت formaction
صفت formaction آدرس URL یک فایل در کنترل input که در هنگام ارسال فرم پردازش می شود را مشخص می کند.
صفت formaction روی ویژگی action از عنصر <form> اعمال می شود.
صفت formaction با کدهای type="submit" و type="image" استفاده می شود.
مثال : صفت formaction
| <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> |
صفت formenctype
صفت formenctype مشخص می کند که چگونه داده های یک فرم در هنگام ارسال encode شود.
صفت formenctype روی ویژگی enctype از عنصر <form> اعمال می شود.
صفت formenctype با type="submit" و type="image" استفاده می شود.
مثال : صفت formenctype
| <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> |
صفت formmethod
صفت formmethod متد HTTP را برای ارسال داده های فرم به آدرس action تعریف می کند.
صفت formmethod روی صفت method از عنصر <form> اعمال می شود.
صفت formmethod می تواند با type="submit" و type="image" استفاده شود.
مثال : ویژگی method
| <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" value="Submit using POST"> </form> |
صفت formnovalidate
صفت formnovalidate روی صفت novalidate از عنصر <form> اعمال می شود.
صفت formnovalidate می تواند با type="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> |
صفت formtarget
ویژگی formtarget یک نام یا یک کلمه کلیدی را مشخص می کند که نشان می دهد کجا پاسخی را که پس از ارسال فرم دریافت شده است نمایش دهد.
صفت formtarget روی صفت target از عنصر <form> اعمال می شود.
صفت formtarget می تواند با type="submit" و type="image" استفاده شود.
مثال : نمایش پاسخ دریافتی از سرور
| <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> |
صفات height و width
صفات height و width ارتفاع و عرض یک عنصر <input type="image"> را مشخص می کند.
نکته : همیشه اندازه تصاویر را مشخص کنید. اگر مرورگر اندازه را نداشته باشد، صفحه هنگام بارگیری تصاویر، سوسو می شود.
مثال : صفت width و height
| <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> |
صفت list
صفت list به یک عنصر <datalist> که شامل آپشن هایی برای تگ <input> است اشاره می کند.
مثال : عنصر datalist
| <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
صفات min و max
صفات min و max حداقل و حداکثر مقادیر را برای عنصر <input> مشخص می کند.
صفات min و max با انواع input که شامل : number, range, date, datetime-local, month, time and week می شود کار می کند.
مثال : صفت min و max
| Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> |
صفت multiple
صفت multiple مشخص می کند که کاربر می تواند بیشتر از یک مقدار را در ورودی input وارد کند.
صفت multiple برای دو نوع از عنصر input که شامل : email و file می شود کاربرد دارد.
صفت pattern
صفت pattern در واقع یک regular expression (عبارت منظم) که ورودی تگ <input> را چک می کند مشخص می کند.
با انواع عناصر input از جمله : text, search, url, tel, email و password کار می کند.
مثال : صفت pattern
| Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> |
صفت placeholder
صفت placeholder در واقع یک متن پیش فرض یا راهنما داخل ورودی input قرار می دهد که به محض کلیک کاربر حذف می شود.
ویژگی placeholder را می توان در انواع عناصر input از جمله : text, search, url, tel, email و password بکار برد.
مثال : صفت placeholder
| <input type="text" name="fname" placeholder="First name"> |
صفت required
صفت required مشخص می کند که یک فیلد ورودی input قبل از ارسال فرم باید مقدار داشته باشد.
صفت required با عناصر input از جمله: text, search, url, tel, email, password, date pickers, number, checkbox, radio و file کار می کند.
صفت step
صفت step فواصل عددی را در عنصر <input> مشخص می کند.
به عنوان مثال اگر step=”3″ باشد فواصل عددی برابر با : -۳, ۰, ۳, ۶ خواهد بود.
نکته : ویژگی step را می توان با ویژگی های min و max برای ایجاد طیف وسیعی از مقادیر قانونی مورد استفاده قرار داد.
ویژگی step را می توان با انواع ورودی های input از جمله : number, range, date, datetime-local, month, time و week مورد استفاده قرار داد.
کلام آخر
در بخش قبلی انواع فیلدهای input و کاربردهای هر یک را ارائه دادیم ، همانطور که عناصر input گستره ی وسیعی را شامل می شوند، صفات input در html نیز از تنوع و کاربرد گسترده ای برخوردار است که ما در این بخش به آن پرداختیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
