آموزش انواع ورودی (Input) در HTML

0 دیدگاه

با جلسه بیست و پنجم آموزش متنی Html در خدمت شما هستیم با آموزش انواع ورودی (Input) در HTML از وب سایت آموزش برنامه نویسی سورس باران. در این جلسه به بررسی و معرفی انواع ورودی (Input) در HTML و خصوصیات ورودی در فرم‌ها می‌پردازیم.

آموزش انواع ورودی (Input) در HTML

تا انتهای این جلسه از آموزش Html انواع ورودی‌هایی که می‌توانیم در فرم‌ها وارد کنیم را بررسی و نحوه نوشتن کدهای آن را یاد بگیریم. شناخت انواع ورودی در HTML به ما کمک می‌‌کند فرم‌های کارآمدتر و حرفه‌ای‌تری داشته باشیم.

انواع ورودی در HTML

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

ورودی متنی در Html

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

 <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<form>

<label for="fname">First name:</label><br>

</form>

پیش نمایش

ورودی کلمه عبور در Html

<“input type=”password> یک فیلد برای وارد کردن کلمه عبور تعریف می‌کند:

 <form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

<form>

<label for="username">Username:</label><br>

<label for="pwd">Password:</label><br>

</form>

پیش نمایش

توجه داشته باشید که کاراکتر‌ها در فیلد پسورد به شکل ستاره یا دایره نمایش داده می‌شوند.

ورودی submit در Html

<“input type=”submit> یک دکمه برای ارسال داده‌های فرم به یک form-handler که معمولا یک صفحه سرور با کدهایی برای پردازش داده‌های ورودی است و در خصوصیت action فرم مشخص می‌شود، تعریف می‌کند:

 <form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<label for="fname">First name:</label><br>

</form>

پیش نمایش

اگر خصوصیت مقدار دکمه submit را حدف کنید، این دکمه یک متن پیش‌فرض را نمایش خواهد داد:

 <form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit">
</form>

<label for="fname">First name:</label><br>

</form>

پیش نمایش

ورودی Reset در Html

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

 <form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

<label for="fname">First name:</label><br>

</form>

پیش نمایش

اگر مقادیر ورودی را تغییر داده و سپس روی دکمه Reset کلیک کنید، داده‌های فرم به حالت پیش‌فرض خود بازمی‌گردد.

ورودی Radio در Html

<“input type=”radio> یک رادیو باتن یا دکمه رادیو تعریف می‌کند. دکمه‌های رادیو به کاربر اجازه می‌دهند که تنها یک گزینه را از میان گزینه‌های موجود انتخاب کند:

 <form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

<form>

<label for="female">Female</label><br>

<label for="other">Other</label>

</form>

کد بالا در مرورگر به این شکل نمایش می‌يابد:

Male
Female
Other

ورودی Checkbox در Html

<“input type=”checkbox> یک چک باکس تعریف می‌کند. چک باکس‌ها به کاربر این امکان را می‌دهند که صفر یا چند گزینه از گزینه‌های موجود را انتخاب کند:

 <form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

<form>

</form>

کد بالا در مرورگر به این شکل نمایش می‌يابد:

I have a bike
I have a car
I have a boat

پیش نمایش

ورودی Button در Html

<“input type=”button> یک دکمه تعریف می‌کند:

 <input type="button" onclick="alert('Hello World!')" value="Click Me!">

1	<input type="button" onclick="alert('Hello World!')" value="Click Me!">

پیش نمایش

انواع ورودی (Input) در HTML5

نسخه HTML5 چندین نوع ورودی جدید اضافه کرده است:

– رنگ (color)

– تاریخ (date)

– تاریخ و زمان محلی (datetime-local)

– ایمیل

– ماه (month)

– عدد (number)

– دامنه (range)

– جستجو (range)

– تلفن (tel)

– زمان (time)

– url

– هفته (week)

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

ورودی رنگ در Html

<“input type=”color> برای فیلدهای ورودی به کار می‌رود که باید حاوی یک رنگ باشند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده رنگ می‌تواند در فیلد ورودی نمایش داده شود:

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

