کلید واژه مورد نظر را تایپ کنید
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
تلفن تماس: ۲۳۴۵۶ ۲۸۴ ۰۲۱
بهترین ایده
  • دوره‌های آموزشی
    • کسب و کار اینترنتی پولساز
    • تبدیل ایده به محصول
    • خلق استراتژی کسب و کار
    • ایجاد مزیت رقابتی در کسب و کار
  • آموزش رایگان
    • دوره رایگان کسب و کار اینترنتی
    • ویدیوهای آموزشی
    • پادکست‌های آموزشی
  • وبلاگ
    • کسب و کار اینترنتی
      • کارآفرینی اینترنتی
      • کار در منزل
      • ایده های پولساز
      • مدیریت کسب و کار اینترنتی
    • بازاریابی اینترنتی
      • سئو
      • ایمیل مارکتینگ
      • سوشیال مارکتینگ
      • اینستاگرام مارکتینگ
      • همکاری در فروش
    • کارآفرینی
      • ایده های کارآفرینی
      • کسب درآمد
      • استارت آپ
      • برندسازی
      • موفقیت فردی
      • معرفی کارآفرینان برتر
  • کسب درآمد
  • حساب کاربری
0
ورود / عضویت

وبلاگ

بهترین ایده / طراحی سایت / انواع ورودی html

انواع ورودی html

انواع ورودی html  در فرم ها

آموزش فرم های  html  درس سوم

انواع ورودی html  : در این درس انواع محتلف ورودی عنصر <input> توضیح داده شده است.

 

انواع ورودی html
انواع ورودی html

Input Type Text

<input type=”text”> یک فیلد ورودی متن یک خطی را تعریف می کند.

مثال:

[php]

<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>

[/php]

Input Type Password

<input type=”password”> فیلد پسورد را تعریف می کند:

مثال :

[php]

<form>
User name:
<input type="text" name="username">
User password:
<input type="password" name="psw">
</form>

[/php]

نکته : کاراکترهای یک فیلد رمز عبور (پوشیده شده به عنوان ستاره یا حلقه) نشان داده می شوند.

 

Input Type Submit

 <input type=”submit”> یک دکمه را برای ارسال داده فرم به یک handler form تعریف می کند.

handler form معمولاً یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.

handler form در ویژگی  action  فرم مشخص شده است:

مثال:

[php]

<form action="/action_page.php">
First name:
<input type="text" name="firstname" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">

<input type="submit" value="Submit">
</form>

[/php]

اگر مقدار  submit را حذف کنید، دکمه یک متن پیش فرض را دریافت می کند:

[php]

<form action="/action_page.php">
First name:
<input type="text" name="firstname" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">

<input type="submit">
</form>

[/php]

Input Type Reset

<input type=”reset”>یک دکمه reset را تعریف می کند که تمام مقادیر فرم را به مقادیر پیش فرض آن باز می گرداند:

مثال:

[php]

<form action="/action_page.php">
First name:
<input type="text" name="firstname" value="Mickey">
Last name:
<input type="text" name="lastname" value="Mouse">

<input type="submit" value="Submit">
<input type="reset">
</form>

[/php]

اگر مقادیر ورودی را تغییر دهید و سپس بر روی دکمه “Reset” کلیک کنید، داده های فرم به مقادیر پیش فرض  reset می شوند.

Input Type Radio

<input type=”radio”>  دکمه های radio را تعریف می کند.

دکمه های رادیویی به شما اجازه می دهد تا فقط یک انتخاب از تعداد محدودی از گزینه ها را انتخاب کنید:

[php]

<form>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
</form>

[/php]

Input Type Checkbox

<input type=”checkbox”> یک checkbox را تعریف می کند.

  checkbox اجازه  می دهد که کاربر صفر گزینه یا بیشتر  را برای تعداد محدودی از گزینه ها انتخاب کند.

مثال :

[php]

