رفتن به نوشته‌ها

برچسب: آموزش HTML و CSS

معرفی برچسب details و summary در html

حتما پیش آمده که برای استفاده از قابلیت نمایش و مخفی کردن یک عنصر در صفحه وب، از جاوااسکریپت استفاده کنید. اما در اینجا با معرفی دو برچسب از html5 اینکار را بدون استفاده از دستورات جاوااسکریپت انجام خواهیم داد!

  1. details
  2. summary

برچسب details

برچسب دوطرفه details در برگیرنده محتوای مخفی شده است.

برچسب summary

برچسب summary موجود در detail امکان نمایش عنوان عنصر مخفی شده را برعهده می گیرد.

مثال: برای اینکار ابتدا برچسب دوطرفه details، سپس عنوان عنصر برای نمایش یا مخفی کردن محتوا را در برچسب دوطرفه summary نوشته و در انتها محتوای مورد نظر خود را اضافه می کنیم.

<details> <summary> برای نمایش محتوا کلیک کنید. </summary> <p> معرفی برچسبهای details و summary در html </p> </details>

خروجی:

با کلیک بر روی عنوان، محتوای مخفی شده نمایش پیدا می کند.

ویژگی open در details

بصورت پیشفرض محتوای درون برچسب details مخفی است. برای تغییر وضعیت آن به نمایش محتوا می توان از ویژگی open در برچسب details بهره برد.

<details open> <summary> برای نمایش محتوا کلیک کنید. </summary> <p> معرفی برچسبهای details و summary در html </p> </details>

نکته: محتوای درون details صرفا متن نیست! بلکه میتوانید برچسبهای دیگر را نیز مورد استفاده قرار دهید. مانند فرم، تصویر و… حتی میتوانید از details های تودرتو نیز استفاده کنید.

 

آموزش طراحی وب – جلسه دهم – ویژگی شناوری

در ادامه مباحث آموزش طراحی تحت وب با جلسه دهم همراه شما عزیزان خواهیم بود. دو جلسه قبلی اختصاص یافت به آموزش CSS و ویژگی های آن. این جلسه نیز ادامه آن مباحث خواهد بود.

ویژگی شناوری چیست

float یا ویژگی شناوری خاصیتی در CSS است که مشخص می کند عنصر مورد نظر در کدام جهت (چپ یا راست) قرار بگیرد.

برای ساده سازی این تعریف به این مثال توجه کنید: فرض کنید برای طراحی دو ستون در یک صفحه نیاز دارید که هر کدام را در سمتی از صفحه قرار دهید. یکی در سمت چپ و دیگری در سمت راست. برای اینکه ستونهای مورد نظر در یکی از این جهت ها قرار بگیرد CSS ویژگی float را در دسترس طراح قرار داده تا با مقداردهی به آن جهت قرارگیری عنصر را تعیین کند.

float دارای مقادیری همچون:

  • none : عنصر مورد نظر شناوری ندارد.
  • left : عنصر در سمت چپ شناور است.
  • right : عنصر در سمت راست شناور است.
  • initial : شناوری پیشفرض.
  • inherit : دریافت شناوری از عنصر والد.

مثال:

برای اینکه ستون های تصویر زیر را در جهت مناسبی که برایش تعیین شده قرار دهیم باید به صورت زیر عمل کنیم:

در سند html به این صورت عمل می کنیم:

<html>
<body>
<div class="left-block"></div>
<div class="right-block"></div>
</body>
</html>

در سند CSS بصورت زیر عمل می کنیم:

.left-block{
	float:left;
	border: 2px solid red;
	width:200px;
	height:400px;
}
.right-block{
	float:right;
	border: 2px solid red;
	width:200px;
	height:400px;
}

در سند HTML چه خبر؟!

در سند html از دو برچسب div استفاده شد یکی برای ستون سمت راست و دیگری برای ستون سمت چپ. به هرکدام یک کلاس اختصاص دادیم تا بتوانیم از طریق ویزگی های CSS تغییرات را بر روی آنها اعمال کنیم.

برای ایجاد عناصر مورد نظر می توان از برچسب دوطرفه div استفاده کرد.

در سند CSS چه خبر؟!

