این آموزش در تاریخ ۱۴۰۲/۰۶/۲۱ آپدیت شده است.
آموزش صفت Type در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت Type در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت Type در HTML
صفت type صفتی است که ما با استفاده از آن میتوانیم نوع یا Type یک تگ رو مشخص / تعریف نماییم.
اینکه میگیم نوع یک تگ یعنی مثلا اگر این صفت درون تگ button استفاده شود خب میاد و نوع دکمه رو مشخص میکنه، مثلا دکمه ارسال اطلاعات Submit باشه یا دکمه ریست کردن Reset
یا مثلا اگر درون تگ Input قرار گرفت میاد و نوع Input رو مشخص میکنه، اینکه مثلا نوع متنی باشه یا ایمیل یا تلفن یا پسورد و یا تاریخ و…
و در نهایت اگر این صفت درون تگ های Embed, Link, Object, Script, Source , Style و a قرار گرفت نیز میتونه نوع رسانه ی محتوایی این تگ ها را مشخص کند، رسانه محتوایی یعنی اینکه ساختار یک فایل به چه شکل می باشد.
بفرض مثال یک فایل HTML نوع رسانه محتواییش text/html می باشد، یعنی یک فایل بر پایه متن ، یا مثلا برای یک فایل CSS میشه text/css یا مثلا برای یک فایل PDF میشه application/pdf
در این وبسایت میتوانید لیست کامل و تمامی انواع فایل ها بهمراه نوع آنها را مشاهده نمایید.
Free-Learn
عناصری که توسط این صفت پشتیبانی می شوند
این صفت را میتوان در عناصر/تگ های زیر بکار برد.
| <input> | <embed> | <button> |
| <object> | <a> | <link> |
| <style> | <source> | <script> |
Free-Learn
مثال از صفت Type در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : استفاده در تگ Button
|
1 2 3 4 5 6 7 8 9 10 |
<body> <form action="#" method="POST"> <input type="text"> <br> <input type="text"> <br> <input type="submit" value="ارسال"> <input type="reset" value="پاک کردن"> </form> </body> |
مثال شماره ۲ : استفاده در تگ Embed ( مثلا فایل مون یک فایل html هستش ، پس با استفاده از صفت type نوع رسانه ای یک فایل html که میشه text/html رو مشخص کردیم )
|
1 2 3 4 5 |
<body> <embed src="files/test-object.html" type="text/html"> </body> |
مثال شماره ۳ : استفاده در تگ Input
|
1 2 3 4 5 6 7 8 9 |
<body> <form action="files/get_data6.php" method="POST"> <input type="text" name="UserName"> <br> <input type="password" name="Password"> <br> <input type="submit" value="ارسال"> </form> </body> |
مثال شماره ۴ : استفاده در تگ Link
|
1 2 3 |
<head> <link rel="stylesheet" href="files/mystyle.css" type="text/css"> </head> |
مثال شماره ۵ : استفاده در تگ a
|
1 2 3 4 5 |
<body> <a href="https://free-learn.ir/" type="text/html">سایت من</a> </body> |
مثال شماره ۶ : استفاده در تگ Object
|
1 2 3 4 5 |
<body> <object data="files/test-object.html" type="text/html"></object> </body> |
مثال شماره ۷ : استفاده در تگ Script
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> function MyMessage(){ document.getElementById("Result").innerHTML = "Salam Khobi?"; } </script> |
مثال شماره ۸ : استفاده در تگ Source
|
1 2 3 4 5 6 7 |
<body> <audio controls> <source src="files/demo.mp3" type="audio/mpeg"> </audio> </body> |
مثال شماره ۹ : استفاده در تگ Style
|
1 2 3 4 5 6 7 8 |
<style type="text/css"> body{ background-color:#f2f2f2; text-align:center; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت type در HTML پشتیبانی میکنند یا خیر.
| نام تگ | Chrome | Firefox | Opera | Safari | Edge |
| button | بله | بله | بله | بله | بله |
| embed | بله | بله | بله | بله | بله |
| input | بله | بله | بله | بله | بله |
| link | بله | بله | بله | بله | بله |
| object | بله | بله | بله | بله | بله |
| script | بله | بله | بله | بله | بله |
| source | بله | بله | بله | بله | بله |
| style | بله | بله | بله | بله | بله |
| a | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این صفت در HTML بصورت زیر می باشد.
|
1 2 3 4 5 6 7 8 9 10 |
<button type="Value"> <input type="Value"> <a type="Media-Type"> <embed type="Media-Type"> <link type="Media-Type"> <object type="Media-Type"> <script type="Media-Type"> <source type="Media-Type"> <style type="Media-Type"> |
Free-Learn
جدول مقادیر صفت Type در HTML
در جدول زیر میتوانید، مقادیری را که میتوان در این صفت استفاده کرد مشاهده نمایید.
- برای تگ button
|
1 |
<button type="button|submit|reset"> |
| مقدار | توضیح |
|---|---|
| button | دکمه یک دکمه قابل کلیک است |
| submit | دکمه یک دکمه ارسال است ( ارسال داده های فرم ) |
| reset | دکمه یک دکمه پاک کننده است ( برای پاک کردن داده های داخل اینپوت ) |
- برای تگ input
|
1 |
<input type="Input-Name"> |
| مقدار |
|---|
| button |
| checkbox |
| color |
| date |
| datetime-local |
| file |
| hidden |
| image |
| month |
| number |
| password |
| radio |
| range |
| reset |
| search |
| submit |
| tel |
| text |
| time |
| url |
| week |
- برای تگ های Embed, Link, Object, Script, Source , Style و a
|
1 2 3 4 5 6 7 |
<a type="Media-Type"> <embed type="Media-Type"> <link type="Media-Type"> <object type="Media-Type"> <script type="Media-Type"> <source type="Media-Type"> <style type="Media-Type"> |
| مقدار | توضیح |
|---|---|
| Media-Type | نوع رسانه ای فایل را مشخص میکند مشاهده لیست کامل نوع رسانه ای فایل ها |
Free-Learn
نکات و توضیحات
- همیشه سعی کنید از این صفت برای مشخص کردن نوع یک تگ استفاده کنید، چون اگه نوع یک تگ رو مشخص نکنید مرورگرها دقیقا نمیدونن باید چه نوعی رو نمایش بدن بهمین خاطر ممکنه خودشون سرخود یه نوعی رو انتخاب کنن که ما اونو نمیخوایم.
