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

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

با جلسه بیست و پنجم آموزش متنی 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>

پیش نمایش

ورودی کلمه عبور در 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>

پیش نمایش

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

ورودی 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>

پیش نمایش

اگر خصوصیت مقدار دکمه 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>

پیش نمایش

ورودی 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>

پیش نمایش

اگر مقادیر ورودی را تغییر داده و سپس روی دکمه 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>

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

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>

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

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!">

پیش نمایش

انواع ورودی (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>

پیش نمایش

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

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

 <form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</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>

پیش نمایش

ورودی 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>

پیش نمایش

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

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

 <form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</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>

پیش نمایش

ورودی ماه در Html

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

 <form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</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>

پیش نمایش

محدودیت ورودی در 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>

پیش نمایش

ورودی دامنه در 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>

پیش نمایش

ورودی سرچ در Html

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

 <form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</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>

پیش نمایش

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

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

 <form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</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>

پیش نمایش

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

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

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

پیش نمایش

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

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

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

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

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

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