<form>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike
<input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>

[/php]

Input Type Button

<input type=”button”> یک دکمه را تعریف می کند.

مثال :

[php]
<input type="button" onclick="alert(‘Hello World!’)" value="Click Me!">
[/php]

HTML5 Input Types

HTML5  انواع ورودی html جدید اضافه کرد:

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

نکته :  انواع ورودی html جدید که توسط مرورگرهای وب قدیمی پشتیبانی نمی شوند، به عنوان <input type = “text”> رفتار خواهند کرد.

انواع ورودی html
انواع ورودی html

Input Type Color

<input type = “color”> برای فیلدهای ورودی که باید شامل یک رنگ باشد استفاده می شود.

بسته به پشتیبانی مرورگر، یک انتخاب رنگ می تواند در زمینه ورودی نشان داده شود.

مثال :

[php]

<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

[/php]

Input Type Date

<input type = “date”> برای فیلدهای ورودی که باید حاوی یک تاریخ باشد استفاده می شود.

بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.

مثال :

[php]

<form>
Birthday:
<input type="date" name="bday">
</form>

[/php]

شما همچنین می توانید محدودیت های تاریخ را اضافه کنید:
مثال :

[php]

<form>
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">
</form>

[/php]

Input Type Datetime-local

<input type = “datetime-local”> یک فیلد ورودی تاریخ و زمان را بدون هیچ منطقه  زمانی مشخص می کند.

بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.

[php]

<form>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
</form>

[/php]

Input Type Email

<input type = “email”> برای فیلدهای ورودی که باید شامل یک آدرس ایمیل باشد استفاده می شود.

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

بعضی از گوشی های هوشمند نوع ایمیل را تشخیص می دهند و “.com” را به صفحه کلید اضافه می کنند تا ورودی های ایمیل را مطابقت دهند.

مثال :

[php]

<form>
E-mail:
<input type="email" name="email">
</form>

[/php]

Input Type Month

<input type = “month”> به کاربر اجازه می دهد یک ماه و سال را انتخاب کند.

بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.

مثال :

[php]

<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>

[/php]

Input Type Number

<input type = “number”> یک فیلد ورودی عددی را تعریف می کند.

شما همچنین می توانید محدودیت هایی را برای تعداد اعداد پذیرفته شده تنظیم کنید.

مثال زیر یک فیلد ورودی عددی را نشان می دهد، جایی که می توانید مقدار 1 تا 5 را وارد کنید:

مثال:

[php]

<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

[/php]

Input Restrictions

در اینجا یک لیست از محدودیت های انواع ورودی html مشترک وجود دارد (برخی از آنها در HTML5 جدید هستند):

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

شما در مورد محدودیت ورودی در درس  بعدی بیشتر بیاموزید.

مثال زیر یک فیلد ورودی عددی را نشان می دهد، که در آن می توانید یک مقدار از 0 تا 100 را در مراحل 10 وارد کنید. مقدار پیش فرض 30 است:

مثال :

[php]

<form>
Quantity:
<input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

[/php]

Input Type Range

<input type = “range”> یک کنترل را برای وارد کردن یک شماره تعیین می کند که مقدار دقیق آن مهم نیست (مانند slider control). محدوده پیش فرض 0 تا 100 است. با این حال، می توانید محدودیت هایی را برای تعداد عددی با حداقل، حداکثر و ویژگی های مرحله  ای تنظیم کنید :

مثال :

[php]

<form>
<input type="range" name="points" min="0" max="10">
</form>

[/php]

Input Type Search

<input type = “search”> برای فیلدهای جستجو استفاده می شود (یک فیلد جستجو مانند یک فیلد متنی معمولی رفتار می کند).

مثال :

[php]

<form>
Search Google:
<input type="search" name="googlesearch">
</form>

[/php]

Input Type Tel

<input type = “tel”> برای فیلدهای ورودی که باید دارای شماره تلفن باشند استفاده می شود.