<form>

<label for="favcolor">Select your favorite color:</label>

</form>

پیش نمایش

ورودی تاریخ در Html

<“input type=”date> برای فیلدهای ورودی که باید حاوی تاریخ باشند به کار می‌رود. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

 <form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>

<form>

<label for="birthday">Birthday:</label>

</form>

پیش نمایش

می‌توانید محدودیت هایی برای تاریخ‌ها در نظر بگیرید:

 <form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

<form>

<label for="datemax">Enter a date before 1980-01-01:</label>

<label for="datemin">Enter a date after 2000-01-01:</label>

</form>

پیش نمایش

ورودی Datetime-local در Html

<“input type=”datetime-local> یک فیلد ورودی برای تاریخ و زمان (بدون منطقه زمانی) مشخص می‌کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

 <form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

<form>

<label for="birthdaytime">Birthday (date and time):</label>

</form>

پیش نمایش

ورودی ایمیل در Html

<“input type=”email> برای فیلدهای ورودی که باید حاوی یک آدرس ایمیل باشند به کار می‌رود. با توجه به پشتیبانی مرورگر، آدرس ایمیل می‌تواند در هنگام ارسال به صورت خودکار اعتبارسنجی شود. برخی از گوشی‌های هوشمند نوع ورودی ایمیل را تشخیص داده و یک “.com” در کیبورد اضافه می‌کنند تا در انتهای ایمیل قرار داده شود:

 <form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

<form>

<label for="email">Enter your email:</label>

</form>

پیش نمایش

ورودی فایل در Html

یکی از مهمترین نوع input ها نوع File ها هستند. با استفاده از این نوع می‌توانید از کاربر فایل دریافت کنید و به سرور انتقال دهید. پیاده سازی این نوع از input علاوه بر اهمیتش، دشواری خاص خود را نیز دارد. برای پیاده سازی این نوع input از <input type=”file”> استفاده می‌کنیم.

 <form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>

<form>

<label for="myfile">Select a file:</label>

</form>

پیش نمایش

ورودی ماه در Html

<“input type=”month> به کاربر امکان می‌دهد که یک ماه و سال را انتخاب کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

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

<form>

<label for="bdaymonth">Birthday (month and year):</label>

</form>

پیش نمایش

ورودی عدد در Html

<“input type=”number> یک فیلد ورودی عددی تعریف می‌کند. همچنین می‌توانید محدودیت تعریف کنید که چه اعدادی پذیرفته شوند. مثال زیر یک فیلد ورودی را نشان می‌دهد که می‌توانید فقط اعداد ۱ تا ۵ را در آن وارد کنید:

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

<form>

<label for="quantity">Quantity (between 1 and 5):</label>

</form>

پیش نمایش

محدودیت ورودی در Html

در زیر نمونه های از محدودیت‌های رایج در ورودی‌ها را مشاهده کنید (برخی از آن‌ها در HTML5 اضافه شده‌اند):

Disabled : مشخص می‌کند که یک فیلد ورودی باید غیر فعال شود
Max: مقدار ماکزیمم برای یک فیلد ورودی را مشخص می‌کند
Maxlength: ماکزیمم تعداد کاراکتر برای یک فیلد ورودی را مشخص می‌کند
Min: مقدار مینیمم برای یک فیلد ورودی را تعریف می‌کند
Pattern: یک عبارت با قاعده برای مقایسه با مقدار ورودی مشخص می‌کند
Readonly: مشخص می‌کند که یک فیلد ورودی فقط خواندنی باشد (قابل تغییر نباشد)
Required: مشخص می‌کند که یک فیلد ورودی باید حتما پر شود
Size: عرض یک فیلد ورودی را بر اساس تعداد کاراکتر مشخص می‌کند
Step: مراحل عددی مجاز برای یک فیلد ورودی را مشخص می‌کند
Value: مقدار پیش‌فرض برای یک فیلد ورودی را مشخص می‌کند

مثال زیر یک فیلد ورودی عددی را نشان می‌دهد که فقط می‌توانید یک مقدار از صفر تا صد در ده مرحله در آن وارد کنید. مقدار پیش‌فرض آن هم ۳۰ است:

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

