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