در سند CSS چون از کلاس برای برچسب ها استفاده کردیم پس ابتدا یک نقطه قرار داده و سپس نام کلاس را نوشتیم. در ابتدای ویزگی ها مشخص کردیم که هریک از ستون در کدام سمت قرار بگیرد. برای همین از ویزگی شناوری با مقداردهی left و right استفاده کردیم. در خط دوم از ویژگی border برای قرار دادن یک مرز و تفکیک ستون ها از یکدیگر استفاده شد. که قطر آن برابر شد با ۲px و مقدار برابر با solid (در جلسات بعدی توضیح داده خواهد شد) قرار گرفت و در انتها رنگ border مشخص شد. همچنین برای هریک از ستون ها عرض و ارتفاع در نظر گرفته شد که با ویزگی های height و width مشخص هستند. بدین صورت توانستیم با یادگیری ویژگی شناوری عناصر خود را در سمت راست یا چپ ثابت کنیم.

آموزش طراحی وب – جلسه نهم

با جلسه نهم از سری آموزش های طراحی وب در خدمت شما دوستان عزیز هستیم. در جلسه قبلی انواع مختلف استایل نویسی و طریقه استفاده از آنها در داخل سند یا سند خارجی CSS را با یکدیگر مرور کردیم. حال با کمی ریز شدن در مسئله ادامه مباحث مربوط به CSS را پی میگیریم.

ID و CLASS در استایل نویسی

آیدی و کلاس دو ویژگی اصلی و کاربری در استایل نویسی می باشد که با قرار دادن آنها در برچسب های HTML می توان تغییرات ظاهری مختلفی را در آنها ایجاد کرد. یکی از مواردی که باید به آن توجه داشت این است که در سند خود مجاز به استفاده از تنها یک ID همنام و برای یک عنصر هستید. یعنی نمیتوان از یک ID برای چند برچسب استفاده کرد. اما CLASS این محدودیت را نداشته و با خیال راحت می توانید در چندین برچسب بنا به نیاز از آن استفاده کنید. یکی از ویژگی های ID استفاده از آن برای آدرس دهی می باشد که در جلسات بعدی به آن خواهم پرداخت.

تعریف ID و CLASS در برچسب

آیدی و کلاس همانطور که دارای املای منحصر به خود هستند، دارای مشخصه‌ی خاصی برای استفاده در سند CSS نیز می باشند. این مشخصه ها به ترتیب برای آیدی “#” و برای کلاس “.” می باشد. که در ادامه در مورد آنها توضیح خواهم داد.

برای اینکه بخواهید به یک برچسب با استفاده از css تغییرات دلخواه خود را اعمال کنید، ابتدا باید نحوه تعریف آیدی و کلاس را در برچسب ها بیاموزید. برای اینکار در برچسب مورد نظر (در برچسب دوطرف قسمت باز برچسب مد نظر است) با نوشتن حرف کلیدی ID یا CLASS سپس قرار دادن “=” و پس از آن قرار دادن دبل کوتیشن “” آیدی یا کلاس خود را تعریف کنید. اما برای شناسایی این برچسب و اعمال تغییرات به وسیله‌ی CSS باید نامی برای آن انتخاب کرد و آن را در دبل کوتیشنی که پس از مساوی قرار داده شده وارد کرد.

مانند:

<p class="name">
این یک پاراگراف است
</p>

همانطور که در کد بالا مشاهده می کنید. ما یک برچسب پاراگراف را ایجاد کردیم تا بتوانیم به وسیله‌ی css تغییرات خود را اعمال کنیم. چنین روشی را می توان برای تمام برچسب ها مورد استفاده قرار داد.

نکته: گاهی اوقات طراح برای صرفه جویی در وقت و همچنین کدنویسی تمیز و… به جای استفاده از روش کلاس‌دهی، از نام برچسب برای ایجاد تغییرات در CSS بهره می برد.

تا به اینجا شما توانستید چگونی تعریف آیدی یا کلاس را برای برچسب ها بیاموزید. اما برای اینکه بتوانید تغییرات دلخواه خود را با استفاده از CSS به برچسب خود اعمال کنید باید با روش تعریف آیدی و کلاس در سند style.css نیز آشنا شوید. (اگر با سند style.css آشنا نیستید به جلسه قبلی رجوع کنید)

تعریف ID و CLASS در سند CSS

تعریف آیدی یا کلاس در سند CSS دارای چند نکته کلیدی است که با یادگیری آن دیگر مشکلی برای استایل نویسی حرفه‌ای نیز نخواهید داشت!

 

یک آیدی یا کلاس شامل سه قسمت:

  1. انتخابگر
  2. ویژگی
  3. مقدار

می باشد.

انتخابگر

مورد اول: همانطور که گفته شد مشخصه آیدی “#” و مشخصه کلاس “.” می باشد. این مشخصه ها در اینجا کاربرد خواهند داشت.

مورد دوم: هر آیدی یا کلاس دارای نام می باشند که در هنگام تعریف در یک برچسب به آن تعلق می گیرد.

اکنون شما قسمت اول یعنی انتخابگر را درک کردید. پس برای اینکه یک آیدی یا کلاس در سند CSS تعریف شود، ابتدا “#” یا “.” قرار می گیرد سپس نامی که برای آنها در نظر گرفته اید. حال باید از کروشه باز و بسته استفاده کنید “{ }” تمام ویژگی های مربوط به یک آیدی یا کلاس درون این کروشه ها قرار می گیرند و زمانی که خارج از آنها باشد بلااستفاده و باعث ایجاد مشکلات می شود.

ویژگی و مقدار

Property یا ویژگی دارای مقدار منحصر به خود می باشند. با بکار بردن آنها در یک آیدی یا کلاس میتوان تغییراتی در برچسب های مورد نظر اعمال کرد. در تصویر بالا ما یک ویژگی با نام color داریم که مقداری برابر با green دارد. کاری که ویژگی color انجام می دهد تغییر رنگ است. برای مثال اگر برچسب پاراگراف دارای چنین ویژگی باشد، متون موجود در آن به رنگ سبز خواهند بود.

دو نکته در نوشتن ویژگی ها وجود دارد و آن استفاده از نقطه نقل و قول:” پس از نام ویژگی و نقطه ویرگول;” در انتهای دستور می باشد. همیشه باید پس از نوشتن نام ویژگی نقطه نقل و قول قرار گیرد. سپس مقدار نوشته می شود. اما قرارگیری نقطه ویرگول در انتها وابسته به دو نکته بوده، آن هم وجود بیش از یک ویزگی در یک آیدی یا کلاس. یعنی اگر تنها یک ویژگی در آیدیی یا کلاس نوشته شده باشد قرار دادن نقطه ویرگول در انتهای دستور الزامی نیست. اما اگر بیش از یک ویزگی داشته باشیم الزامی می باشد.

آموزش طراحی وب – جلسه هشتم – CSS

با جلسه هشتم از سری آموزش های طراحی تحت وب در خدمت شما دوستان هستیم. در این جلسه با بُعد دیگری از طراحی تحت وب آشنا می شوید که برای ایجاد قابلیت های مختلف از جمله زیباسازی استفاده می شود.

CSS چیست

Cascading Style Sheet یا CSS زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در html مورد استفاده قرار می گیرد.

حال برای اینکه بدانیم چگونه می توان از CSS برای زیباسازی سند خود استفاده کرد ابتدا باید با چگونگی فراخوانی آن در سند html آشنا شد. فراخوانی css به ۳ صورت انجام می پذیرد:

  1. سبک در خط (inline)
  2. سبک داخلی CSS
  3. سبک خارجی CSS

سبک در خط (Inline style)

ساده ترین راه برای استفاده از CSS قرار دادن آنها بصورت مستقیم در درون برچسب هاست. برای همین از این راه به عنوان درخط  یا  Inline یاد می شود. زیرا می توان تمام ویژگی های CSS را در درون خطوط HTML و برچسب ها مورد استفاده قرار داد. ساختار نوشتاری CSS در خط بصورت زیر است:

<p style="محل قرارگیری ویزگی های css">این یک پاراگراف است</p>

همانطور که در قطعه کد بالا مشاهده می کنید ما از یک برچسب p برای ایجاد پاراگراف استفاده کردیم. حال برای اینکه یک سری از ویژگی ها را با استفاده از CSS به آن اضافه کنیم، پس از نوشتن قسمت ابتدایی برچسب و ایجاد یک فاصله، از کلمه کلیدی style استفاده کردیم. این کلمه به این معنی است که ویزگی های مربوط به CSS در درون آن نوشته شده و مرورگر ملزم به اجرای آن در برچسب مورد نظر خواهد بود.