<form>

<label for="quantity">Quantity:</label>

</form>

پیش نمایش

ورودی دامنه در Html

<“input type=”range> یک کنترل برای وارد کردن اعدادی تعریف می‌کند که مقدار دقیق آن‌ها مهم نیست. دامنه پیش‌فرض بین صفر تا صد است. البته شما می‌توانید با خصوصیت‌های min، max و step، محدودیت تعریف کنید که چه اعدادی پذیرفته شوند:

 <form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

<form>

<label for="vol">Volume (between 0 and 50):</label>

</form>

پیش نمایش

ورودی سرچ در Html

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

 <form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

<form>

<label for="gsearch">Search Google:</label>

</form>

پیش نمایش

ورودی تلفن در Html

<“input type=”tel> برای فیلدهای ورودی که باید حاوی یک شماره تلفن باشند به کار می‌رود. نوع ورودی تلفن در حال حاضر فقط در مرورگر سافاری ۸ پشتیبانی می‌شود:

 <form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

<form>

<label for="phone">Enter your phone number:</label>

</form>

پیش نمایش

ورودی زمان در Html

<“input type=”time> به کاربر این امکان را می‌دهد که بدون در نظر گرفتن منطقه زمانی، یک زمان را انتخاب کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده زمان می‌تواند در فیلد ورودی نمایش یابد:

 <form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>

<form>

<label for="appt">Select a time:</label>

</form>

پیش نمایش

ورودی URL در Html

<“input type=”url> برای فیلدهای ورودی به کار می‌رود که باید حاوی یک آدرس url باشند. با توجه به پشتیبانی مرورگر، فیلد url می‌تواند در هنگام ارسال به صورت خودکار تایید اعتبار شود. برخی از گوشی‌های هوشمند نوع ورودی url را تشخیص داده و یک “.com” در کیبورد اضافه می‌کنند تا در آخر url قرار بگیرد:

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

<form>

<label for="homepage">Add your homepage:</label>

</form>

پیش نمایش

ورودی هفته در Html

<“input type=”week> به کاربر این امکان را می‌دهد تا یک هفته و سال را انتخاب کند. با توجه به پشتیبانی مرورگر، یک انتخاب‌کننده تاریخ می‌تواند در فیلد ورودی نمایش یابد:

 <form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

<form>

<label for="week">Select a week:</label>

</form>

پیش نمایش

امیدواریم این مطلب مورد توجه دوستان قرار گرفته باشد.

لیست جلسات قبل آموزش Html

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با پاراگراف و استایل در Html

آموزش کار با قالب بندی متن در Html

آموزش کار با کامنت در HTML

آموزش کار با کامنت در HTML

آموزش کار با رنگ ها در HTML

آموزش کار با تصاویر در HTML

آموزش کار با لینک در HTML

آموزش کار با جدول در HTML

آموزش کار با لیست ها در HTML

آموزش کار با عناصر Block و Inline در HTML

آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش کار با عنصر Head در HTML

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (2 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش HTML, آموزش طراحی وب سایت

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج جامع و پروژه محور ASP.NET MVC + طراحی فروشگاه اینترنتی فروش فایل

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۹ مرداد ۱۳۹۹

آموزش انواع ورودی (Input) در HTML

آموزش انواع ورودی (Input) در HTML

انواع ورودی در HTML

ورودی متنی در Html

ورودی کلمه عبور در Html

ورودی submit در Html

ورودی Reset در Html

ورودی Radio در Html

ورودی Checkbox در Html

ورودی Button در Html

انواع ورودی (Input) در HTML5

ورودی رنگ در Html

ورودی تاریخ در Html

ورودی Datetime-local در Html

ورودی ایمیل در Html

ورودی فایل در Html

ورودی ماه در Html

ورودی عدد در Html

محدودیت ورودی در Html

ورودی دامنه در Html

ورودی سرچ در Html

ورودی تلفن در Html

ورودی زمان در Html

ورودی URL در Html

ورودی هفته در Html

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط