فرم های html

---

فرم های HTML به منظور انتخاب انواع مختلف ورودی های کاربر استفاده می شوند

---

خودتان امتحان کنید-مثال ها

ایجاد فیلدهای متنی

این مثال طریق ساخت یک فیلد متنی را نشان می دهد. کاربر می تواند اطلاعات خود را

در این فیلد بنویسد.

ایجاد فیلد رمزعبور

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

ورودی ، از فیلد رمز عبور استفاده می کنیم ، این مثال روش ساخت این فیلد را نشان

می دهد

(مثالهای بیشتر، در انتهای این صفحه آمده است)

---

فرم های HTML

یک فرم ، منطقه ای حاوی عناصر فرم است عناصر فرم ، عناصری هستند که به کاربر

اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area

، دکمه های رادیویی ، چک باکس ها و...) در فرم وارد کند

یک فرم با برچسب <form> معرفی می شود.

<form>

.

input elements

.

<form/>

---

فرم های HTML - عنصر Input

در برچسب <form> برچسب <input>بیشترین استفاده را دارد.نوع ورودی با خواص آن

تعیین می شود ، انواع پر کاربرد ورودی ها در پایین توضیح داده شده اند

---

فیلدهای متنی

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

تایپ کند.

<form>

</"First name: <input type="text" name="firstname

</br>

</"Last name: <input type="text" name="lastname

<form/>

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود

First name:

Last name:

توجه کنید که خود فرم قابل رویت نیست ، همچنین توجه داشته باشید که در بیشتر

مرورگرها طول فیلد متنی بطور پیش فرض 20 کاراکتر است

---

فیلد رمز عبور

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

ورودی ، از فیلد رمز عبور استفاده می کنیم. این مثال روش ساخت این فیلد را نشان

می دهد

<form> </"Password: <input type="password" name="pwd> <form/>

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود:

Password:

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

کاراکترها ، ستاره یا دایره نمایش می دهد

---

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

دکمه های رادیویی زمانی استفاده می شوند که شما می خواهید از بین تعداد محدودی

انتخاب، یکی را انتخاب کند.توجه کنید که فقط یک گزینه می تواند انتخاب شود

<form>

</input type="radio" name="sex" value="male" /> Male<br >

input type="radio" name="sex" value="female" /> Female>

<form/>

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود:

     Male

  Female

---

چک باکس ها (check boxes)

چک باکس ها زمانی استفاده می شوند که شما بخواهید کاربر از میان تعداد محدودی

انتخاب ، یک یا چند گزینه را انتخاب کند

<form>

</input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br>

input type="checkbox" name="vehicle" value="Car" /> I have a car>

<form/>

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود:

I have a bike

  I have a car

---

دکمه Submit

هنگامی که کاربر روی دکمه "Submit" کلیک می کند ، محتویات فرم به یک فایل دیگر

فرستاده می شوند. فایل معرفی شده در عنصر Action معمولا کاری را با اطلاعات

ورودی دریافتی انجام می دهد.

<"form name="input" action="html_form_action.asp" method="get>

</"Username: <input type="text" name="user

</"input type="submit" value="Submit>

<form/>

کد HTML فوق در مرورگر به صورت زیر نمایش داده می شود:

Username:

اگر شما تعدادی کاراکتر در فیلد متنی بالا تایپ کنید و دکمه "Submit" را کلیک کنید شما

ورودی خود را به صفحه ای که "action1.asp" نام دارد خواهید فرستاد ، آن صفحه به

شما ورودی های دریافتی را نشان خواهد داد

---

مثالهای بیشتر

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

چگونگی ایجاد دکمه های رادیویی

چک باکس ها

چگونگی ایجاد چکس باکس ها ، کاربر می تواند موارد مورد نظر خود را انتخاب کند

فهرست کشویی ساده

چگونگی ایجاد یک فهرست کشویی ساده

فهرست کشویی ساده با یک مقدار از پیش تعیین شده

چگونگی ایجاد یک فهرست کشویی ساده با یک مقدار از پیش تعیین شده

ناحیه متنی

تفاوت این فیلد با فیلد متنی این است که در این فیلد ، خطهای نا محدودی می توان وارد

کرد

ایجاد دکمه

چگونگی ایجاد دکمه

---

مثالهای فرم

مجموعه فیلد

چگونگی ایجاد یک حاشیه اطراف عناصر در یک فرم

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

چگونگی ایجاد فرم با دو فیلد متنی و دکمه submit

فرم به همراه چک باکس ها

چگونگی ایجاد یک فرم به همراه سه چک باکس و یک دکمه submit

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