سبک داخلی  (Internal style sheet)

این راهکار حرفه ای تر از راهکار قبلی یعنی استفاده از CSS درخط می باشد. در این راه برای استفاده از ویژگی های CSS کافیست برچسب style درون برچسب head قرار گیرد تا بتوان از ویژگی های آن در سند HTML بهره برد.

<html>
<head>
<style>
محل قرار گیری ویژگی های css
</style>
</head>
<body>
</body>
</html>

تمام ویژگی های CSS با قرار گیری در برچسب style در مرورگر اجرا خواهد شد.

سبک خارجی (External style sheet)

این راهکار نسبت به راه هایی که توضیحات آن گذشت حرفه‌ای‌تر بوده و بیشتر مورد استفاده قرار می گیرد. شما نیز برای اینکه بصورت حرفه ای بتوانید کدنویسی کنید از این راه برای ایجاد ویزگی های CSS استفاده کنید.

برچسب یکطرفه link

یکی از موارد استفاده از این برچسب فراخوانی فایل CSS‌خارجی می باشد. برای اینکه بتوان یک فایل CSS را در سند HTML فراخوانی کرد به صورت زیر عمل می کنیم.

<html>
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>
</html>
  • rel : این کلمه مخفف relationship می باشد. از آن برای مشخص کردن ارتباط بین سند فعلی و سند لینک شده استفاده می شود.
  • type : مشخص کننده نوع فایل لینک شده می باشد.
  • href : نشانی فایل لینک شده را مشخص می کند.

ساخت سند CSS

برای این کار (در نرم افزار Notepad++) از قسمت نوار ابزار بر روی گزینه new کلیک کرده تا یک صفحه جدید گشوده شود.

سپس بدون آنکه محتوایی در آن قرار دهید از منو گزینه File و بعد بر روی Save As کلیک و در پنجره باز شده مکان ذخیره سازی سند خود را انتخاب کنید. (در اینجا من نام project را انتخاب می کنم که ار قبل ساخته بودیم) و فایل را در پوشه ذخیره کنید. نکته ای که باید به آن در زمان ذخیره سازی توجه کنید پسوند سند CSS شما می باشد. برای این کار پس از انتخاب نام برای سند خود (در اینجا من نام style را انتخاب می کنم) با قرار دادن یک نقطه “.” پس از نام، style را تایپ کرده و بر روی Save کلیک کرده تا ذخیره شود.

پس از ساخت سند، آماده می شویم برای یادگیری چگونگی کار با ویژگی های CSS که در جلسه بعدی شرح داده خواهد شد.

آموزش طراحی وب – جلسه هفتم – جدول

با جلسه هفتم از آموزش طراحی وب با موضوع جدول در خدمت شما دوستان هستیم. اگر این اولین بار است که این آموزش را مطالعه می کنید بهتر است جلسات قبل را نیز مرور کنید.

برچسب دوطرفه table

جدول در html موارد استفاده فراوانی دارد که می توان بنا به نیاز آن را شخصی سازی کرد. برای مثال میتوان از جدول ها برای ایجاد لیست حضور و غیاب یا لیست خرید وغیره استفاده کرد. البته ویژگی و استفاده جدول در همینجا خلاصه نشده و می توان در کارهای مختلف از آن استفاده کرد. table یک برچسب دوطرفه است که برچسب های زیرمجموعه جدول را در بر می گیرد.

بصورت زیر نوشته می شود:

<table></table>

نکته: هر جدول از یک یا چند سطر (row) و سلول (cell) تشکیل شده است.

برچسب دوطرفه th

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

بصورت زیر نوشته می شود:

<table>
<th>عنوان</th>
</table>

برچسب دو طرفه tr

وقت آن رسیده تا سطرهای یک جدول را ایجاد کنید! این برچسب این امکان را فراهم می کند تا با قرار دادن هریک از آنها در جدول یک سطر اضافه شود.

بصورت زیر نوشته می شود:

<table>
<tr>ایجاد یک سطر</tr>
</table>

