در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML گام به گام قسمت 20 : انواع ورودی

همانطور که در بخش اول مبحث فرم ها گفتیم، برای تعیین نوع ورودی در تگ input از خاصیت type استفاده می کنیم. اولین مقدار این خاصیت همانطور که بررسی کردیم text بود که برای وارد کردن داده های متنی در یک سطر استفاده می شد.

ورودی text:

انتخاب input از نوع text موجب ساختن فرم ورودی متن می شود. از این فرم می توانید اطلاعات را به صورت رشته ای وارد کنید.

<!Doctype HTML>
<html>
<head>
	<title>HTML Form</title>
	</head>
	<body>
		<form>
		Name:	<input type="text"/>
		</form>
	</body>
</html>

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

<form>
	Name:	<input type="text" name="name"/><br>
	Family: <input type="text" name="family"/>
</form>

ورودی Password:

یکی از مهمترین ورودی ها در HTML مخصوصا در فرم های ورود و ثبت نام، ورودی password می باشد. این نوع ورودی برای حفظ امنیت کاراکترهایی که در آن وارد می شود را به صورت دایره های توپ پر نشان می دهد.

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

ورودی radio:

Radio Button ها امکان انتخاب فقط یک گزینه را در بین چندین انتخاب فراهم می کند. این انتخاب برای زمانی استفاده می شود که در بین چند گزینه فقط یکی از آنها درست است. مثل سوالات چند گزینه.

<form>
	<p>What is your gender?</p>
	<input type="radio" name="gender" value="Man" checked/>Man <br>
	<input type="radio" name="gender" value="Woman"/> Woman 
</form>

البته خاصیت Value هیچ تاثیری در نمایش نمی گذارد، متنی که در بیرون تگ input قرار می گیرد به نمایش در می آید.

یک نکته خیلی مهم: در صورت استفاده از خاصیت name برای آنکه امکان انتخاب تنها یک گزینه وجود داشته باشد باید نام گزینه ها را یکسان قرار بدید. البته در صورت استفاده نکردن از این خاصیت هیچ مشکلی وجود نخواهد داشت.

ورودی CheckBox:

ورودی CheckBox برای انتخاب همزمان چند آیتم استفاده می شود. برای استفاده از این ورودی کافی است که مقدار type را برابر checkbox قرار دهید و یک مقدار توسط خاصیت value به آن بدهید. البته این مقدار نمایش داده نمی شود، برای نمایش متن این گزینه پس از بستن تگ متن مورد نظرتان را بنویسید. به مثال زیر توجه کنید.

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

تفاوت کلیدی CheckBox و Radio در تعداد انتخاب است. گزینه اول امکان انتخاب چندین گزینه را می دهد اما گزینه دوم تنها یکی از بین گزینه ها را می توانید انتخاب کنید.

ورودی submit:

ورودی submit برای کنترل کردن داده های فرم می توانید از این ورودی استفاده کنید. داده های فرم با کلیک بر روی یک دکمه واکنش نشان می دهند.

<form>
  First name:<br>
  <input type="text" name="firstname" value="Arastoo"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Abbasi"><br><br>
  <input type="submit" value="Submit">
</form> 

برای نشان دادن متنی روی این ورودی از خاصیت value استفاده کنید.

نکته: خاصیت value برای تعیین مقدار پیشفرض در اکثر ورودی ها استفاده می شود. در مثال بالا ورودی های متنی دارای مقادیر اولیه هستند.

ورودی button:

یک دکمه یا button از اجزای بسیار مهم و کلیدی در هر فرمی است. تمام اطلاعاتی که از کاربر دریافت می شود توسط یک دکمه کنترل می شوند. برای ساخت دکمه می توانید مقدار خاصیت type را برابر button قرار دهید.

<button type="button" name="btn" onclick="alert('ITPRO');">Click Me</button>

یکی از ویژگی های مهم این ورودی خاصیت onclick می باشد، با این خاصیت می توان تعیین کرد که پس از فشردن کلید چه اتفاقی روی دهد. در مثال بالا یک پیغام توسط جاوااسکریپت پس از فشردن کلیک نمایش داده می شود.

ورودی number:

برای آنکه یک ورودی تنها اعداد را دریافت کند در زبان های برنامه نویسی دیگر باید چند کنترل مختلف توسط رویدادها روی کادرهای ورودی انجام دهید اما در HTML با وجود ورودی number این دردسر دیگر وجود نخواهد داشت. همچنین یکی از خاصیت های مهم این ورودی امکان ایجاد محدودیت در بین اعداد ورودی است، برای مثال می توان کاربر را مجبور کرد که اگر عددی را وارد می کند حتما باید از عددی کوچکتر و از عددی بزرگتر نباشد.

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

ورودی های HTML در ورژن پایینتر از 5 محدود بودند اما در HTML5 این تعداد بسیار زیاد شده اند. اما شیوه کار کردن با آنها کاملا شبیه بقیه ورودی هاست. لیستی از ورودی های HTML5 را می توانید در زیر مشاهده کنید:

1. color

2. date

3. datetime

4. datetime-local

5. email

6. month

7. number

8. range

9. search

10. tel

11. time

12. url

13. week

نویسنده : ارسطو عباسی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد

#آموزش_قدم_به_قدم_html #آموزش_تگ_ها_در_html #آموزش_html #آموزش_طراحی_وبسایت_با_html #آموزش_گام_به_گام_html #استفاده_از_تگ_های_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....