نوع تلفن در حال حاضر تنها در Safari 8 پشتیبانی می شود.

مثال :

[php]

<form>
Telephone:
<input type="tel" name="usrtel">
</form>

[/php]

Input Type Time

<input type = “time”> اجازه می دهد تا کاربر یک زمان (بدون منطقه زمانی) را انتخاب کند.

بسته به پشتیبانی مرورگر، زمان انتخاب می تواند در زمینه ورودی نشان داده شود.

مثال :

[php]

<form>
Select a time:
<input type="time" name="usr_time">
</form>

[/php]

Input Type Url

<input type = “url”> برای فیلدهای ورودی که باید آدرس URL را داشته باشند استفاده می شود.

بسته به پشتیبانی مرورگر، فیلد URL زمانی که ارسال می شود، می تواند به صورت خودکار تایید شود.

بعضی از گوشی های هوشمند نوع url را تشخیص می دهند و به صفحه “.com” اضافه می کنند تا ورودی های Url را مطابقت دهند.

مثال :

[php]

<form>
Add your homepage:
<input type="url" name="homepage">
</form>

[/php]

Input Type Week

<input type = “week”> اجازه می دهد تا کاربر یک هفته و سال را انتخاب کند.

بسته به پشتیبانی مرورگر، یک انتخاب تاریخ در قسمت ورودی نشان داده می شود.

مثال :

[php]

<form>
Select a week:
<input type="week" name="week_year">
</form>

[/php]

آموزش فرم های  html  درس چهارم

۱
۲
۳
۴
۵
میانگین امتیازات ۵ از ۵
از مجموع ۱ رای
اشتراک گذاری:
برچسب ها: HTML
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • طراحی واکنش گرا
    چرا طراحی سایت واکنش گرا مهم است؟

    128 بازدید

  • طراحی سایت
    طراحی سایت و رازهای فروش بیشتر

    288 بازدید

  • پوسته فرزند
    پوسته فرزند چیست و چگونه پوسته فرزند ایجاد کنیم؟

    127 بازدید

  • شروع کار css
    شروع کار css

    132 بازدید

  • سینتکس و انتخابگرهای css
    سینتکس و انتخابگرهای css

    111 بازدید

  • معرفی css
    معرفی css

    117 بازدید

دیدگاهتان را بنویسید لغو پاسخ

کلید واژه مورد نظر را تایپ کنید
نوشته‌های تازه
  • تولید محتوا به زبان ساده
  • مهارت‌های پولساز کسب‌وکار
  • الگوریتم اینستاگرام چگونه کار می کند؟
  • ۱۰ گام پولسازی | راهنمای کامل پولسازی در دنیای امروز
  • ۷۰ ایده‌ پولساز و روش ارزیابی + ۱۱۰۰ ایده ارسالی کاربران
افزایش فالوور اینستاگرام
آکادمی
  • کسب و کار اینترنتی
  • بازاریابی اینترنتی
  • ایده های پولساز
  • ایمیل مارکتینگ
  • مهارت های پولساز
  • افزایش فالوور اینستاگرام
  • کسب درآمد از اینستاگرام
  • افزایش ترافیک سایت
پربازدید
  • دوره رایگان
  • درباره ما
  • همکاری در فروش
  • تماس با ما
