سلام به همه دوستان عزیز! به قسمت آخر دوره آموزش HTML خوش آمدید. من، صادق جعفری، امروز با یک عالمه مطالب جذاب و کاربردی در خدمتتون هستم. تو این قسمت قراره بریم سراغ انواع لیست‌ها مثل ol، ul و dl که شاید کمتر باهاشون آشنا باشید، و همینطور ویژگی‌های تگ body رو بررسی کنیم. بعدش با هم یاد می‌گیریم چطور با استفاده از نام رنگ، کدهای هگزادسیمال و مقادیر RGB رنگ‌ها رو تنظیم کنیم.
اما این فقط اول کاره! قراره نحوه استفاده از چندرسانه‌ای‌ها مثل تصاویر و ویدئوها در HTML رو یاد بگیریم و بعد هم کلی چیزهای جذاب در مورد فرم‌ها بگیم؛ از کنترل‌های ورودی متن گرفته تا checkbox و radiobox و حتی باکس‌های انتخاب فایل. در آخر هم درباره کنترل‌های مخفی و دکمه‌ها صحبت می‌کنیم تا با تمام ابزارهای HTML آشنا بشیم و بتونیم صفحات وب حرفه‌ای بسازیم. بزن بریم که کلی چیزای جالب تو راهه!
انواع لیست‌ها در HTML
لیست‌ها در HTML یکی از ابزارهای مهم برای نمایش مجموعه‌ای از آیتم‌ها به صورت منظم و مرتب هستند. HTML سه نوع لیست اصلی دارد: لیست‌های مرتب (Ordered Lists)، لیست‌های نامرتب (Unordered Lists) و لیست‌های توضیحی (Description Lists). هر کدام از این لیست‌ها دارای کاربردها و ویژگی‌های خاص خود هستند. در اینجا به بررسی هر یک از این نوع لیست‌ها می‌پردازیم و با مثال‌های کاربردی نحوه استفاده از آن‌ها را توضیح می‌دهیم.
لیست‌های مرتب (Ordered Lists) - <ol>
لیست‌های مرتب برای نمایش مجموعه‌ای از آیتم‌ها که ترتیب آن‌ها مهم است، استفاده می‌شوند. هر آیتم در این لیست با یک شماره یا حرف خاص نمایش داده می‌شود.
ساختار کلی لیست مرتب
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
مثال لیست مرتب
<!DOCTYPE html>
<html>
<head>
<title>An example of an ordered list</title>
</head>
<body>
<h1>An example of an ordered list</h1>
<ol>
<li>HTML tutorial</li>
<li>CSS tutorial</li>
<li>JavaScript training</li>
</ol>
</body>
</html>
ویژگی‌های تگ <ol>
1. type
ویژگی type نوع شماره‌گذاری آیتم‌های لیست را تعیین می‌کند. مقادیر ممکن شامل 1 (عدد)، A (حروف بزرگ)، a (حروف کوچک)، I (اعداد رومی بزرگ)، و i (اعداد رومی کوچک) هستند.
<ol type="A">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
2. start
ویژگی start شماره شروع برای آیتم‌های لیست را تعیین می‌کند.
<ol start="5">
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
3. reversed
ویژگی reversed جهت شماره‌گذاری آیتم‌های لیست را معکوس می‌کند.
<ol reversed>
<li>item 3</li>
<li>item 2</li>
<li>item 1</li>
</ol>
مثال جامع با استفاده از ویژگی‌های مختلف تگ <ol>
در این مثال، از چندین ویژگی تگ <ol> برای تنظیم ظاهر و رفتار لیست مرتب استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of the features of the ol tag</title>
</head>
<body>
<h1>A comprehensive example of the features of the ol tag</h1>
<h2>List with uppercase numbered letters</h2>
<ol type="A">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
<h2>List starting from number 5</h2>
<ol start="5">
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ol>
<h2>Reverse list</h2>
<ol reversed>
<li>item 3</li>
<li>item 2</li>
<li>item 1</li>
</ol>
</body>
</html>
لیست‌های نامرتب (Unordered Lists) - <ul>
لیست‌های نامرتب برای نمایش مجموعه‌ای از آیتم‌ها که ترتیب آن‌ها اهمیتی ندارد، استفاده می‌شوند. هر آیتم در این لیست با یک علامت نقطه یا دایره نمایش داده می‌شود.
ساختار کلی لیست نامرتب
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
مثال لیست نامرتب
<!DOCTYPE html>
<html>
<head>
<title>An unordered list example</title>
</head>
<body>
<h1>An unordered list example</h1>
<ul>
<li>Buy a laptop</li>
<li>buy cellphone</li>
<li>Buy a tablet</li>
</ul>
</body>
</html>
ویژگی‌های تگ <ul>
1. type
ویژگی type نوع علامت مورد استفاده برای آیتم‌های لیست را تعیین می‌کند. مقادیر ممکن شامل disc (پیش‌فرض، نقطه پر), circle (دایره توخالی) و square (مربع پر) هستند. این ویژگی در HTML5 منسوخ شده است و به جای آن از CSS استفاده می‌شود.
<ul type="circle">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
لیست‌های توضیحی (Description Lists) - <dl>
لیست‌های توضیحی برای نمایش مجموعه‌ای از اصطلاحات و توضیحات آن‌ها استفاده می‌شوند. این لیست‌ها شامل تگ‌های <dt> برای تعریف اصطلاحات و <dd> برای توضیحات مربوط به آن‌ها هستند.
ساختار کلی لیست توضیحی
<dl>
<dt>Idiom 1</dt>
<dd>Explanation of the term 1</dd>
<dt>Idiom 2</dt>
<dd>Explanation of the term 2</dd>
</dl>
مثال لیست توضیحی
<!DOCTYPE html>
<html>
<head>
<title>An example of an explanatory list</title>
</head>
<body>
<h1>An example of an explanatory list</h1>
<dl>
<dt>HTML</dt>
<dd>A hypertext markup language for building web pages</dd>
<dt>CSS</dt>
<dd>A styling language for beautifying web pages</dd>
<dt>JavaScript</dt>
<dd>A programming language for creating interaction on web pages</dd>
</dl>
</body>
</html>
لیست‌ها در HTML ابزار قدرتمندی برای نمایش مجموعه‌ای از آیتم‌ها به صورت منظم و مرتب هستند. با استفاده از لیست‌های مرتب، نامرتب و توضیحی می‌توانید اطلاعات خود را به شکل مناسبی سازمان‌دهی کنید. همچنین با استفاده از CSS می‌توانید ظاهر لیست‌ها را بهبود داده و به صفحات وب خود جلوه بهتری ببخشید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از لیست‌ها در HTML کمک کرده باشد.
ویژگی های تگ <body>
تگ <body> در HTML یکی از مهم‌ترین تگ‌ها است که تمام محتوای قابل مشاهده یک صفحه وب را در بر می‌گیرد. هر چیزی که درون تگ <body> قرار بگیرد، در مرورگر نمایش داده می‌شود. این تگ همچنین دارای ویژگی‌های متعددی است که به شما امکان می‌دهد ظاهر و رفتار محتوای صفحه وب خود را سفارشی‌سازی کنید.
1. background
ویژگی background یک تصویر پس‌زمینه برای صفحه وب تعیین می‌کند. این ویژگی در HTML5 منسوخ شده و بهتر است از CSS برای این کار استفاده شود.
<body background="background.jpg">
<!-- Page content -->
</body>
2. bgcolor
ویژگی bgcolor رنگ پس‌زمینه صفحه وب را تعیین می‌کند. این ویژگی نیز در HTML5 منسوخ شده و بهتر است از CSS برای این کار استفاده شود.
<body bgcolor="#ffcc00">
<!-- Page content -->
</body>
3. text
ویژگی text رنگ متن صفحه وب را تعیین می‌کند. این ویژگی نیز در HTML5 منسوخ شده و بهتر است از CSS برای این کار استفاده شود.
<body text="black">
<!-- Page content -->
</body>
4. link
ویژگی link رنگ لینک‌های استفاده نشده در صفحه وب را تعیین می‌کند. این ویژگی نیز در HTML5 منسوخ شده و بهتر است از CSS برای این کار استفاده شود.
<body link="blue">
<!-- Page content -->
</body>
5. vlink
ویژگی vlink رنگ لینک‌های بازدید شده در صفحه وب را تعیین می‌کند. این ویژگی نیز در HTML5 منسوخ شده و بهتر است از CSS برای این کار استفاده شود.
<body vlink="purple">
<!-- Page content -->
</body>
6. alink
ویژگی alink رنگ لینک‌های فعال در صفحه وب را تعیین می‌کند. این ویژگی نیز در HTML5 منسوخ شده و بهتر است از CSS برای این کار استفاده شود.
<body alink="red">
<!-- Page content -->
</body>
روش‌های تنظیم رنگ در HTML
در HTML و CSS، شما می‌توانید رنگ‌ها را به روش‌های مختلفی تنظیم کنید. این روش‌ها شامل استفاده از نام رنگ‌ها، کدهای هگزا (Hexadecimal) و مقادیر RGB (Red, Green, Blue) می‌شوند. هر کدام از این روش‌ها مزایا و کاربردهای خاص خود را دارند. در اینجا به بررسی این روش‌ها می‌پردازیم و با مثال‌های کاربردی نحوه استفاده از آن‌ها را توضیح می‌دهیم.
1. تنظیم رنگ با نام رنگ‌ها
HTML و CSS مجموعه‌ای از نام‌های رنگ پیش‌فرض را پشتیبانی می‌کنند که می‌توانید از آن‌ها برای تنظیم رنگ عناصر استفاده کنید. برخی از این نام‌ها عبارتند از red, blue, green, black, white, yellow, و غیره.
مثال استفاده از نام رنگ‌ها
<!DOCTYPE html>
<html>
<head>
<title>An example of using the names of colors</title>
<style>
body {
background-color: lightblue;
color: darkblue;
}
h1 {
color: green;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>
2. تنظیم رنگ با کدهای هگزا (Hexadecimal)
کدهای هگزا (Hexadecimal) یک روش متداول برای تنظیم رنگ‌ها در HTML و CSS هستند. این کدها با یک # شروع می‌شوند و شامل شش رقم هگزادسیمال (0-9 و A-F) هستند که مقدار قرمز، سبز و آبی را مشخص می‌کنند.
ساختار کد هگزا
- کد هگزا به صورت
#RRGGBBنوشته می‌شود. RRمقدار قرمز (Red)GGمقدار سبز (Green)BBمقدار آبی (Blue)
مثال استفاده از کدهای هگزا
<!DOCTYPE html>
<html>
<head>
<title>Example of using hexadecimal codes</title>
<style>
body {
background-color: #ADD8E6; /* Light Blue */
color: #00008B; /* Dark Blue */
}
h1 {
color: #008000; /* Green */
}
p {
color: #FF0000; /* Red */
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. تنظیم رنگ با مقادیر RGB
روش دیگر برای تنظیم رنگ‌ها استفاده از مقادیر RGB است. در این روش، مقدار قرمز، سبز و آبی به صورت جداگانه و در محدوده 0 تا 255 تعیین می‌شوند.
ساختار RGB
rgb(R, G, B)R: مقدار قرمز (0-255)G: مقدار سبز (0-255)B: مقدار آبی (0-255)
مثال استفاده از مقادیر RGB
<!DOCTYPE html>
<html>
<head>
<title>Example of using RGB values</title>
<style>
body {
background-color: rgb(173, 216, 230); /* Light Blue */
color: rgb(0, 0, 139); /* Dark Blue */
}
h1 {
color: rgb(0, 128, 0); /* Green */
}
p {
color: rgb(255, 0, 0); /* Red */
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>
4. استفاده از مقادیر RGBa
مقادیر RGBa یک نوع پیشرفته‌تر از مقادیر RGB هستند که شامل یک مقدار آلفا (شفافیت) نیز می‌شوند. مقدار آلفا در محدوده 0 تا 1 تعیین می‌شود.
ساختار RGBa
rgba(R, G, B, A)R: مقدار قرمز (0-255)G: مقدار سبز (0-255)B: مقدار آبی (0-255)A: مقدار آلفا (0-1)
مثال استفاده از مقادیر RGBa
<!DOCTYPE html>
<html>
<head>
<title>Example of using RGBa values</title>
<style>
body {
background-color: rgba(173, 216, 230, 0.5); /* Light Blue with 50% opacity */
color: rgba(0, 0, 139, 1); /* Dark Blue with full opacity */
}
h1 {
color: rgba(0, 128, 0, 0.8); /* Green with 80% opacity */
}
p {
color: rgba(255, 0, 0, 0.6); /* Red with 60% opacity */
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>
تنظیم رنگ‌ها در HTML و CSS با استفاده از نام رنگ‌ها، کدهای هگزا، و مقادیر RGB و RGBa امکان‌پذیر است. هر کدام از این روش‌ها کاربردها و مزایای خاص خود را دارند. استفاده از نام رنگ‌ها ساده و سریع است، کدهای هگزا دقیق‌تر هستند و مقادیر RGB و RGBa امکان تنظیم شفافیت را نیز فراهم می‌کنند. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از این روش‌ها کمک کرده باشد.
استفاده از چندرسانه‌ای در HTML
چندرسانه‌ای‌ها (Multimedia) نقش مهمی در صفحات وب دارند و به شما امکان می‌دهند محتوای جذاب‌تری را به کاربران ارائه دهید. در HTML، می‌توانید از عناصر مختلف برای درج و پخش فایل‌های صوتی و تصویری، ویدئوها، انیمیشن‌ها و غیره استفاده کنید. در این مقاله، به بررسی نحوه استفاده از چندرسانه‌ای‌ها در HTML با مثال‌های کاربردی خواهیم پرداخت.
1. تگ <audio> برای پخش فایل‌های صوتی
تگ <audio> برای جاسازی و پخش فایل‌های صوتی در صفحات وب استفاده می‌شود. این تگ دارای چندین ویژگی مهم است که به شما امکان می‌دهد کنترل کاملی بر پخش فایل‌های صوتی داشته باشید.
ویژگی‌های مهم تگ <audio>
src: مسیر فایل صوتی را مشخص می‌کند.controls: کنترل‌های پخش (play, pause, volume) را نمایش می‌دهد.autoplay: به طور خودکار فایل صوتی را پخش می‌کند.loop: فایل صوتی را به طور مداوم پخش می‌کند.muted: فایل صوتی را بی‌صدا پخش می‌کند.
مثال استفاده از تگ <audio>
<!DOCTYPE html>
<html>
<head>
<title>Audio tag example</title>
</head>
<body>
<h1>Audio tag example</h1>
<audio src="audiofile.mp3" controls></audio>
<!-- Or as follows with different formats -->
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
2. تگ <video> برای پخش فایل‌های ویدئویی
تگ <video> برای جاسازی و پخش فایل‌های ویدئویی در صفحات وب استفاده می‌شود. این تگ نیز دارای ویژگی‌های متعددی است که به شما امکان می‌دهد ویدئوها را به راحتی کنترل کنید.
ویژگی‌های مهم تگ <video>
src: مسیر فایل ویدئویی را مشخص می‌کند.controls: کنترل‌های پخش (play, pause, volume) را نمایش می‌دهد.autoplay: به طور خودکار ویدئو را پخش می‌کند.loop: ویدئو را به طور مداوم پخش می‌کند.muted: ویدئو را بی‌صدا پخش می‌کند.poster: تصویر پیش‌نمایشی که قبل از پخش ویدئو نمایش داده می‌شود.
مثال استفاده از تگ <video>
<!DOCTYPE html>
<html>
<head>
<title>Example of the video tag</title>
</head>
<body>
<h1>Example of the video tag</h1>
<video src="videofile.mp4" controls width="600"></video>
<!-- Or as follows with different formats -->
<video controls width="600" poster="posterimage.jpg">
<source src="videofile.mp4" type="video/mp4">
<source src="videofile.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
3. تگ <embed> برای جاسازی محتوای خارجی
تگ <embed> برای جاسازی محتوای خارجی مانند فایل‌های PDF، فلش، و سایر منابع چندرسانه‌ای در صفحات وب استفاده می‌شود.
ویژگی‌های مهم تگ <embed>
src: مسیر فایل خارجی را مشخص می‌کند.widthوheight: عرض و ارتفاع محتوای جاسازی شده را تعیین می‌کند.type: نوع MIME محتوای جاسازی شده را مشخص می‌کند.
مثال استفاده از تگ <embed>
<!DOCTYPE html>
<html>
<head>
<title>Example of the embed tag</title>
</head>
<body>
<h1>Example of the embed tag</h1>
<embed src="document.pdf" width="600" height="500" type="application/pdf">
</body>
</html>
4. تگ <object> برای جاسازی محتوای چندرسانه‌ای
تگ <object> مشابه تگ <embed> برای جاسازی محتوای خارجی استفاده می‌شود، اما امکانات بیشتری برای تعامل با محتوای جاسازی شده فراهم می‌کند.
ویژگی‌های مهم تگ <object>
data: مسیر فایل خارجی را مشخص می‌کند.widthوheight: عرض و ارتفاع محتوای جاسازی شده را تعیین می‌کند.type: نوع MIME محتوای جاسازی شده را مشخص می‌کند.
مثال استفاده از تگ <object>
<!DOCTYPE html>
<html>
<head>
<title>Example tag object</title>
</head>
<body>
<h1>Example tag object</h1>
<object data="document.pdf" type="application/pdf" width="600" height="500">
Your browser does not support the object tag.
</object>
</body>
</html>
5. تگ <iframe>
تگ <iframe> در HTML برای جاسازی یک صفحه وب دیگر در داخل یک صفحه وب استفاده می‌شود. این تگ به شما امکان می‌دهد تا محتوای خارجی را به صورت مستقیم درون صفحات وب خود نمایش دهید. از این تگ می‌توان برای نمایش ویدیوها، نقشه‌ها، صفحات دیگر وب و حتی فایل‌های PDF استفاده کرد.
ویژگی‌های تگ <iframe>
1. src
ویژگی src آدرس URL صفحه وب یا محتوایی که باید درون فریم نمایش داده شود را مشخص می‌کند.
<iframe src="https://www.example.com"></iframe>
2. width و height
ویژگی‌های width و height عرض و ارتفاع فریم را به پیکسل یا درصد مشخص می‌کنند.
<iframe src="https://www.example.com" width="600" height="400"></iframe>
3. frameborder
ویژگی frameborder مشخص می‌کند که آیا فریم باید دارای حاشیه باشد یا خیر. مقادیر ممکن شامل 0 (بدون حاشیه) و 1 (با حاشیه) هستند.
<iframe src="https://www.example.com" frameborder="0"></iframe>
4. allowfullscreen
ویژگی allowfullscreen به کاربران اجازه می‌دهد تا فریم را به صورت تمام صفحه مشاهده کنند.
<iframe src="https://www.example.com" allowfullscreen></iframe>
5. name
ویژگی name یک نام یکتا به فریم اختصاص می‌دهد که می‌تواند برای هدف‌یابی فرم‌ها یا لینک‌ها استفاده شود.
<iframe src="https://www.example.com" name="exampleFrame"></iframe>
6. sandbox
ویژگی sandbox امنیت فریم را با محدود کردن برخی از عملکردهای آن بهبود می‌بخشد. این ویژگی می‌تواند مقادیر متعددی داشته باشد، از جمله allow-forms, allow-same-origin, allow-scripts, allow-popups.
<iframe src="https://www.example.com" sandbox="allow-scripts"></iframe>
مثال‌های کاربردی
نمایش یک صفحه وب درون فریم
<!DOCTYPE html>
<html>
<head>
<title>Example iframe tag</title>
</head>
<body>
<h1>Example iframe tag</h1>
<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe>
</body>
</html>
در این مثال، صفحه وب https://www.example.com درون یک فریم با عرض 600 پیکسل و ارتفاع 400 پیکسل بدون حاشیه نمایش داده می‌شود.
جاسازی یک ویدیو یوتیوب
<!DOCTYPE html>
<html>
<head>
<title>Example of embedding YouTube video with iframe</title>
</head>
<body>
<h1>Example of embedding YouTube video with iframe</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>
در این مثال، یک ویدیو یوتیوب درون یک فریم با عرض 560 پیکسل و ارتفاع 315 پیکسل جاسازی شده است. ویژگی allowfullscreen به کاربران اجازه می‌دهد تا ویدیو را به صورت تمام صفحه مشاهده کنند.
استفاده از ویژگی sandbox برای بهبود امنیت
<!DOCTYPE html>
<html>
<head>
<title>Example of using sandbox in iframe</title>
</head>
<body>
<h1>Example of using sandbox in iframe</h1>
<iframe src="https://www.example.com" width="600" height="400" sandbox="allow-same-origin allow-scripts"></iframe>
</body>
</html>
در این مثال، فریم با محدودیت‌های امنیتی ایجاد شده است. این محدودیت‌ها اجازه می‌دهند که فریم از همان مبدا (origin) استفاده کند و اسکریپت‌ها اجرا شوند، اما عملکردهای دیگر محدود می‌شوند.
تگ <iframe> در HTML ابزار قدرتمندی برای جاسازی محتوای خارجی درون صفحات وب است. با استفاده از این تگ، می‌توانید صفحات وب، ویدیوها، نقشه‌ها و فایل‌های دیگر را به راحتی درون سایت خود نمایش دهید. ویژگی‌های متعددی مانند src, width, height, frameborder, allowfullscreen, name, و sandbox به شما امکان می‌دهند تا کنترل کاملی بر روی ظاهر و رفتار فریم‌ها داشته باشید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <iframe> کمک کرده باشد.
فرم ها در Html
تگ <form>
تگ <form> یکی از مهم‌ترین تگ‌ها در HTML است که برای ایجاد فرم‌های وب استفاده می‌شود. فرم‌ها به کاربران اجازه می‌دهند تا داده‌ها را وارد و به سرور ارسال کنند. این تگ می‌تواند شامل انواع مختلفی از عناصر ورودی مانند فیلدهای متنی، دکمه‌های رادیویی، چک‌باکس‌ها، دکمه‌های ارسال و غیره باشد. در اینجا، به بررسی تگ <form> و ویژگی‌های آن می‌پردازیم و با مثال‌های کاربردی نحوه استفاده از آن را توضیح می‌دهیم.
ویژگی‌های تگ <form>
1. action
ویژگی action مشخص می‌کند که داده‌های فرم به کدام URL ارسال شوند.
<form action="/submit">
<!-- Form elements -->
</form>
2. method
ویژگی method روش ارسال داده‌های فرم را مشخص می‌کند. مقادیر ممکن شامل GET و POST هستند.
<form action="/submit" method="POST">
<!-- Form elements -->
</form>
3. enctype
ویژگی enctype نوع کدگذاری داده‌های فرم را تعیین می‌کند. معمولاً برای ارسال فایل‌ها از multipart/form-data استفاده می‌شود.
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- Form elements -->
</form>
4. target
ویژگی target تعیین می‌کند که نتایج ارسال فرم در کجا نمایش داده شوند. مقادیر ممکن شامل _self, _blank, _parent, و _top هستند.
<form action="/submit" method="POST" target="_blank">
<!-- Form elements -->
</form>
5. autocomplete
ویژگی autocomplete مشخص می‌کند که آیا مرورگر باید ویژگی تکمیل خودکار را فعال کند یا خیر. مقادیر ممکن شامل on و off هستند.
<form action="/submit" method="POST" autocomplete="off">
<!-- Form elements -->
</form>
مثال ساده از فرم
<!DOCTYPE html>
<html>
<head>
<title>Simple example of the form</title>
</head>
<body>
<h1>simple form</h1>
<form action="/submit" method="POST">
<label for="name">name:</label>
<input type="text" id="name" name="name"/><br/><br/>
<label for="email">email:</label>
<input type="email" id="email" name="email"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
کنترل های ورودی متن در فرم
در HTML، کنترل‌های ورودی متن یکی از پرکاربردترین عناصر در فرم‌ها هستند که به کاربران اجازه می‌دهند تا انواع مختلفی از داده‌های متنی را وارد کنند. این کنترل‌ها شامل ورودی‌های متن معمولی، ورودی‌های رمز عبور، ورودی‌های ایمیل، و دیگر انواع ورودی‌های متنی هستند. در اینجا به بررسی انواع مختلف کنترل‌های ورودی متن و نحوه استفاده از آن‌ها می‌پردازیم.
1. ورودی متن معمولی (<input type="text">)
این نوع ورودی برای ورود متن معمولی استفاده می‌شود. کاربران می‌توانند هر نوع متنی را وارد کنند.
ویژگی‌های مهم:
maxlength: حداکثر تعداد کاراکترهایی که می‌توان وارد کرد.
placeholder: متنی که به صورت پیش‌فرض داخل فیلد نمایش داده می‌شود.
required: تعیین می‌کند که این فیلد اجباری است.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Plain text input</title>
</head>
<body>
<h1>Plain text input</h1>
<form>
<label for="username">username:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="Enter your username" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>2. ورودی رمز عبور (<input type="password">)
این نوع ورودی برای ورود رمز عبور استفاده می‌شود. کاراکترهای وارد شده به صورت نقاط یا ستاره‌ها نمایش داده می‌شوند تا از دیده شدن رمز عبور جلوگیری شود.
ویژگی‌های مهم:
maxlength: حداکثر تعداد کاراکترهایی که می‌توان وارد کرد.
placeholder: متنی که به صورت پیش‌فرض داخل فیلد نمایش داده می‌شود.
required: تعیین می‌کند که این فیلد اجباری است.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Password input</title>
</head>
<body>
<h1>Password input</h1>
<form>
<label for="password">password:</label>
<input type="password" id="password" name="password" maxlength="20" placeholder="Enter your password" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>3. ورودی ایمیل (<input type="email">)
این نوع ورودی برای ورود آدرس ایمیل استفاده می‌شود و شامل اعتبارسنجی پایه‌ای برای اطمینان از صحت فرمت ایمیل است.
ویژگی‌های مهم:
maxlength: حداکثر تعداد کاراکترهایی که می‌توان وارد کرد.
placeholder: متنی که به صورت پیش‌فرض داخل فیلد نمایش داده می‌شود.
required: تعیین می‌کند که این فیلد اجباری است.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Email input</title>
</head>
<body>
<h1>Email input</h1>
<form>
<label for="email">email:</label>
<input type="email" id="email" name="email" maxlength="50" placeholder="Enter your email" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>4. ورودی شماره (<input type="number">)
این نوع ورودی برای ورود اعداد استفاده می‌شود. می‌توان حداقل و حداکثر مقادیر و گام‌های عددی را مشخص کرد.
ویژگی‌های مهم:
min: حداقل مقدار مجاز.
max: حداکثر مقدار مجاز.
step: مقدار گام بین اعداد.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Input no</title>
</head>
<body>
<h1>Input no</h1>
<form>
<label for="age">age:</label>
<input type="number" id="age" name="age" min="1" max="100" step="1" placeholder="Enter your age" required/>
<input type="submit" value="submit"/>
</form>
</body>
</html>5. ناحیه متنی (<textarea>)
ناحیه متنی برای ورود متن‌های بلندتر استفاده می‌شود. این تگ به کاربر اجازه می‌دهد تا چندین خط متن وارد کند.
ویژگی‌های مهم:
rows: تعداد سطرهای ناحیه متنی.
cols: تعداد ستون‌های ناحیه متنی.
maxlength: حداکثر تعداد کاراکترهایی که می‌توان وارد کرد.
placeholder: متنی که به صورت پیش‌فرض داخل فیلد نمایش داده می‌شود.
مثال:
<!DOCTYPE html>
<html>
<head>
<title>Text area</title>
</head>
<body>
<h1>Text area</h1>
<form>
<label for="message">message:</label>
<textarea id="message" name="message" rows="4" cols="50" maxlength="500" placeholder="Enter your message" required></textarea>
<input type="submit" value="submit"/>
</form>
</body>
</html>کنترل‌های ورودی متن در HTML ابزارهای قدرتمندی برای جمع‌آوری داده‌های مختلف از کاربران هستند. با استفاده از انواع مختلف این کنترل‌ها مانند ورودی‌های متن معمولی، رمز عبور، ایمیل، شماره و ناحیه متنی، می‌توانید فرم‌های کارآمد و کاربرپسند ایجاد کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از کنترل‌های ورودی متن در HTML کمک کرده باشد.
کنترل‌های checkbox
چک‌باکس‌ها یکی از کنترل‌های مهم در فرم‌های HTML هستند که به کاربران اجازه می‌دهند یک یا چند گزینه را از یک مجموعه انتخاب کنند. برخلاف دکمه‌های رادیویی، کاربران می‌توانند هر تعداد از گزینه‌ها را انتخاب کنند. این قابلیت چک‌باکس‌ها را به ابزاری مفید برای جمع‌آوری داده‌های چندگزینه‌ای تبدیل می‌کند.
ساختار کلی چک‌باکس
چک‌باکس‌ها با استفاده از تگ <input> و تعیین نوع آن به checkbox ایجاد می‌شوند. هر چک‌باکس دارای ویژگی‌های مختلفی است که به شما امکان می‌دهد رفتار و ظاهر آن را سفارشی‌سازی کنید.
ویژگی‌های مهم چک‌باکس
"type="checkbox: نوع ورودی را به چک‌باکس تعیین می‌کند.
name: نام چک‌باکس که برای گروه‌بندی چک‌باکس‌ها استفاده می‌شود.
value: مقدار مرتبط با چک‌باکس.
checked: تعیین می‌کند که چک‌باکس به طور پیش‌فرض انتخاب شده باشد.
disabled: چک‌باکس را غیرفعال می‌کند.
مثال ساده از چک‌باکس
<!DOCTYPE html>
<html>
<head>
<title>Simple checkbox example</title>
</head>
<body>
<h1>Select favorites</h1>
<form action="/submit" method="POST">
<label for="coding">Programming</label>
<input type="checkbox" id="coding" name="interest" value="coding"/><br/><br/>
<label for="music">Music</label>
<input type="checkbox" id="music" name="interest" value="music"/><br/><br/>
<label for="sports">sport</label>
<input type="checkbox" id="sports" name="interest" value="sports"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
استفاده از چک‌باکس‌های پیش‌فرض انتخاب شده
برای تعیین چک‌باکس‌های پیش‌فرض انتخاب شده، از ویژگی checked استفاده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Example: The default checkbox is selected</title>
</head>
<body>
<h1>Select favorites</h1>
<form action="/submit" method="POST">
<label for="coding">Programming</label>
<input type="checkbox" id="coding" name="interest" value="coding" checked/><br/><br/>
<label for="music">music</label>
<input type="checkbox" id="music" name="interest" value="music"/><br/><br/>
<label for="sports">sport</label>
<input type="checkbox" id="sports" name="interest" value="sports" checked/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
استفاده از چک‌باکس‌های غیرفعال
برای غیرفعال کردن چک‌باکس‌ها، از ویژگی disabled استفاده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Example of disabled checkbox</title>
</head>
<body>
<h1>Select favorites</h1>
<form action="/submit" method="POST">
<label for="coding">Programming</label>
<input type="checkbox" id="coding" name="interest" value="coding"/><br/><br/>
<label for="music">music</label>
<input type="checkbox" id="music" name="interest" value="music" disabled/><br/><br/>
<label for="sports">sport</label>
<input type="checkbox" id="sports" name="interest" value="sports"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
گروه‌بندی چک‌باکس‌ها
برای گروه‌بندی چک‌باکس‌ها می‌توان از ویژگی name استفاده کرد. تمامی چک‌باکس‌هایی که یک name مشترک دارند به عنوان یک گروه شناخته می‌شوند.
<!DOCTYPE html>
<html>
<head>
<title>Example of grouping checkboxes</title>
</head>
<body>
<h1>Select favorites</h1>
<form action="/submit" method="POST">
<label for="coding">Programming</label>
<input type="checkbox" id="coding" name="interest" value="coding"/><br/><br/>
<label for="music">music</label>
<input type="checkbox" id="music" name="interest" value="music"/><br/><br/>
<label for="sports">sports</label>
<input type="checkbox" id="sports" name="interest" value="sports"/><br/><br/>
<label for="travel">travel</label>
<input type="checkbox" id="travel" name="interest" value="travel"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>چک‌باکس‌ها در HTML ابزار قدرتمندی برای ایجاد فرم‌های تعاملی هستند که به کاربران اجازه می‌دهند تا یک یا چند گزینه را از میان مجموعه‌ای از گزینه‌ها انتخاب کنند. با استفاده از ویژگی‌های مختلف چک‌باکس‌ها و ترکیب آن‌ها با جاوااسکریپت، می‌توانید فرم‌های کارآمد و کاربرپسند ایجاد کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از چک‌باکس‌ها در HTML کمک کرده باشد.
کنترل‌های Radiobox
کنترل Radiobox (دکمه‌های رادیویی) یکی از عناصر پرکاربرد در فرم‌های HTML است که به کاربران اجازه می‌دهد تا یک گزینه را از میان چندین گزینه انتخاب کنند. برخلاف چک‌باکس‌ها، کاربران فقط می‌توانند یک گزینه را از میان دکمه‌های رادیویی انتخاب کنند. این ویژگی، دکمه‌های رادیویی را به ابزاری مناسب برای انتخاب‌های انحصاری تبدیل می‌کند.
ساختار کلی Radiobox
دکمه‌های رادیویی با استفاده از تگ <input> و تعیین نوع آن به radio ایجاد می‌شوند. هر دکمه رادیویی دارای ویژگی‌های مختلفی است که به شما امکان می‌دهد رفتار و ظاهر آن را سفارشی‌سازی کنید.
ویژگی‌های مهم Radiobox
"type="radio: نوع ورودی را به دکمه رادیویی تعیین می‌کند.
name: نام دکمه رادیویی که برای گروه‌بندی دکمه‌ها استفاده می‌شود.
value: مقدار مرتبط با دکمه رادیویی.
checked: تعیین می‌کند که دکمه رادیویی به طور پیش‌فرض انتخاب شده باشد.
disabled: دکمه رادیویی را غیرفعال می‌کند.
مثال ساده از Radiobox
<!DOCTYPE html>
<html>
<head>
<title>A simple example of radio buttons</title>
</head>
<body>
<h1>Gender selection</h1>
<form action="/submit" method="POST">
<label for="male">male</label>
<input type="radio" id="male" name="gender" value="male"/><br/><br/>
<label for="female">female</label>
<input type="radio" id="female" name="gender" value="female"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>استفاده از دکمه‌های رادیویی پیش‌فرض انتخاب شده
برای تعیین دکمه‌های رادیویی پیش‌فرض انتخاب شده، از ویژگی checked استفاده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Example of the default radio buttons selected</title>
</head>
<body>
<h1>Gender selection</h1>
<form action="/submit" method="POST">
<label for="male">male</label>
<input type="radio" id="male" name="gender" value="male" checked/><br/><br/>
<label for="female">female</label>
<input type="radio" id="female" name="gender" value="female"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>استفاده از دکمه‌های رادیویی غیرفعال
برای غیرفعال کردن دکمه‌های رادیویی، از ویژگی disabled استفاده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Example of disabled radio buttons</title>
</head>
<body>
<h1>Gender selection</h1>
<form action="/submit" method="POST">
<label for="male">male</label>
<input type="radio" id="male" name="gender" value="male"/><br/><br/>
<label for="female">female</label>
<input type="radio" id="female" name="gender" value="female" disabled/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>گروه‌بندی دکمه‌های رادیویی
برای گروه‌بندی دکمه‌های رادیویی می‌توان از ویژگی name استفاده کرد. تمامی دکمه‌های رادیویی که یک name مشترک دارند به عنوان یک گروه شناخته می‌شوند و کاربر فقط می‌تواند یکی از آن‌ها را انتخاب کند.
<!DOCTYPE html>
<html>
<head>
<title>Example of grouping radio buttons</title>
</head>
<body>
<h1>Gender selection</h1>
<form action="/submit" method="POST">
<label for="male">male</label>
<input type="radio" id="male" name="gender" value="male"/><br/><br/>
<label for="female">female</label>
<input type="radio" id="female" name="gender" value="female"/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>دکمه‌های رادیویی در HTML ابزار قدرتمندی برای ایجاد فرم‌های تعاملی هستند که به کاربران اجازه می‌دهند تا یک گزینه را از میان چندین گزینه انتخاب کنند. با استفاده از ویژگی‌های مختلف دکمه‌های رادیویی و ترکیب آن‌ها با جاوااسکریپت، می‌توانید فرم‌های کارآمد و کاربرپسند ایجاد کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از دکمه‌های رادیویی در HTML کمک کرده باشد.
کنترل‌های Selectbox
کنترل Selectbox در HTML (که به آن Drop-down list یا Combo box نیز گفته می‌شود) یکی از ابزارهای مهم برای جمع‌آوری داده‌های ورودی از کاربران است. این کنترل به کاربران اجازه می‌دهد تا یک گزینه یا چندین گزینه را از یک لیست انتخاب کنند. Selectbox برای نمایش لیستی از گزینه‌ها در یک فضای کوچک بسیار مفید است و به کاربران امکان می‌دهد تا به راحتی گزینه‌های مورد نظر خود را انتخاب کنند.
ساختار کلی Selectbox
Selectbox با استفاده از تگ <select> و تگ‌های داخلی <option> ایجاد می‌شود. تگ <select> شامل ویژگی‌های مختلفی است که به شما امکان می‌دهد رفتار و ظاهر Selectbox را سفارشی‌سازی کنید.
ویژگی‌های مهم Selectbox
name: نام Selectbox که برای ارسال داده‌ها استفاده می‌شود.
multiple: امکان انتخاب چندین گزینه را فراهم می‌کند.
size: تعداد گزینه‌های قابل مشاهده را تعیین می‌کند.
disabled: Selectbox را غیرفعال می‌کند.
required: تعیین می‌کند که انتخاب یک گزینه از Selectbox اجباری است.
مثال ساده از Selectbox
<!DOCTYPE html>
<html>
<head>
<title>Simple example of Selectbox</title>
</head>
<body>
<h1>Select country</h1>
<form action="/submit" method="POST">
<label for="country">country:</label>
<select id="country" name="country">
<option value="iran">iran</option>
<option value="usa">usa</option>
<option value="uk">uk</option>
</select>
<input type="submit" value="submit"/>
</form>
</body>
</html>استفاده از Selectbox با چندین انتخاب
برای ایجاد Selectbox با امکان انتخاب چندین گزینه، از ویژگی multiple استفاده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Selectbox example with multiple selections</title>
</head>
<body>
<h1>Select favorites</h1>
<form action="/submit" method="POST">
<label for="interests">interests:</label>
<select id="interests" name="interests" multiple size="4">
<option value="coding">coding</option>
<option value="music">music</option>
<option value="sports">sports</option>
<option value="travel">travel</option>
</select>
<input type="submit" value="submit"/>
</form>
</body>
</html>استفاده از Selectbox با گزینه‌های پیش‌فرض انتخاب شده
برای تعیین گزینه‌های پیش‌فرض انتخاب شده، از ویژگی selected استفاده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Selectbox example with default options selected</title>
</head>
<body>
<h1>Select country</h1>
<form action="/submit" method="POST">
<label for="country">country:</label>
<select id="country" name="country">
<option value="iran" selected>iran</option>
<option value="usa">usa</option>
<option value="uk">uk</option>
</select>
<input type="submit" value="submit"/>
</form>
</body>
</html>استفاده از Selectbox غیرفعال
برای غیرفعال کردن Selectbox، از ویژگی disabled استفاده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Selectbox disabled example</title>
</head>
<body>
<h1>Select country</h1>
<form action="/submit" method="POST">
<label for="country">country:</label>
<select id="country" name="country" disabled>
<option value="iran">iran</option>
<option value="usa">usa</option>
<option value="uk">uk</option>
</select>
<input type="submit" value="submit"/>
</form>
</body>
</html>Selectbox در HTML ابزاری قدرتمند برای ایجاد فرم‌های تعاملی است که به کاربران اجازه می‌دهد تا یک یا چند گزینه را از میان مجموعه‌ای از گزینه‌ها انتخاب کنند. با استفاده از ویژگی‌های مختلف Selectbox و ترکیب آن‌ها با جاوااسکریپت، می‌توانید فرم‌های کارآمد و کاربرپسند ایجاد کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از Selectbox در HTML کمک کرده باشد.
باکس‌های انتخاب فایل
باکس‌های انتخاب فایل یکی از کنترل‌های پرکاربرد در فرم‌های HTML هستند که به کاربران اجازه می‌دهند تا فایل‌هایی را از سیستم خود انتخاب و آپلود کنند. این کنترل با استفاده از تگ <input> و تعیین نوع آن به file ایجاد می‌شود. باکس‌های انتخاب فایل به کاربران امکان می‌دهند تا انواع مختلف فایل‌ها از جمله تصاویر، اسناد، ویدئوها و غیره را انتخاب و ارسال کنند.
ساختار کلی باکس انتخاب فایل
باکس انتخاب فایل با استفاده از تگ <input type="file"> ایجاد می‌شود. این تگ دارای ویژگی‌های مختلفی است که به شما امکان می‌دهد رفتار و ظاهر آن را سفارشی‌سازی کنید.
ویژگی‌های مهم باکس انتخاب فایل
"type="file: نوع ورودی را به باکس انتخاب فایل تعیین می‌کند.
name: نام باکس انتخاب فایل که برای ارسال داده‌ها استفاده می‌شود.
accept: نوع فایل‌هایی که کاربر مجاز به انتخاب آن‌ها است را مشخص می‌کند.
multiple: امکان انتخاب چندین فایل را فراهم می‌کند.
required: تعیین می‌کند که انتخاب یک فایل اجباری است.
disabled: باکس انتخاب فایل را غیرفعال می‌کند.
مثال ساده از باکس انتخاب فایل
<!DOCTYPE html>
<html>
<head>
<title>A simple example of the file selection box</title>
</head>
<body>
<h1>file upload</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">Select file:</label>
<input type="file" id="file" name="file" required/>
<input type="submit" value="upload"/>
</form>
</body>
</html>محدود کردن نوع فایل‌های مجاز با ویژگی accept
ویژگی accept نوع فایل‌هایی که کاربر مجاز به انتخاب آن‌ها است را مشخص می‌کند. برای مثال، می‌توانید تنها فایل‌های تصویری یا فایل‌های PDF را مجاز کنید.
مثال محدود کردن به فایل‌های تصویری
<!DOCTYPE html>
<html>
<head>
<title>Limit to image files</title>
</head>
<body>
<h1>Upload image</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">Select image:</label>
<input type="file" id="file" name="file" accept="image/*" required/>
<input type="submit" value="upload"/>
</form>
</body>
</html>
مثال محدود کردن به فایل‌های PDF
<!DOCTYPE html>
<html>
<head>
<title>Limit to PDF files</title>
</head>
<body>
<h1>upload PDF</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">Select file PDF:</label>
<input type="file" id="file" name="file" accept=".pdf" required/>
<input type="submit" value="upload"/>
</form>
</body>
</html>اجازه دادن به انتخاب چندین فایل با ویژگی multiple
برای ایجاد باکس انتخاب فایل که امکان انتخاب چندین فایل را فراهم می‌کند، از ویژگی multiple استفاده می‌شود.
مثال باکس انتخاب چندین فایل
<!DOCTYPE html>
<html>
<head>
<title>Example of multiple file selection box</title>
</head>
<body>
<h1>Upload multiple files</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple required/>
<input type="submit" value="upload"/>
</form>
</body>
</html>باکس انتخاب فایل غیرفعال
برای غیرفعال کردن باکس انتخاب فایل، از ویژگی disabled استفاده می‌شود.
مثال باکس انتخاب فایل غیرفعال
<!DOCTYPE html>
<html>
<head>
<title>Disabled file selection box</title>
</head>
<body>
<h1>file upload</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="file">Select files:</label>
<input type="file" id="file" name="file" disabled/>
<input type="submit" value="upload" disabled/>
</form>
</body>
</html>باکس‌های انتخاب فایل در HTML ابزار قدرتمندی برای ایجاد فرم‌های تعاملی هستند که به کاربران اجازه می‌دهند تا فایل‌های خود را انتخاب و آپلود کنند. با استفاده از ویژگی‌های مختلف باکس انتخاب فایل و ترکیب آن‌ها با جاوااسکریپت، می‌توانید فرم‌های کارآمد و کاربرپسند ایجاد کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از باکس‌های انتخاب فایل در HTML کمک کرده باشد.
کنترل های مخفی
کنترل‌های مخفی (Hidden Controls) در HTML برای ذخیره داده‌هایی استفاده می‌شوند که کاربر نمی‌تواند آن‌ها را ببیند یا تغییر دهد. این نوع کنترل‌ها برای ارسال اطلاعات اضافی به سرور بدون نمایش آن‌ها به کاربر مفید هستند. کنترل‌های مخفی با استفاده از تگ <input> و تعیین نوع آن به hidden ایجاد می‌شوند.
ساختار کلی کنترل‌های مخفی
کنترل‌های مخفی با استفاده از تگ <input type="hidden"> ایجاد می‌شوند. این تگ دارای ویژگی‌های مختلفی است که به شما امکان می‌دهد داده‌های مخفی را به فرم‌ها اضافه کنید.
ویژگی‌های مهم کنترل‌های مخفی
type="hidden": نوع ورودی را به کنترل مخفی تعیین می‌کند.
name: نام کنترل مخفی که برای ارسال داده‌ها استفاده می‌شود.
value: مقداری که باید ارسال شود.
مثال ساده از کنترل مخفی
<!DOCTYPE html>
<html>
<head>
<title>A simple example of hidden control</title>
</head>
<body>
<h1>Form with hidden control</h1>
<form action="/submit" method="POST">
<input type="hidden" name="userID" value="12345"/>
<label for="name">name:</label>
<input type="text" id="name" name="name" required/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
استفاده از کنترل‌های مخفی برای ذخیره اطلاعات اضافی
گاهی اوقات نیاز است اطلاعات اضافی که کاربر نیازی به دیدن آن‌ها ندارد، مانند شناسه‌های کاربری یا توکن‌های CSRF، ارسال شود.
مثال ذخیره اطلاعات اضافی
<!DOCTYPE html>
<html>
<head>
<title>Save additional information with hidden control</title>
</head>
<body>
<h1>Form with additional information</h1>
<form action="/submit" method="POST">
<input type="hidden" name="userID" value="12345"/>
<input type="hidden" name="csrf_token" value="abcdef123456"/>
<label for="name">name:</label>
<input type="text" id="name" name="name" required/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
استفاده از کنترل‌های مخفی برای پیگیری وضعیت فرم
کنترل‌های مخفی می‌توانند برای پیگیری وضعیت فرم یا ذخیره مراحل مختلف در یک فرم چند مرحله‌ای استفاده شوند.
مثال پیگیری وضعیت فرم
<!DOCTYPE html>
<html>
<head>
<title>Track the status of the form with hidden control</title>
</head>
<body>
<h1>Multi-step form</h1>
<form action="/submit" method="POST">
<input type="hidden" name="step" value="1"/>
<label for="name">name:</label>
<input type="text" id="name" name="name" required/><br/><br/>
<input type="submit" value="next level"/>
</form>
</body>
</html>کنترل‌های مخفی در HTML ابزار قدرتمندی برای ذخیره و ارسال داده‌هایی هستند که کاربر نیازی به دیدن یا تغییر آن‌ها ندارد. با استفاده از ویژگی‌های مختلف کنترل‌های مخفی و ترکیب آن‌ها با جاوااسکریپت، می‌توانید فرم‌های کارآمد و کاربرپسند ایجاد کنید که اطلاعات اضافی و وضعیت فرم را به طور مؤثری مدیریت کنند. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از کنترل‌های مخفی در HTML کمک کرده باشد.پ
دکمه‌ها
دکمه‌ها یکی از عناصر کلیدی در فرم‌ها و صفحات وب هستند که به کاربران اجازه می‌دهند اقدامات مختلفی را انجام دهند، از ارسال فرم‌ها گرفته تا تعامل با اسکریپت‌های جاوااسکریپت. در HTML، دکمه‌ها با استفاده از تگ‌های مختلفی ایجاد می‌شوند که هرکدام دارای ویژگی‌ها و کاربردهای خاص خود هستند.
انواع دکمه‌ها در HTML
1. دکمه‌های ارسال (<input type="submit">)
این نوع دکمه‌ها برای ارسال فرم‌ها به کار می‌روند و با کلیک بر روی آن‌ها، داده‌های فرم به سرور ارسال می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>Example of a submit button</title>
</head>
<body>
<h1>Submit form</h1>
<form action="/submit" method="POST">
<label for="name">name:</label>
<input type="text" id="name" name="name" required/><br/><br/>
<input type="submit" value="submit"/>
</form>
</body>
</html>
2. دکمه‌های بازنشانی (<input type="reset">)
این نوع دکمه‌ها برای بازنشانی داده‌های فرم به حالت اولیه استفاده می‌شوند.
<!DOCTYPE html>
<html>
<head>
<title>Example of reset button</title>
</head>
<body>
<h1>Reset form</h1>
<form>
<label for="name">name:</label>
<input type="text" id="name" name="name" required/><br/><br/>
<input type="reset" value="reset"/>
</form>
</body>
</html>
3. دکمه‌های معمولی (<button>)
این نوع دکمه‌ها برای اجرای اسکریپت‌های جاوااسکریپت یا انجام اقدامات دیگر به کار می‌روند. با استفاده از تگ <button>, می‌توان دکمه‌های قابل استایلی ایجاد کرد.
<!DOCTYPE html>
<html>
<head>
<title>Example of a normal button</title>
<script>
function showAlert() {
alert("The button was clicked!");
}
</script>
</head>
<body>
<h1>Example of a normal button</h1>
<button onclick="showAlert()">click</button>
</body>
</html>
4. دکمه‌های تصویری (<input type="image">)
این نوع دکمه‌ها برای ارسال فرم با استفاده از تصاویر به کار می‌روند. دکمه‌های تصویری ظاهر جذاب‌تری دارند و می‌توانند به جای دکمه‌های معمولی استفاده شوند.
<!DOCTYPE html>
<html>
<head>
<title>Example image button</title>
</head>
<body>
<h1>Form with image button</h1>
<form action="/submit" method="POST">
<label for="name">name:</label>
<input type="text" id="name" name="name" required/><br/><br/>
<input type="image" src="submit.png" alt="submit" width="100" height="50"/>
</form>
</body>
</html>
ویژگی‌های دکمه‌ها
دکمه‌ها در HTML دارای ویژگی‌های متعددی هستند که به شما امکان می‌دهند رفتار و ظاهر آن‌ها را سفارشی‌سازی کنید.
type: نوع دکمه (مانند submit, reset, button, image).
value: مقدار دکمه (متنی که روی دکمه نمایش داده می‌شود).
name: نام دکمه که برای ارسال داده‌ها استفاده می‌شود.
disabled: غیرفعال کردن دکمه.
onclick: تعریف یک تابع جاوااسکریپت که هنگام کلیک روی دکمه اجرا می‌شود.
دکمه‌ها در HTML یکی از عناصر کلیدی برای ایجاد تعاملات کاربری هستند. با استفاده از انواع مختلف دکمه‌ها و ویژگی‌های آن‌ها، می‌توانید فرم‌ها و صفحات وب تعاملی و جذابی ایجاد کنید. همچنین، با استفاده از CSS می‌توانید ظاهر دکمه‌ها را بهبود داده و به آن‌ها استایل‌های خاصی بدهید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از دکمه‌ها در HTML کمک کرده باشد.
خب دوستان، به پایان سفرمون در دنیای HTML رسیدیم! امیدوارم از این دوره حسابی لذت برده باشید و چیزای جدیدی یاد گرفته باشید. امروز تونستیم با انواع لیست‌ها آشنا بشیم و فهمیدیم چطور می‌تونیم رنگ‌ها رو به شکل‌های مختلف تنظیم کنیم. همچنین نحوه کار با چندرسانه‌ای‌ها رو یاد گرفتیم و کلی اطلاعات مفید درباره فرم‌ها و انواع کنترل‌های ورودی به دست آوردیم.
حالا شما آماده‌اید تا با استفاده از مهارت‌هایی که یاد گرفتید، صفحات وب خلاقانه و کاربردی بسازید. یادتون باشه، تمرین و تکرار کلید موفقیت تو این راهه. اگر سوالی داشتید یا نیاز به کمک داشتید، حتماً بهم بگید. من، صادق جعفری، همیشه اینجا هستم تا بهتون کمک کنم. موفق و پیروز باشید و تا دوره‌های بعدی، خدا نگهدار!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من