| قدم قبلی > | < قدم بعدی |
در این آموزش html به معرفی انواع ورودی های HTML می پردازیم.
در این فصل انواع ورودی های مختلف برای عنصر <input> را معرفی میکنیم.
نوع ورودی Text
<input type = “text”> یک فیلد ورودی یک خط یا متنی را تعریف می کند:
۱ ۲ ۳ ۴ ۵ ۶ | <form> First name:<br> <input type="text" name="firstname"><br> Last name:<br> <input type="text" name="lastname"> </form> |
نوع ورودی Password
<input type = “password”> یک فیلد رمز عبور را تعریف می کند:
۱ ۲ ۳ ۴ ۵ ۶ | <form> User name:<br> <input type="text" name="username"><br> User password:<br> <input type="password" name="psw"> </form> |
کاراکترهای یک فیلد رمز عبور (به صورت ستاره یا حلقه نشان داده میشوند) پنهان میشوند.
نوع ورودی Submit
<input type = “submit”> یک دکمه را برای ارسال داده فرم به یک handler form تعریف می کند.
فرم دستیار معمولا یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.
فرم دستیار در مشخصه عمل فرم مشخص شده است:
۱ ۲ ۳ ۴ ۵ ۶ ۷ | <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> |
اگر مقدار Attribute button را حذف کنید، دکمه یک متن پیش فرض را دریافت می کند:
۱ ۲ ۳ ۴ ۵ ۶ ۷ | <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 type = “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> |
اگر مقادیر ورودی را تغییر دهید و سپس بر روی دکمه “Reset” کلیک کنید، داده های فرم به مقادیر پیش فرض بازنشانی می شوند.
نوع ورودی Radio
<input type = “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> |
نوع ورودی Checkbox
<input type = “checkbox”> یک چک باکس را تعریف می کند.
جعبه های چک اجازه دهید که کاربر گزینه های ZERO یا MORE را برای تعداد محدودی از گزینه ها انتخاب کند.
۱ ۲ ۳ ۴ | <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> |
نوع ورودی Button
<input type = “button”> یک دکمه را تعریف می کند:
۱ | <input type="button" onclick="alert('Hello World!')" value="Click Me!"> |
انواع ورودی HTML5
HTML5 چند نوع ورودی جدید اضافه کرد:
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
انواع ورودی جدید که توسط مرورگرهای وب قدیمی پشتیبانی نمی شوند، به عنوان <input type = “text”> رفتار خواهند کرد.
نوع ورودی color
<input type = “color”> برای فیلدهای ورودی که باید شامل یک رنگ باشد استفاده می شود.
بسته به پشتیبانی مرورگر، یک انتخاب رنگ می تواند در زمینه ورودی نشان داده شود.
۱ ۲ ۳ ۴ | <form> Select your favorite color: <input type="color" name="favcolor"> </form> |
نوع ورودی Date
<input type = “date”> برای فیلدهای ورودی که باید حاوی یک تاریخ باشد استفاده می شود.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
۱ ۲ ۳ ۴ | <form> Birthday: <input type="date" name="bday"> </form> |
شما همچنین می توانید از ویژگی های min و max برای اضافه کردن محدودیت به تاریخ استفاده کنید:
نوع ورودی Datetime-local
<input type = “datetime-local”> یک فیلد ورودی تاریخ و زمان را بدون هیچ زون زمان مشخص می کند.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
۱ ۲ ۳ ۴ | <form> Birthday (date and time): <input type="datetime-local" name="bdaytime"> </form> |
نوع ورودی Email
<input type = “email”> برای فیلدهای ورودی که باید شامل یک آدرس ایمیل باشد استفاده می شود.
بسته به پشتیبانی مرورگر، آدرس ایمیل می تواند به صورت خودکار هنگام تأیید تأیید شود.
بعضی از گوشی های هوشمند نوع ایمیل را تشخیص می دهند و “.com” را به صفحه کلید اضافه می کنند تا ورودی های ایمیل را مطابقت دهند.
۱ ۲ ۳ ۴ | <form> E-mail: <input type="email" name="email"> </form> |
نوع ورودی File
<input type = “file”> یک فیلد انتخاب فایل و یک “Browse” را برای آپلود فایل تعریف می کند.
۱ ۲ ۳ | <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> |
نوع ورودی Number
<input type = “number”> یک فیلد ورودی عددی را تعریف می کند.
شما همچنین می توانید محدودیت هایی را برای تعداد اعداد پذیرفته شده تنظیم کنید.
مثال زیر یک فیلد ورودی عددی را نشان می دهد، جایی که می توانید مقدار ۱ تا ۵ را وارد کنید:
۱ ۲ ۳ ۴ | <form> Quantity (between ۱ and ۵): <input type="number" name="quantity" min="۱" max="۵"> </form> |
نوع ورودی Range
<input type = “range”> یک کنترل را برای وارد کردن یک شماره تعیین می کند که مقدار دقیق آن مهم نیست (مانند کنترل لغزنده). محدوده پیش فرض ۰ تا ۱۰۰ است. با این حال، می توانید محدودیت هایی را برای تعداد عددی با حداقل، حداکثر و ویژگی های مرحله پذیرفته کنید.
۱ ۲ ۳ | <form> <input type="range" name="points" min="۰" max="۱۰"> </form> |
نوع ورودی Search
<input type = “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”> اجازه می دهد تا کاربر یک زمان (بدون منطقه زمانی) را انتخاب کند.
بسته به پشتیبانی مرورگر، زمان انتخاب می تواند در زمینه ورودی نشان داده شود.
۱ ۲ ۳ ۴ | <form> Select a time: <input type="time" name="usr_time"> </form> |
نوع ورودی Url
<input type = “url”> برای فیلدهای ورودی که باید آدرس URL را داشته باشند استفاده می شود.
بسته به پشتیبانی مرورگر، فیلد URL زمانی که ارسال می شود، می تواند به صورت خودکار تایید شود.
بعضی از گوشی های هوشمند نوع url را تشخیص می دهند و “.com” را به صفحه کلید اضافه می کنند تا ورودی های ورودی را مطابقت دهند.
۱ ۲ ۳ ۴ | <form> Add your homepage: <input type="url" name="homepage"> </form> |
نوع ورودی Week
<input type = “week”> به کاربر اجازه می دهد یک هفته و سال را انتخاب کند.
بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.
۱ ۲ ۳ ۴ | <form> Select a week: <input type="week" name="week_year"> </form> |
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.