کلید واژه مورد نظر را تایپ کنید
بهترین ایده
با آموزش کسب و کار اینترنتی از ایده‌های پولساز تا یادگیری مهارت‌های پولساز در کنار شما هستیم. کمک می‌کنیم یک کسب و کار خانگی در منزل راه‌اندازی کنید. ما به شما آموزش می‌دهیم با کار در منزل و فقط با موبایل و بدون سرمایه پولسازی از اینترنت را شروع کنید.
بهترین ایده : کسب و کار اینترنتی برای همه | © Copyright 2021 behtarinideh
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده را تایپ کنید
ثبت
فراموشی رمز
ورود با کد تایید پیامکی
ارسال مجدد کد تایید پیامکی(00:60)
عضو سایت نیستید؟
عضویت
ارسال مجدد کد تایید پیامکی(00:60)
برگشت به ورود
ارسال مجدد کد تایید پیامکی (00:60)
برگشت به ورود
  • (+93) افغانستان
  • (+355) آلبانى
  • (+213) الجزيره
  • (+1) آمریکن ساموا
  • (+376) آندورا
  • (+244) آنگولا
  • (+1) آنگویلا
  • (+1) Antigua
  • (+54) آرژانتين
  • (+374) ارمنستان
  • (+297) آروبا
  • (+61) استرالیا
  • (+43) اتریش
  • (+994) آذربایجان
  • (+973) بحرين
  • (+880) بنگلادش
  • (+1) باربادوس
  • (+375) بلاروس
  • (+32) بلژيك
  • (+501) بلیز
  • (+229) بنین
  • (+1) برمودا
  • (+975) بوتان
  • (+591) بوليوي
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) بوسني و هرزگوين
  • (+267) بوتسوانا
  • (+55) برزيل
  • (+246) محدوده اقیانوس هند تحت سیطره بریتانیا
  • (+1) British Virgin Islands
  • (+673) برونئی
  • (+359) بلغارستان
  • (+226) بورکینافاسو
  • (+257) بوروندی
  • (+855) کامبوج
  • (+237) كامرون
  • (+1) كانادا
  • (+238) کیپ ورد
  • (+1) جزابر کیمن
  • (+236) جمهوری آفریقای مرکزی
  • (+235) چاد
  • (+56) شيلي
  • (+86) چين
  • (+57) كلمبيا
  • (+269) کومور
  • (+682) جزایر کوک
  • (+225) Côte d'Ivoire
  • (+506) كاستا ريكا
  • (+385) كرواسي
  • (+53) كوبا
  • (+599) Curaçao
  • (+357) قبرس
  • (+420) جمهوري چك
  • (+243) Democratic Republic of the Congo
  • (+45) دانمارك
  • (+253) جیبوتی
  • (+1) دومنيكا
  • (+1) جمهوري دومنيكا
  • (+593) اكوادر
  • (+20) مصر
  • (+503) الساوادر
  • (+240) گینه استوایی
  • (+291) اریتره
  • (+372) استوني
  • (+251) اتيوپي
  • (+500) جزایر فالکلند
  • (+298) جزایر فارو
  • (+691) Federated States of Micronesia
  • (+679) فیجی
  • (+358) فنلاند
  • (+33) فرانسه
  • (+594) گویان فرانسه
  • (+689) پلی نزی فرانسه
  • (+241) گابون
  • (+995) Georgia
  • (+49) آلمان
  • (+233) غنا
  • (+350) جبل الطارق
  • (+30) يونان
  • (+299) گرینلند
  • (+1) گرانادا
  • (+590) گوادولوپ
  • (+1) گوام
  • (+502) گواتمالا
  • (+44) گرنزی
  • (+224) گينه
  • (+245) گينه بي سائو
  • (+592) گویان
  • (+509) هائيتي
  • (+504) هندوراس
  • (+852) هنگ كنگ
  • (+36) مجارستان
  • (+354) ایسلند
  • (+91) هند
  • (+62) اندونزي
  • (+98) ایران
  • (+964) عراق
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) رژيم صهيونيستي
  • (+39) ايتاليا
  • (+1) جامائيكا
  • (+81) ژاپن
  • (+44) جرسي
  • (+962) اردن
  • (+7) قزاقستان
  • (+254) كنيا
  • (+686) كيريبيتي
  • (+965) كويت
  • (+996) قرقیزستان
  • (+856) لائوس
  • (+371) لتونی
  • (+961) لبنان
  • (+266) لسوتو
  • (+231) لیبریا
  • (+218) ليبي
  • (+423) لیختن اشتاین
  • (+370) ليتواني
  • (+352) لوكسامبورگ
  • (+853) Macau
  • (+389) Macedonia
  • (+261) ماداگاسكار
  • (+265) مالاوی
  • (+60) مالزي
  • (+960) مالديو
  • (+223) مالي
  • (+356) مالتا
  • (+692) جزایر مارشال
  • (+596) مارتینیک
  • (+222) موریتانی
  • (+230) موریس
  • (+262) مایوت
  • (+52) مكزيك
  • (+373) مالديو
  • (+377) موناکو
  • (+976) مغولستان
  • (+382) مونته نگرو
  • (+1) مونتسرات
  • (+212) مراكش
  • (+258) موزامبيك
  • (+95) ميانمار
  • (+264) نامیبیا
  • (+674) نائورو
  • (+977) نپال
  • (+31) هلند
  • (+687) کالدونیای جدید
  • (+64) نيوزلند
  • (+505) نیکاراگوئه
  • (+227) نیجر
  • (+234) نيجريه
  • (+683) نیوئه
  • (+672) جزیره نورفولک
  • (+850) كره ي شمالي
  • (+1) جزایر ماریانای شمالی
  • (+47) نروژ
  • (+968) عمان
  • (+92) پاكستان
  • (+680) Palau
  • (+970) فلسطین
  • (+507) پاناما
  • (+675) پاپوا گينه ي نو
  • (+595) پاراگوئه
  • (+51) پرو
  • (+63) فيليپين
  • (+48) لهستان
  • (+351) پرتغال
  • (+1) پورتوریکو
  • (+974) قطر
  • (+242) کنگو
  • (+40) روماني
  • (+262) Runion
  • (+7) روسيه
  • (+250) رواندا
  • (+290) سنت هلن
  • (+1) سنت کیتس و نویس
  • (+508) سنت پیر و میکلون
  • (+1) سنت وینسنت و گرنادین
  • (+685) ساموا
  • (+378) سن مارینو
  • (+239) Sao Tome and Principe
  • (+966) عربستان سعودی
  • (+221) سنگال
  • (+381) صربستان
  • (+248) سیشل
  • (+232) سیرالئون
  • (+65) سنگاپور
  • (+1) Sint Maarten
  • (+421) اسلواکی
  • (+386) اسلونی
  • (+677) جزاير سليمان
  • (+252) سومالی
  • (+27) آفريقای جنوبي
  • (+82) كره ی جنوبي
  • (+211) سودان جنوبی
  • (+34) اسپانيا
  • (+94) سريلانكا
  • (+1) St. Lucia
  • (+249) سودان
  • (+597) سورینام
  • (+268) سوازیلند
  • (+46) سوئد
  • (+41) سوييس
  • (+963) سوريه
  • (+886) تايوان
  • (+992) تاجيكستان
  • (+255) تانزانيا
  • (+66) تايلند
  • (+1) The Bahamas
  • (+220) گامبیا
  • (+670) تیمور
  • (+228) توگو
  • (+690) توکلائو
  • (+676) تونگا
  • (+1) ترینیداد و توباگو
  • (+216) تونس
  • (+90) تركيه
  • (+993) تركمنستان
  • (+1) جزایر تورکس و کایکوس
  • (+688) تووالو
  • (+1) U.S. Virgin Islands
  • (+256) اوگاندا
  • (+380) اوكراين
  • (+971) امارات متحده ي عربي
  • (+44) انگلیس
  • (+1) امریکا
  • (+598) اوروگوئه
  • (+998) ازبكستان
  • (+678) وانواتو
  • (+58) ونزوئلا
  • (+84) ويتنام
  • (+681) والیس و فوتونا
  • (+212) صحرای غربی
  • (+967) يمن
  • (+260) زامبیا
  • (+263) زیمباوه

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت