این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ input در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ input در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Input در HTML
تگ input یا اینپوت ، تگی است که در تگ Form مورد استفاده قرار میگیرد و دارای نوع های مختلفی می باشد که با استفاده از آن میتوان داده ها ( اطلاعات ) را با استفاده از فرم ها از کاربر دریافت کرد.
تگ Input دارای نوع های مختلفی می باشد ( مثلا نوع پسورد ، ایمیل و.. ) که این نوع ها را میتوان با استفاده از صفت type مشخص نمود.
Free-Learn
مثال از تگ input در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از نوع text ( مثلا برای دریافت نام ، نام خانوادگی یا مثلا نام کاربری و.. )
|
1 2 3 4 5 6 7 8 |
<body> <form action="files/get_data.php" method="POST"> نام: <input type="text" name="myname"> <br><br> <input type="submit" value="ارسال"> </form> </body> |
مثال شماره ۲ : استفاده از نوع چک باکس ( که کاربر بتونه چیزی رو تیک بزنه )
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <form action="files/get_data8.php" method="POST"> رنگ مورد علاقه شما<br> <input type="checkbox" name="MyColor[]" value="blue"> آبی <br> <input type="checkbox" name="MyColor[]" value="red"> قرمز <br><br> <input type="submit" value="ارسال"> </form> </body> |
مثال شماره ۳ : استفاده از نوع ایمیل ( برای دریافت ایمیل )
|
1 2 3 4 5 6 7 8 9 10 |
<body> <form action="files/get_data11.php" method="POST"> ایمیلتان را وارد نمایید <br> <input type="email" name="Email"> <br><br> <input type="submit" value="ارسال"> </form> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ input در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ input در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type |
مشخص میکند که کاربر اجازه انتخاب چه نوع فایل هایی رو برای آپلود دارد ( قابل استفاده فقط در نوع file ) |
| alt | text | مشخص کردن توضیح کوتاه درباره تصویر ( قابل استفاده فقط در نوع image ) |
| autocomplete | on off |
قابلیت تکمیل کردن خودکار یک اینپوت |
| autofocus | autofocus | مشخص میکند که به محض بارگذاری صفحه بروی یک Input فوکوس شود |
| checked | checked | برای تیک زدن یا انتخاب کردن یک Input ( قابل استفاده فقط در نوع checkbox و radio ) |
| dirname | inputname.dir | جهت متن ( dir ) ارسالی را مشخص میکند |
| disabled | disabled | برای غیرفعال کردن Input |
| form | form_id | مشخص میکنه که داده های یک Input در هنگام ارسال فرم بسمت سرور ، متعلق به کدام فرم می باشد |
| formaction | URL | آدرس URL یک صفحه بروی سرور برای دریافت و پردازش اطلاعات فرم ( قابل استفاده فقط در نوع submit و image ) |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
نحوه کدگذاری داده ها را در هنگام ارسال به سرور مشخص میکند ( قابل استفاده فقط در نوع submit و image ) |
| formmethod | get post |
میتوان متد ارسالی داده هارو در فرم مشخص کرد ( قابل استفاده فقط در نوع submit و image ) |
| formnovalidate | formnovalidate | میتوان اعتبار سنجی Input هارو فعال یا غیرفعال کرد |
| formtarget | _blank _self _parent _top framename |
میتوان نحوه ی باز شدن صفحه ی مقصد را پس از ارسال داده ها مشخص کرد ( قابل استفاده فقط در نوع submit و image ) |
| height | pixels | برای مشخص کردن اندازه ارتفاع تصویر ( قابل استفاده فقط در نوع image ) |
| list | datalist_id | برای اشاره به تگ <datalist> برای تعریف یک لیست از پیش تعریف شده |
| max | number | برای مشخص کردن بیشترین مقداری که میتونه وارد Input بشه |
| maxlength | number | برای مشخص کردن تعداد کاراکترهایی که میتونه وارد Input بشه |
| min | number | برای مشخص کردن کمترین مقداری که میتونه وارد Input بشه |
| multiple | multiple | برای انتخاب چندین گزینه بصورت همزمان |
| name | text | برای مشخص کردن یک نام برای Input |
| pattern | regexp | میتونیم یک قانون مشخصی رو برای مقادیری که داخل Input ها وارد میشه تعریف نماییم |
| placeholder | text | برای ایجاد یک متن ( توضیح کوتاه ) در زمینه Input ها ( که بتونه به کاربر بگه مثلا فلان چیز رو وارد کن ) |
| readonly | readonly | میتوان یک تگ رو بصورت فقط خواندنی کرد |
| required | required | مشخص میکند که Input باید حتما مقدار داشته باشد ( یعنی کاربر باید حتما یه چیزی وارد کنه در غیراینصورت داده های فرم ارسال نخواهد شد ) |
| size | number | مشخص کردن اندازه عرض یک Input به نسبت تعداد کاراکتر |
| src | URL | آدرس URL تصویر را مشخص میکند ( قابل استفاده فقط در نوع image ) |
| step | number | تعداد / میزان پرش بین اعداد را مشخص کرد |
| type | button checkbox color date datetime-local file hidden image month number password radio range reset search submit tel text time url week |
مشخص کردن نوع Input |
| value | text | برای ایجاد یک مقدار درون اینپوت ها |
| width | pixels | تنظیم اندازه عرض تصویر ( قابل استفاده فقط در نوع image ) |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ input از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- بصورت پیش فرض اگه نوع یک Input رو مشخص نکنیم ، مرورگرها بصورت خودکار اون رو به عنوان نوع text مشخص میکنند. ( دیگه حواستون باشه همیشه حتما نوع رو مشخص کنید )