برچسب دوطرفه td

کار این برچسب ایجاد سلول است. هریک از سلولها محتوایی را در میان میگیرد. برای مثال شما در یک سطر می توانید به تعداد مورد نیازتان از سلولها بهره ببرید.

بصورت زیر نوشته می شود:

<table>
<td>ایجاد یک سلول</td>
</table>

تا به اینجا جدول ما به صورت زیر در آمده است:

<table>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

اما اگر این جدول را در خروجی مشاهده کنید می بینید که ساختار یک جدول پیاده شده اما هیچ مرزی سطرها و سلول ها را از یکدیگر جدا نمی کند.

حال در اینجا باید از یک ویژگی به نام border استفاده شود تا مرزبندی برچسب ها از یکدیگر مشخص شود. این کار خوانایی یک جدول را بیشتر خواهد کرد. هرچه مقدار پس از مساوی که روبروی border قرار می گیرد بیشتر باشد قطر مرز میان سلولها نیز بیشتر خواهد شد. البته برای ایجاد این ویژگی ها می توان از CSS نیز استفاده کرد.

<table border=1>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

خروجی:

برچسب دوطرفه thead

تا به اینجا شما با برچسب هایی از جدول آشنا شدید که می توانند یک جدول را با سطرها و ستون های متعدد ایجاد کنند. اما اگر تعدا این سطرها، ستون ها و سلول ها زیاد باشد آیا می توان آنها را به صورت گروهی مدیریت کرد؟ پاسخ بله است.

اولین برچسب گروهی thead بوده که مربوط به عناوین می باشد. به وسیله این برچسب میتوان مدیریت بهتری بر روی برچسب های th داشت. برای مثال می توان با نوشتن یک ویژگی CSS آن را برای تمام برچسب های th اعمال کرد.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب دوطرفه tbody

کارکرد این برچسب نیز مانند thead است با این تفاوت که از tbody برای اثرگذاری بر روی بدنه و محتوای داخلی یک جدول استفاده می شود.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
</table>

برچسب دوطرفه tfoot

توضیح این برچسب نیز مانند دو برچسب قبلی بوده با این تفاوت که ردیف یا سطر انتهایی جدول را تحت تاثیر قرار می دهد.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
<tfoot>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tfoot>
</table>

نکته: برچسب های گروهی thead, tbody و tfoot زمانی قابلیت تاثیرگذاری دارند که از ویژگی ها CSS استفاده شود وگرنه هیچ تاثیری نخواهند داشت.

برچسب دوطرفه caption

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

<table border=1>
<caption>شرح جدول</caption>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب table دارای ویژگی های مختلفی است که باعث ایجاد قابلیت هایی از جمله تغییر رنگ، اندازه و… در آن می شود البته این ویژگی ها در نسخه‌ی HTML5 پشتیبانی نمی شود. آن هم به این علت که این ویزگی ها می تواند با استفاده از CSS در جدول اعمال شود. برای همین سعی می کنم تا در جلسات مربوط به CSS درباره آنها توضیح دهم.

آموزش طراحی وب – جلسه ششم – فرم قسمت ۲

در جلسه ششم از سری آموزش های طراحی وب با قسمت دوم از فرم ها در خدمت شما دوستان عزیز خواهیم بود. لطفا اگر جلسات پیش را مطالعه نکرده اید حتما اینکار را انجام دهید.

در جلسه قبل با برچسب form و برخی از انواع برچسب input آشنا شدید. در این جلسه برای تکمیل آموزش قبل سعی شده تا با برخی دیگر از برچسب ها که در روند طراحی یک فرم بکار شما خواهند آمد آشنا شوید.

برچسب دوطرفه select

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

بصورت زیر نوشته می شود:

<select></select>

نکته: برچسب select به تنهایی کارایی ندارد بلکه باید همراه با برچسب زیر مجموعه خود استفاده شود.

برچسب دوطرفه option

option برچسب زیرمجموعه select می باشد. برای اینکه گزینه های مورد نظر خودمان را ایجاد کنیم از آن استفاده می کنیم.

بصورت زیر نوشته می شود:

<option>قرار گیری محتوا</option>

حال برای اینکه موارد متعددی را به برچسب انتخاب خود اضافه کنیم کافیست بصورت زیر عمل کرده و نتیجه را در خروجی مشاهده کنید. ما میخواهیم ۳ مورد در فیلد کشویی به نمایش در بیاید.

مثال:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option>گزینه سوم</option>
</select>

خروجی در مرورگر:
html-select

برای اینکه بخواهیم میان چندین مورد از option ها یکی به صورت پیشفرض انتخاب شده باشد، کافیست از ویژگی selected در برچسب option موردنظر استفاده کنیم.

بصورت زیر نوشته می شود:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option selected>گزینه سوم</option>
</select>

خروجی در مرورگر:

html-selected

برچسب دوطرفه textarea

در فرم های تماس حتما دیده اید که قسمتی برای درج متن وجود داشته و با دیگر ورودی ها متفاوت است. برای ایجاد چنین قسمتی از برچسب textarea استفاده می شود.

بصورت زیر نوشته می شود:

<textarea></textarea>

خروجی در مرورگر:

html-textarea

برچسب ناحیه متنی نیز مانند دیگر برچسب ها از ویژگی های متعددی برخوردار است که برخی از آنها را شرح می دهم.

ویژگی cols و rows

برای اینکه بتوانیم بر روی اندازه ناحیه متنی مدیریت بهتری داشته باشیم می توانیم از دو ویژگی برای تغییر سطر و ستون استفاده کنیم. این دو ویژگی با نام های cols و rows در دسترس بوده و با قرار دادن آنها در برچسب textarea این امکان برای تغییر اندازه فراهم خواهد شد.

بصورت زیر نوشته می شود:

<textarea cols="50" rows="20"></textarea>

rows مشخص کننده تعداد سطرها و cols مشخص کننده تعداد ستون هاست.

ویژگی maxlength

اگر بخواهیم بر روی تعداد کاراکتری که درون ناحیه متنی نوشته می شود هم مدیریت کنیم، ویژگی به نام maxlength وجود دارد که می توان با استفاده از آن بر روی ناحیه متنی محدودیت اعمال کرد تا کاربر تنها بتواند به اندازه محدودیتی که در نظر گرفته اید متن خود را نوشته و ارسال کند.

بصورت زیر نوشته می شود:

<textarea maxlength="50"></textarea>

تعداد این ویژگی ها به مراتب بیشتر از مواردی است که در این دو جلسه در فرم ها گذشت. اما با این حال شما برای یادگیری کافیست پس از موارد شاخص و مهم که در این سری از آموزش ها به آنها پرداخته شد، با یادگیری جزییات به اطلاعات خود در این زمینه اضافه کنید.

آموزش طراحی وب – جلسه پنجم – فرم

در ادامه آموزش طراحی وب با جلسه پنجم در خدمت شما دوستان خواهیم بود. قبل از هر چیز لطفا جلسات قبلی را مطالعه فرمایید.

یکی از پرکاربردترین و برجسته ترین عناصر html فرم ها می باشند. بدون شک در هر وبسایتی حداقل یکی از ویژگی های فرم استفاده شده است. برای مثال فرم نظرسنجی، فرم تماس، ارسال نظر، ثبت نام و…این تگ با استفاده از ویژگی هایی که در خود دارد، مانند فیلدها، دکمه‌ها و… برای ایجاد تعامل با کاربر مورد استفاده قرار می گیرد. این امر زمانی بیش از پیش مورد توجه قرار می گیرد که در برنامه نویسی این برچسب یکی از پراستفاده ترین برچسب ها برای آموزش و ثبت اطلاعات می باشد.

فرم (Form)

فرم یک برچسب دوطرفه است که بصورت زیر نوشته می شود:

<form></form>

برچسب یکطرفه input

اصلی ترین برچسب درونی یک فرم، input‌ می باشد. که با در اختیار گذاشتن الگوهای مختلف می تواند یک فرم کامل را ایجاد نماید.

<input>

برچسب input به تنهایی کاری از پیش نمی برد اما با مشخص کردن یک الگو برای آن، در خروجی شاهد ساختارهای مختلفی خواهیم بود. اما این الگو چگونه باید به input داده شود؟

با قرار دادن ویژگی type و دادن مقدار مناسب به آن می توان از این الگو ها استفاده کرد.

بصورت زیر نوشته می شود:

<input type="مقدار">

مقادیری که باید در type قرار گیرد از پیش تعیین شده و شما برحسب نیاز می توانید از یکی از آنها استفاده نمایید. در ادامه به تعدادی از آنها اشاره خواهم کرد.

ورودی متنی در فرم

برای ایجاد یک فیلد یا همان ورودی متن باید بصورت زیر عمل کرده و مقدار درون type را با text پر کنید.

<input type="text">

خروجی در مرورگر:

html-form-text

همچنین برای دیگر موارد نیز با تغییر مقدار در ویژگی type می توان متناسب با آن در خروجی الگو مورد نظر خود را پیاده کرد.

دکمه در فرم

برای ایجاد یک دکمه باید بصورت زیر عمل کرده و مقدار درون type را با button پر کنید. همچنین برای این دکمه باید یک نام نیز قرار داد تا در خروجی نمایش داده شود. برای این کار با قرار دادن ویژگی value و دادن مقدار(نام مورد نظر برای دکمه) به آن، دکمه در خروجی حاوی یک نام خواهد بود.

<input type="button" value="نام دکمه">

خروجی در مرورگر:

html-form-button

ورودی گذرواژه در فرم

برای ایجاد یک فیلد یا ورودی گذرواژه (پسورد) با تغییر مقدار در ویژگی type به password می توان این ورودی را ایجاد نمود. تفاوت این ورودی با ورودی متن در نوع نمایش کاراکترهای درونی آنها می باشد. در تصویر خروجی خواهید دید که مقادیری که در ورودی پسورد قرار می گیرد به صورت دایره ای نشان داده می شود.

<input type="password" >

خروجی در مرورگر:

html-form-pass

ورودی ایمیل در فرم

برای ایجاد یک فیلد یا ورودی ایمیل با تغییر مقدار در ویژگی type به email می توان این ورودی را ایجاد نمود.

<input type="email">

نکته: تفاوت ورودی متن با ورودی ایمیل این است زمانیکه در ورودی ایمیل ساختار یک ایمیل مورد تایید نباشد در مرورگر ایجاد اخطار می کند.

خروجی در مرورگر:

html-form-email

دکمه ارسال در فرم

برای ایجاد یک دکمه ارسال باید بصورت زیر عمل کرده و مقدار درون type را با submit پر کنید. در اینجا نیز با قرار دادن ویژگی value می توان برای دکمه ارسال نیز نام تعیین کنید.

<input type="submit" value="دکمه ارسال" >

خروجی در مرورگر:

html-form-submit

چک‌باکس در فرم

برای ایجاد یک چک‌باکس باید بصورت زیر عمل کرده و مقدار درون type را با checkbox پر کنید. چک‌باکس‌ها بیشتر برای انتخاب چند مورد در یک فرم مورد استفاده قرار می گیرند.

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

خروجی در مرورگر:

html-form-checkbox

نکته: برای اینکه بخواهید بصورت پیشفرض چک‌باکس شما تیک خورده باشد، کافیست ویژگی checked را به برچسب خود اضافه کنید.

بصورت زیر:

<input type="checkbox" checked>

دکمه رادیو در فرم

برای قرار دادن دکمه رادیویی (که بصورت گرد است) باید بصورت زیر عمل کرده و مقدار درون type را با radio پر کنید. بر خلاف checkbox دکمه رادیویی برای انتخاب یک گزینه از میان چند گزینه مورد استفاده قرار می گیرد.

<input type="radio">
<input type="radio">
<input type="radio">

خروجی در مرورگر:

html-form-radio

نکته: از ویژگی checked در دکمه رادیویی نیز می توان استفاده کرد.

دکمه انتخاب فایل در فرم

برای اینکه بتوان فایلی را از رایانه خود انتخاب کنیم؛ برچسب فرم باز هم به کمک خواهد آمد. تنها کافیست مقدار درون type را با file پر کنید.

<input type="file">

خروجی در مرورگر:

html-form-file

تا به اینجا شما با برچسب فرم و همچنین ساختارهای مختلف برچسب input آشنا شدید. اما ویژگی های فرم به همین جا ختم نشده و موارد متعددی وجود دارد که به مرور زمان می توانید از آنها نیز استفاده کنید.

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