این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
کار با عناصر ورودی یا Input Elements در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با عناصر ورودی یا Input Elements در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 عناصر ورودی یا Input Elements در HTML
- 2 Input از نوع Text
- 3 Input از نوع Password
- 4 Input از نوع Submit
- 5 Input از نوع Reset
- 6 Input از نوع Radio
- 7 Input از نوع Checkbox
- 8 Input از نوع Button
- 9 Input از نوع Color
- 10 Input از نوع Date
- 11 Input از نوع Datetime-local
- 12 Input از نوع Email
- 13 Input از نوع Month
- 14 Input از نوع Number
- 15 Input از نوع Range
- 16 Input از نوع Search
- 17 Input از نوع Tel
- 18 Input از نوع Time
- 19 Input از نوع URL
- 20 Input از نوع Week
- 21 Input از نوع File
- 22 Input از نوع Image
- 23 Input از نوع Hidden
عناصر ورودی یا Input Elements در HTML
در بخش قبلی ما با تگ های قابل استفاده در تگ Form آشنا شدیم و اشاره کردم که در بخش بعدی یعنی همین بخش ما بطور کامل با نوع های مختلف Input ها در HTML آشنا خواهیم شد.
حال در این بخش بطور کامل میخواهیم با نوع های مختلف اینپوت ها ( Input ) در فرم ها و بطور کلی در HTML آشنا شویم و با آنها کار کنیم. لطفا در ادامه و تا پایان با من همراه باشید.
- <input type=”text”>
- <input type=”password”>
- <input type=”submit”>
- <input type=”reset”>
- <input type=”radio”>
- <input type=”checkbox”>
- <input type=”button”>
- <input type=”color”>
- <input type=”date”>
- <input type=”datetime-local”>
- <input type=”email”>
- <input type=”month”>
- <input type=”number”>
- <input type=”range”>
- <input type=”search”>
- <input type=”tel”>
- <input type=”time”>
- <input type=”url”>
- <input type=”week”>
- <input type=”file”>
- <input type=”image”>
- <input type=”hidden”>
Free-Learn
Input از نوع Text
از پراستفاده ترین اینپوت ها، همین نوع Text می باشد، که با استفاده از اون میتونیم یه متن رو از کاربر بگیریم. ( مثلا نام ، نام خانوادگی و.. )
|
1 |
<input type="text"> |
Free-Learn
Input از نوع Password
اسمش مشخصه دیگه، برای ایجاد یک فیلد از نوع رمز یا پسورد ( یعنی مکانی برای وارد کردن رمز یا پسورد )
متنی که درون فیلد پسورد قرار میگیرد در حالت عادی و در ظاهر قابل مشاهده نیست و معمولا بصورت دایره های توپُر نمایش داده می شود.
|
1 |
<input type="password"> |
Free-Learn
Input از نوع Submit
اینو بارها و بارها تا الان داخل مثال ها دیده اید، دکمه ای برای ارسال داده های فرم بسمت سرور که بهش میگیم Submit ( یعنی ارسال کردن )
|
1 |
<input type="submit" value="ارسال"> |
Free-Learn
Input از نوع Reset
همونطور که از اسم این نوع مشخصه ، برای ریست کردن داده های داخل فیلدهای فرم استفاده میشود، یعنی در واقع یک دکمه می باشد که با زدن آن تمامی اطلاعات وارد شده در فرم پاک می شوند.
|
1 |
<input type="reset" value="پاک کردن"> |
Free-Learn
Input از نوع Radio
دکمه های رادیویی دکمه هایی هستند که کاربر فقط و فقط قادر است یکی از گزینه ها را انتخاب نماید و امکان انتخاب بیش از یک گزینه در این نوع عناصر وجود ندارد.
|
1 |
<input type="radio"> |
Free-Learn
Input از نوع Checkbox
برخلاف دکمه های رادیویی چک باکس ( Checkbox ) هارو میشه بیش از چندتارو بصورت همزمان انتخاب کرد.
|
1 |
<input type="checkbox"> |
Free-Learn
Input از نوع Button
خب ما گفتیم ۲نمونه دکمه میتونیم داشته باشیم ، یه دکمه از نوع submit که فرم رو ارسال میکنه و یه دکمه از نوع button که نمیتونه فرم رو ارسال کنه فقط یه دکمه با قابلیت کلیک شدن می باشد، مثلا کاربر روش کلیک کنه بعد مثلا یه پیغام نشون بده یا خیلی کارای دیگه میشه کرد.
|
1 |
<input type="button" onclick="alert('سلام خوبی؟')" value="روی من کلیک کن"> |
Free-Learn
Input از نوع Color
با استفاده از این نوع اینپوت میتونیم یک باکس رنگ را برای کاربر به نمایش دربیاوریم تا کاربر بتواند رنگ دلخواهش را انتخاب نماید.
|
1 |
<input type="color"> |
Free-Learn
Input از نوع Date
با استفاده از این عنصر میتوان یک مقدار بصورت تاریخ ( سال / ماه / روز ) را دریافت کرد.
|
1 |
<input type="date"> |
Free-Learn
Input از نوع Datetime-local
با استفاده از این عنصر میتوان به دلخواه یک تاریخ ( سال / ماه / روز ) و ( ساعت / دقیقه / ثانیه ) را از کاربر دریافت کرد.
نحوه نمایش این Input در مرورگرها ممکنه باهمدیگه فرق کنن، مثلا ممکنه در یک مرورگر به یک شکل نشون بده و در مرورگر دیگری به شکل دیگه.
شکل کلی تاریخ و زمانی که این اینپوت دریافت میکند بصورت زیر می باشد :
Month/Day/Year , Hour:Minute AM|PM
|
1 |
<input type="datetime-local"> |
Free-Learn
Input از نوع Email
با استفاده از این عنصر میتوان یک مقدار بصورت ایمیل را از کاربر دریافت کرد.
اگه مقداری که وارد میشه در قالب یا فرمت ایمیل نباشد بعضی از مرورگرها پیغام هشدار میدهند و میگن مثلا باید ایمیل بطور صحیح وارد شود.
|
1 |
<input type="email"> |
Free-Learn
Input از نوع Month
با استفاده از این عنصر میتوان مقدار فقط ماه و سال را از کاربر دریافت کرد.
نحوه نمایش این Input در مرورگرها ممکنه باهمدیگه فرق کنن، مثلا ممکنه در یک مرورگر به یک شکل نشون بده و در مرورگر دیگری به شکل دیگه، یا حتی ممکنه در برخی مرورگرها بکل این اینپوت رو بصورت یک ‘input type=’text نشون بدن
مرورگرهای Firefox و Safari در حال حاضر از این اینپوت پشتیبانی نمیکنند.
|
1 |
<input type="month"> |
Free-Learn
Input از نوع Number
در ادامه آموزش کار با عناصر ورودی یا Input Elements در HTML میخوایم با اینپوت نوع نامبر یا Number آشنا شیم.
با استفاده از این عنصر میتوان یک مقدار بصورت عددی را از کاربر دریافت کرد و همچنین از صفات زیر میتوان در این عنصر استفاده کرد:
- min : کمترین مقداری که میتوان وارد کرد
- max : بیشترین مقداری که میتوان وارد کرد
- value : یک مقدار از قبل تعریف شده را مشخص میکند
- step : میزان پرش بین اعداد را مشخص میکند
|
1 |
<input type="number" min="1" max="20" step="1" value="1"> |
Free-Learn
Input از نوع Range
با استفاده از این عنصر میتوان یک مقدار از طریق یک میله ی لغزان را از کاربر دریافت کرد و همچنین از صفات زیر میتوان در این عنصر استفاده کرد:
- min : کمترین مقداری که میتوان وارد کرد
- max : بیشترین مقداری که میتوان وارد کرد
- value : یک مقدار از قبل تعریف شده را مشخص میکند
- step : میزان پرش بین اعداد را مشخص میکند
|
1 |
<input type="range" min="0" max="50" step="5" value="25"> |
Free-Learn
Input از نوع Search
با استفاده از این عنصر میتوان یک فیلد رو مخصوص فیلد جستجو مشخص کرد، اینکه فکر کنید مثلا میتونه براتون سیستم جستجو درست کنه خیر اصلا اینجوری نیست، فقط و صرفا یه فیلد درست میکنه اونم دقیقا شبیه “type=”text که مثلا بگیم این اینپوت مخصوص باکس جستجو می باشد.
بخوایم کلی حساب کنیم، کاربردش فقط برای مرورگرهاست، مثلا مرورگر وقتی میبینه این اینپوت از نوع Search می باشد، میگه خب پس این اینپوت برای اینه که کاربر توش یه متنی وارد کنه بعدش این متن در سایت جستجو بشه،فقط همین
خوده یک سیستم جستجو باید توسط زبان های سمت سرور مثه PHP و پایگاه داده Mysql برنامه نویسی شه.
|
1 |
<input type="search"> |
Free-Learn
Input از نوع Tel
با استفاده از این عنصر میتوان یک مقدار رو بصورت شماره تلفن از کاربر دریافت کرد.
این اینپوت بخودی خود هیچ ویژگی خاصی نداره، کلا انگار همون ‘input type=’text هست ، ولی خب بازم اینم مثه اینپوت Search ، یه چیز تعریفی هست، مثلا فقط برای اینه که بگیم این نوع اینپوت برای شماره تلفن هست.
|
1 |
<input type="tel" pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}"> |
Free-Learn
Input از نوع Time
با استفاده از این عنصر میتوان یک مقدار بصورت زمان ( ساعت : دقیقه و AM یا PM ) از کاربر دریافت کرد.
|
1 |
<input type="time"> |
Free-Learn
Input از نوع URL
با استفاده از این عنصر میتوان یک مقدار بصورت آدرس اینترنتی ( مثلا آدرس سایت ) دریافت کرد.
توجه داشته باشید که باید در ابتدای آدرس حتما یا //:http یا //:https وجود داشته باشد.
|
1 |
<input type="url"> |
Free-Learn
Input از نوع Week
با استفاده از این عنصر میتوان یک مقدار بصورت هفته در سال از کاربر دریافت کرد، مثلا کاربر میتونه هفته سوم از سال فلان رو انتخاب کنه.
نحوه نمایش این Input در مرورگرها ممکنه باهمدیگه فرق کنن، مثلا ممکنه در یک مرورگر به یک شکل نشون بده و در مرورگر دیگری به شکل دیگه، یا حتی ممکنه در برخی مرورگرها بکل این اینپوت رو بصورت یک ‘input type=’text نشون بدن
مرورگرهای Firefox و Safari در حال حاضر از این اینپوت پشتیبانی نمیکنند.
|
1 |
<input type="week"> |
Free-Learn
Input از نوع File
با استفاده از این عنصر میتوان امکان آپلود کردن فایل ها را توسط کاربران، ایجاد کرد.
این اینپوت خوده عمل آپلود رو نمیتونه انجام بده چون قدرتشو نداره، فقط این قابلیت رو ایجاد میکنه که کاربر بتونه فایل از سیستم خودش انتخاب کنه فقط همین، دیگه اینکه بعدش فایل انتخاب شده آپلود بشه و از این حرفا ، این دیگه توسط زبان های سمت سرور مثه PHP انجام میشه.
|
1 |
<input type="file"> |
Free-Learn
Input از نوع Image
با استفاده از این عنصر میتوان دکمه submit رو بصورت عکس یا تصویر ایجاد کرد.
|
1 |
<input type="image" src="images/submit-button.png"> |
Free-Learn
Input از نوع Hidden
با استفاده از این عنصر میتوان یک فیلد مخفی را ایجاد کرد، یعنی عملا در صفحه هستش ولی از دید کاربر مخفی هست، و میتونیم برخی داده هارو داخل همین اینپوت های مخفی بسمت سرور ارسال کنیم.
داده هایی که مثلا نیاز نیست کسی ببینه یا مثلا نباید کاربر عادی اونارو ببینه، میتونیم به راحتی داخل اینپوت های مخفی بسمت سرور ارسالشون کنیم.
داده های خیلی حساس و مهم رو اصلا نباید در اینپوت های مخفی قرار داد، چون به راحتی میشه با مشاهده سورس صفحه مقدار اینپوت های مخفی رو درآورد.
|
1 |
<input type="hidden"> |
به پایان آموزش کار با عناصر ورودی یا Input Elements در HTML رسیدیم، امیدوارم که مشکل خاصی در این آموزش نداشته باشید و نهایت استفاده رو برده باشید.
