مقدمه
با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش html را دنبال می کنند. در بخش قبلی ما انواع عناصر فرم پر کاربرد در HTML را معرفی کردیم. همچنین ساختار عنصر input که مهترین عنصر برای دریافت ورودی در فرم هاست را تا حدودی مورد بررسی قرار داده و با طرز بکارگیری آن نیز آشنا شدیم. در ادامه در این بخش قصد داریم تا به جزئیات بیشتری از عنصر فوق پرداخته و انواع ورودی در HTML ار شرح دهیم، شما نیاز به دریافت ورودی ها مختلف از کاربران دارید ، از این رو باید با انواع ورودی در HTML آشنا بوده و از آن ها برحسب نیاز استفاده نمائید. برای آشنایی بیشتر با این مباحث و کاربرد انواع ورودی در HTML در ادامه آموزش با ما همراه باشید.
انواع ورودی در HTML
عنصر input بسته به نوع ورودی در فرمت های مختلفی تعریف می شود که در این بخش به آن پرداخته ایم.
نوع text در Input
کد <input type="text"> یک فیلد ورودی تکی را تعریف می کند:
مثال : نوع ورودی text
| <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> |
کد html فوق عناصر زیر را در صفحه مرورگر نشان می دهد:
First name:
Last name:
نوع ورودی password در Input
تگ <input type="password"> یک فیلد password را تعریف می کند.
مثال : نوع ورودی password
| <form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form> |
کد HTML فوق نتیجه زیر را نشان می دهد:
User name:
User password:
نکته : کاراکترهای یک فیلد رمز عبور (به صورت ستاره یا حلقه نشان داده میشوند) پنهان می شوند.
نوع ورودی submit
تگ <input type="submit"> یک button را برای ارسال داده های فرم به form-handler ایجاد می کند.
form-handler فرم معمولا یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.
ویژگی form-handler در صفت action فرم تعریف می شود.
مثال : نوع ورودی submit
| <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> </form> |
کد html فوق نتیجه زیر را نشان می دهد:
First name:
Last name:
اگر مقدار value را از submit را حذف کنید، دکمه یک متن پیش فرض را دریافت می کند:
مثال : ویژگی value
| <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit"> </form> |
نوع reset در عنصر input
تگ <input type="reset"> یک دکمه reset را تعریف می کند تا با کلیک روی آن تمام مقادیر فرم به حالت پیش فرض تنظیم شود.
مثال : عنصر reset
| <form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"><br> Last name:<br> <input type="text" name="lastname" value="Mouse"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form> |
کد html فوق نتیجه ی زیر را نشان می دهد:
First name:
Last name:
اگر مقادیر ورودی را تغییر دهید و سپس بر روی دکمه “Reset” کلیک کنید، داده های فرم به مقادیر پیش فرض بازنشانی می شوند.
نوع ورودی radio
عنصر <input type="radio"> یک radio button تعریف می کند.
radio button به شما اجازه می دهد تا فقط یک گزینه از تعداد محدودی از گزینه ها را انتخاب کنید:
مثال : ورودی radio
| <form> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </form> |
کد html فوق نتیجه ی زیر را در مرورگر نمایش می دهد:
Male
Female
Other
نوع ورودی checkbox
تگ <input type="checkbox"> یک عنصر checkbox را ایجاد می کند.
Checkbox گزینه هایی را ایجاد می کند، که کاربر می تواند یک یا چند مورد از آن گزینه ها را انتخاب کرده و یا هیچیک را انتخاب نکند:
مثال : ورودی checkbox
| <form> <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="Car"> I have a car </form> |
کد html فوق نتیجه زیر را در مرورگر ایجاد می کندم:
I have a bike
I have a car
نوع ورودی button
تگ <input type="button"> یک عنصر button تعریف می کند:
مثال : ورودی button
| <input type="button" onclick="alert('Hello World!')" value="Click Me!"> |
کد html فوق خروجی زیر را نمایش می دهد:
انواع عناصر input در HTML 5
در HTML 5 انواع ورودی های input زیر نیز اضافه شده است:
- color
- date
- datetime-local
- email
- month
- number
- range
- search
- tel
- time
- url
- week
انواع ورودی جدید که توسط مرورگرهای وب قدیمی پشتیبانی نمی شوند، به عنوان <input type = "text"> رفتار خواهند کرد.
نوع ورودی color
تگ <input type="color"> برای فیلدهای ورودی که شامل رنگ هستند استفاده می شود.
بسته به پشتیبانی مرورگر، یک انتخاب رنگ می تواند در زمینه ورودی نشان داده شود.
مثال : ورودی color
| <form> Select your favorite color: <input type="color" name="favcolor"> </form> |
نوع ورودی Date
تگ <input type="date"> برای فیلدهایی که شامل تاریخ می شوند استفاده می شود.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود:
شما می توانید از صفات min و max برای اعمال محدودیت در تاریخ استفاده کنید.
مثال : صفات min و max
| <form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> </form> |
نوع ورودی Datetime local
تگ <input type="datetime-local"> یک فیلد ورودی تاریخ و زمان را بدون time zone مشخص می کند.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
مثال : نوع datetime-local
| <form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form> |
نوع ورودی Email
تگ <input type="email"> برای فیلدهای input که نیاز به وارد کردن آدرس Email دارند استفاده می شود.
بسته به پشتیبانی مرورگر، آدرس ایمیل می تواند به صورت خودکار هنگام تأیید تأیید شود.
بعضی از گوشی های هوشمند نوع ایمیل را تشخیص می دهند و “.com” را به صفحه کلید اضافه می کنند تا ورودی های ایمیل را مطابقت دهند.
نوع ورودی File
تگ <input type="file"> برای مواردی که نیاز به وارد کردن فایل توسط کاربر دارد استفاده می شود.
مثال : نوع ورودی file
| <form> Select a file: <input type="file" name="myFile"> </form> |
نوع ورودی month
تگ <input type="month"> به کاربر اجازه می دهد تا ماه و سال را انتخاب می کند.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
مثال : نوع ورودی ماه
| <form> Birthday (month and year): <input type="month" name="bdaymonth"> </form> |
نوع ورودی عدد
تگ <input type="number"> یک فیلد ورودی عددی تعریف می کند.
شما همچنین می توانید محدودیت هایی را برای تعداد اعداد پذیرفته شده تنظیم کنید.
مثال زیر یک فیلد ورودی عددی را نشان می دهد، جایی که می توانید مقدار ۱ تا ۵ را وارد کنید:
مثال : نوع ورودی عدد
| <form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> </form> |
صفات عنصر Input
در اینجا یک لیست از محدودیت های ورودی مشترک وجود دارد (برخی از آنها در HTML5 جدید هستند):
| صفت | توضیحات |
|---|
| disabled | تعیین می کند که یک فیلد ورودی باید غیرفعال شود. |
| max | حداکثر مقدار یک فیلد ورودی را مشخص می کند. |
| maxlength | حداکثر تعداد کاراکتر برای یک فیلد ورودی را مشخص می کند. |
| min | مقدار حداقل برای یک فیلد ورودی را مشخص می کند. |
| pattern | الگوی یک عبارت منظم را برای بررسی مقدار ورودی در مقابل مشخص می کند. |
| readonly | مشخص می کند که یک فیلد ورودی فقط خواندنی (قابل تغییر نیست). |
| required | مشخص می کند که یک فیلد ورودی مورد نیاز است (باید پر شود). |
| size | تعیین عرض (در حروف) یک فیلد ورودی. |
| step | تعداد قانونی را برای فیلد ورودی مشخص می کند. |
| value | مقدار پیش فرض برای یک فیلد ورودی را مشخص می کند. |
مثال زیر یک فیلد ورودی عددی را نشان می دهد، که در آن می توانید یک مقدار از ۰ تا ۱۰۰ را در مراحل ۱۰ وارد کنید. مقدار پیش فرض ۳۰ است:
مثال : رنج عددی
| <form> Quantity: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form> |
نوع ورودی range
تگ <input type="range"> یک نوار لغزان را با یک دکمه روی آن، برای انتخاب یک رنج عددی توسط کاربر ایجاد می کند.
حال پیش فرض مقادیر آن ۰ تا ۱۰۰ است.
با این حال شما می توانید با صفات min و max و step حداقل و حداکثر مقادیر و فواصل بین مقادیر را مشخص کنید:
مثال : نوع ورودی Range
| <form> <input type="range" name="points" min="0" max="10"> </form> |
نوع ورودی search
تگ <input type="search"> برای ایجاد فیلدهای search استفاده می شود.
مثال : نوع search
| <form> Search Google: <input type="search" name="googlesearch"> </form> |
نوع ورودی tel
تگ <input type="tel"> فیلدی را برای دریافت شماره تلفن از کاربر ایجاد می کند.
نکته : این ویژگی در مرورگر Safari 8 پشتیبانی نمی شود.
مثال : ورودی شماره تلفن
| <form> Telephone: <input type="tel" name="usrtel"> </form> |
نوع ورودی Time
تگ <input type="time"> به کاربر اجازه انتخاب یک Time را می دهد.
بسته به پشتیبانی مرورگر شما یک تگ فوق time picker را در فیلد input ظاهر می کند.
مثال : ورودی time
| <form> Select a time: <input type="time" name="usr_time"> </form> |
نوع ورودی URL
تگ <input type="url"> برای فیلدهایی استفاده می شود که نیاز به تایپ آدرس URL دارند.
بسته به پشتیبانی مرورگر، فیلد URL زمانی که ارسال می شود، می تواند به صورت خودکار تایید شود.
مثال : ورودی url
| <form> Add your homepage: <input type="url" name="homepage"> </form> |
نوع ورودی week
تگ <input type="week"> به کاربر اجازه می دهد تا هفته و سال را انتخاب کند.
بسته به پشتیبانی مرورگر شما یک تگ فوق Date picker را در فیلد input ظاهر می کند.
مثال : ورودی week
| <form> Select a week: <input type="week" name="week_year"> </form> |
کلام آخر
مهمترین و پرکاربردترین عنصر فرم در html تگ های ورودی (Input) هستند که طیف وسیعی از داده های مختلف را از کاربر دریافت می کنند، از این رو مباحث این بخش را به آشنایی شما با انواع ورودی در HTML اختصاص دادیم.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
ali sh
خیلی ممنون . مفید برام بود مطالبتون
amir
سلام
واقعا متشکرم از توضیحات شما پر کاربرد و خلاصه بود
یک خسته نباشید میگم به تمام کارکنان pvlearn
این هم بقیه ستاره هاش
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
پی وی لرن
سلام
ممنون، خوشحالیم که مورد رضایت شما واقع شده است.
میتی
عالی بود حال کردم دستاتون طلا