چگونگی ایجاد یک فرم به همراه دو دکمه رادیو و یک دکمه submit

ارسال نامه الکترونیکی به کمک فرم

در این مثال روش ارسال email به کمک فرم، نشان داده شده است. به موجودیت

action فرم توجه کنید

---

برچسب های فرم

برچسب	توضیحات
<form>	یک فرم برای ورودی کاربران معرفی می کند
<input>	فیلد ورودی معرفی می کند
<textarea>	یک ورودی متن چند خطی  معرفی می کند
<label>	یک برچسب برای ورودی ها معرفی می کند
<fieldset>	یک مجموعه از فیلدها معرفی می کند
<legend>	یک عنوان برای fieldset معرفی می کند
<select>	یک لیست قابل انتخاب معرفی می کند
<optgroup>	یک گروه از گزینه ها معرفی می کند
<option>	یک گزینه در لیست باز شونده معرفی می کند
<button>	یک دکمه را معرفی می کند

طرح بندی html

---

طراحی وبسایت برای این که وبسایت شما خوب به نظر بیاید خیلی مهم است

طرح بندی وبسایت خود را با دقت بسیار طراحی کنید

---

مثال ها - خودتان امتحان کنید

طراحی وبسایت با استفاده از عنصر <div>

چگونگی طرح بندی با عنصر <div> را نشان می دهد

طراحی وبسایت با استفاده از عنصر <div>

چگونگی طرح بندی با عنصر <table> را نشان می دهد

---

طراحی وب سایت

بسیاری از وبسایت ها محتوای خودشان را در ستون های چندگانه قرار می دهند (مثل

روزنامه ها و مجله ها)

ستون های چند گانه با استفاده از عناصر <div> و <table> استفاده می شوند ، از

CSS برای موقعیت دادن به عناصر ، یا ایجاد پس زمینه یا رنگارنگ به نظر رسیدن صفحه

استفاده می شود

نکته : برای ایجاد یک طراحی خوب با جدول های HTML این کار ممکن است اما

جدول های HTML برای  نمایش داده جدولی طراحی شده اند نه به عنوان یک نوع طرح

بندی صفحات

---

استفاده از عنصر <div>

عنصر <div> یک عنصر سطح بلاکی است و برای گروه بندی عناصر HTML مورد

استفاده قرار می گیرد

مثال زیر از پنج عنصر div برای ایجاد طرح بندی ستون چندگانه استفاده می کند همانند

مثال قبل نتیجه یکسانی ایجاد می شود

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;

text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

خودتان امتحان کنید

Main Title of Web Page

Menu

HTML

CSS

JavaScript

Content goes here

Copyright © W3Schools.com

---

طراحی با استفاده از جدول

یک راه ساده برای ایجاد طراح بندی صفحه استفاده از تگ <table> است

از CSS برای موقعیت دادن به عناصر ، یا ایجاد پس زمینه یا رنگارنگ به نظر رسیدن

صفحه استفاده می شود

نکته : برای ایجاد یک طراحی خوب با جدول های HTML این کار ممکن است اما

جدول های HTML برای  نمایش داده جدولی طراحی شده اند نه به عنوان یک نوع طرح

بندی صفحات

مثال زیر از یک جدول با 3 سطر و 2 ستون استفاده می کند اولین و آخرین سطر جفت

ستون ها را با استفاده از خصیصه colspan پوشش داده است

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

خودتان امتحان کنید

Main Title of Web Page
Content goes here	Menu HTML CSS JavaScript
Copyright © W3Schools.com

---

نکته های مفید

نکته : بزرگترین مزیت استفاده از CSS این است که اگر شما کدهای خودتان را در یک

برگه سبک خارجی قرار دهید سایت شما برای نگه داری بسیار آسان می شود

شما می توانید طرح بندی تمام صفحاتتان را تنها با ویرایش یک فایل تغییر دهید

برای فراگیری بیشتر در رابطه با CSS ، آموزش CSS ما را مطالعه کنید

---

تگ های طرح بندی HTML

Description	Tag
بخشی را در یک سند معرفی می کند	<div>
بخشی را در یک سند معرفی می کند	<span>

بلاک های html

---

عناصر HTML می توانند با تگ های <div> و <span> گروه بندی شوند

---

عناصر بلاکی HTML

بیشتر عناصر HTML به عنوان عناصر سطح بلاکی یا عناصر درون خطی تعریف می شوند

عناصر سطح بلاکی به طور معمول وقتی در مرورگر نمایش می یابند با یک خط جدید

شروع می شوند ( یا پایان می یابند )

مثال : <h1> ، <p> ، <table> ، <ul>

---

عناصر درون خطی HTML

عناصر درون خطی به طور معمول بدون شروع یک خط جدید نمایش می یابند

مثال : <b> ، <td> ، <a> ، <img>

---

عنصر <div>

عنصر <div> یک عنصر سطح بلاکیست که می تواند به عنوان یک ظرف (container)

برای گروه دیگری از عناصر HTML استفاده شود

عنصر <div> معنی خاصی ندارد یک عنصر سطح بلاکی است مرورگر قبل و بعد آن یک

خط جدید ایجاد می کند

اگر آن را با CSS به کار ببرید عنصر <div> می تواند مشخصه style را برای بلاک بزرگی

از محتوا مشخص کند ( یعنی با مشخصه style می توان سبک های مختلفی را به

محتوای عنصر <div>  اعمال نمود)

یک راه معمول برای طراحی سند استفاده از عنصر  <div> است ، جایگزین راه قدیمی

تعریف طراحی با استفاده از جدول هاست ، استفاده از جدول ها برای طراحی صفحه با

استفاده از تگ <table> درست نبود ؛ هدف عنصر <table> نمایش داده های جدولی

بود

---

عنصر <span>

عنصر <span> یک عنصر درون خطیست که می تواند به عنوان یک ظرف برای متن

استفاده شود

عنصر <span> معنای خاصی ندارد

هنگامی که آن را همراه CSS استفاده می کنید ؛ عنصر <span> می تواند برای

مشخص کردن مشخصه style برای بخشی از متن مورد استفاده قرار گیرد

---

تگ های گروه بندی HTML

Description	Tag
بخشی را در یک سند معرفی می کند	<div>
بخشی را در یک سند معرفی می کند	<span>

لیست های html

---

HTML از لیست های مرتب ، نامرتب و تعریفی پشتیبانی می کند

---

HTML Lists

یک لیست با ترتیب

1. The first list item                                       
2. The second list item
3. The third list item

   یک لیست بدون ترتیب

• List item
• List item
• List item

---

  مثال ها

چگونگی ایجاد یک لیست بدون ترتیب در سند HTML                            لیست بدون ترتیب

چگونگی ایجاد یک لیست با ترتیب در سند HTML                                   لیست با ترتیب

(شما مثال های بیشتری را در پایین این صفحه می توانید پیدا کنید)

---

لیست های بدون ترتیب HTML

یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشان گذاری می

شوند (معمولا یک دایره سیاه کوچک).یک لیست نامرتب با یک برچسب <ul> آغاز می

شوند.هر کدام از اقلام لیست با برچسب <li> آغاز می شوند.

<ul> <li> Cofee </li> <li> Milk </li> </ul>

Cofee Milk

داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست

های دیگر و ... قرار دهید.

---

لیست های با ترتیب

یک لیست مرتب شده نیز لیستی از اقلام است. اقلام لیست بوسیله شماره نشان

گذاری می شوند.یک لیست مرتب با برچسب <ol> آغاز می شود.هرکدام از اقلام

لیست با برچسب <li> آغاز می شوند.

<ol> <li> Cofee </li> <li> Milk </li> </ol>

Cofee Milk

داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست

های دیگر و ... قرار دهید

---

لیست های تعریفی

یک لیست تعریفی ، لیستی از اقلام نیست. این لیست ، لیستی از عبارات و توضیحات آن

عبارات است.یک لیست تعریفی با برچسب<dl> آغاز می شود.هر کدام از اقلام لیست

تعریفی با برچسب <dt> آغاز می شود.هر تعریف در لیست تعریفی با برچسب <dd>

آغاز می شود

<dl> <dt> Cofee </dt> <dd> Black hot drink </dd> <dt> Milk </dt> <dd> White cold drink </dd> </dl>

Cofee Black hot drink Milk White cold drink

داخل تعاریف یک لیست تعریفی (برچسب <dd>)شما می توانید پاراگراف ها، پرش به

خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و ... قرار دهید

---

نکات پایه ای - اطلاعات مفید

نکته: داخل اقلام لیست شما می توانید متن ، پرش به خط بعد ، تصاویر ، پیوندها ،

لیست های دیگر و ... قرار دهید

---

مثال های بیشتر

این مثال صورت های متفاوت لیست های با ترتیب را نشان می دهد

انواع گوناگون لیست های با ترتیب

این مثال صورت های متفاوت لیست های بدون ترتیب را نشان می دهد

انواع گوناگون لیست های بدون ترتیب

این مثال چگونگی ساخت لیست های تو در تو را نشان می دهد

لیست های تو در تو

این مثال نیز گونه های دیگری از لیست های تو در تو نشان می دهد

لیست های تو در تو 2

این مثال یک لیست تعریفی را نشان می دهد

لیست تعریفی

---

برچسب های لیست HTML

برچسب	توضیحات
<ol>	یک لیست با ترتیب را تعریف می کند
<ul>	یک لیست بدون ترتیب را تعریف می کند
<li>	اقلام لیست را تعریف می کند
<dl>	یک لیست تعریفی را مشخص می کند
<dt>	اقلام لیست تعریفی را مشخص می کند
<dd>	هر تعریف در لیست تعریفی را مشخص می کند

جدول های html

---

مثال ها

چگونگی ایجاد جداول در یک سند HTML                                                   جدول ها

چگونگی مشخص کردن حاشیه های مختلف جدول                          حاشیه های جدول

( شما مثال های بیشتری را در پایین این صفحه می توانید پیدا کنید)

---

جدول های HTML

جدول ها بوسیله برچسب <table> تعریف می شوند هر جدول به سطرها

(بوسیله برچسب <tr>) و هر سطر به سلول های داده تقسیم می شود

(بوسیله برچسب <td>) ، حروف td بیانگر داده جدولی (table data) هستند که حاوی

سلول داده است یک سلول داده می تواند حاوی متن ، عکس ، لیست ها ، پاراگراف ها ،

فرم ها ، خط های افقی و جدول ها و... باشد

row1,cel1 row1,cel2 row2,cel1 row2,cel2

<table border="1"> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> <tr> <td>row1,cel1</td> <td>row1,cel1</td> </tr> </table>

---

جدول های HTML و صفت حاشیه(Border)

اگر شما عنصر حاشیه را معین نکنید ، جدول بدون حاشیه نشان داده خواهد شد. گاهی

اوقات این می تواند مفید باشد اما بیشتر مواقع شما می خواهید که حاشیه ها نشان

داده شوند.برای نشان دادن جداول با حاشیه شما باید از عنصر حاشیه (border)

استفاده کنید.

row1,cel1 row1,cel2 row2,cel1 row2,cel2

<table border="1"> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> <tr> <td>row1,cel1</td> <td>row1,cel1</td> </tr> </table>

---

سرتیترها در جدول ها

سرتیترها در یک جدول با برچسب <th>مشخص می شوند.

Another Heading Heading row1,cel2 row1,cel1

<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row1,cel1</td> <td>row1,cel2</td> </tr> </table>

---

سلول های خالی در جدول ها

سلول های جداول با محتوای خالی در بیشتر مرورگرها خوب نشان داده نمی شوند.

row1,cel2 row1,cel1 row2,cel1

<table border="1"> <tr> <td>row1,cell1</th> <td>row1,cell2</th> </tr> <tr> <td>row2,cel1</td> <td></td> </tr> </table>

این کدها در مرورگر بدین صورت نشان داده می شوند.توجه کنید که حاشیه های اطراف

سلول خالی جدول از بین رفته است

(موزیلا فایر فاکس(Fire Fox) حاشیه را نشان می دهد) برای جلوگیری از آن یک فاصله نا

مقطوع (;nbsp&) به سلول داده خالی اضافه کنید تا حاشیه را مشخص سازید.

row1,cel2 row1,cel1   row2,cel1

<table border="1"> <tr> <td>row1,cell1</th> <td>row1,cell2</th> </tr> <tr> <td>row2,cel1</td> <td> &nbsp; </td> </tr> </table>

---

مثال های بیشتر

چگونگی ایجاد جدول های بدون جاشیه                               

چگونگی ایجاد سرتیترهای جدول                                     

چگونگی اضافه کردن عنوان به جدول                               

توسعه سلول جدول به بیش از یک سطر یا ستون

چگونگی نمایش عناصر داخل عناصر دیگر

روش قرار دادن حاشیه خالی بین محتوای سلول و حاشیه آن

چگونگی ایجاد فاصله بین سلول ها

نحوه استفاده از صفت قالب برای کنترل حاشیه های اطراف جدول

---

برچسب های جدول HTML

برچسب	توضیحات
<table>	یک جدول معرفی می کند
<th>	سرتیتر جدول معرفی می کند
<tr>	یک سطر جدول معرفی می کند
<td>	یک سلول جدول معرفی می کند
<caption>	عنوان جدول معرفی می کند
<colgroup>	یک گروه از ستون ها معرفی می کند
<col>	یک مقدار موجودیت برای یک یا چند ستون معرفی می کند
<thead>	سر یک جدول را معرفی می کند
<tbody>	بدنه یک جدول را معرفی می کند
<tfoot>	پاورقی جدول را معرفی می کند