جلسه سوم – معرفی تگ های مهم و کاربردی در HTML

در این بخش، تگ های اصلی و پرکاربرد HTML به اختصار معرفی می شوند، اچ تی ام ال یک زبان نشانه گذاری اطلاعات متنی، تصویری ، چندرسانه ای و … در صفحات وب است.

تگ های اصلی

 

کاربرد

تگ

عنوان با درجه های یک تا شش

h1 , h2 , h3, h4 , h5 ,h6

تعیین صفحه وب

html

ایجاد بخش تعاریف و تنظیمات صفحه

head

تعیین متن نوار عنوان پنجره مرورگر

title

ایجاد بخش بدنه صفحه

body

شکستن خط

br

ایجاد پاراگراف

p

نوشتن توضیحات

<!– –>

تگ های جدول بندی

کاربرد

تگ

تعریف جدول

table

تعریف عنوان جدول

thead

تعریف بدنه جدول

tbody

تعریف فوتر جدول

tfoot

تعریف سطر

Tr

تعریف سلول عنوان

Th

تعریف سلول

Td

مثال از جدول :

تگ های فرم

تگ

کاربرد

form

ساخت فرم

input

ساخت شکل های مختلف ورودی

select

ساخت لیست باکس و کمبوباکس

option

تعریف آیتم برای لیست ها

textarea

تعریف جعبه متن طولانی

تگ input یک خاصیت بنام type دارد که مطابق جدول زیر مقدار گرفته و شکل ورودی را تعیین می کند:

نوع input

کاربرد

Text

 جعبه‌ی ورود متن یک سطری

Password

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

Radio

دکمه رادیویی

Checkbox

جعبه انتخاب

File

انتخاب و ارسال فایل

Hidden

نگهداری اطلاعات مخفی

Button

دکمه فشاری

Submit

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

Reset

دکمه بازنویسی اطلاعات فرم

مثال از فرم:

<html>
<body>
<form action="page2.php" method="post" enctype="multipart/form-data">
<table width="300" align="center" border="1">
<tr><th colspan="2" >  Student Info </th></tr>
<tr>
<td> name </td>
<td><input type="text" name="nam"  /></td>
</tr>
<tr>
<td> famliy </td>
<td><input type="text" name="fam" /></td>
</tr>
<tr>
<td> password </td>
<td><input type="password" name="pass" /></td>
</tr>
<tr>
<td> gender </td>
<td>
<input type="radio" name="gen" value="1" /> male
<input type="radio" name="gen" value="2" /> female
</td>
</tr>
<tr>
<td> hobbies </td>
<td>
<input type="checkbox" name="mu"  /> Music <br />
<input type="checkbox" name="sp"  /> Sport
</td></tr>
<tr><td> state </td>
<td>
<select name="field">
<option value="1">Computer </option>
<option value="2">Graphics </option>
<option value="3">Mechanics </option>
</select>
</td></tr>
<tr><td> address </td>
<td><textarea name="addr" cols="50" rows="3"></textarea>
</td></tr>
<tr><td> picture </td>
<td><input type="file" name="pic" /></td>
</tr>
<tr><td>&nbsp; </td>
<td>
<input type="submit" value=" Submit "  />
<input type="reset"  value=" Clear "  />
</td></tr></table>
</form>
</body>
</html>


خروجی:

, , ,
Share:

ارسال یک پاسخ

نشانی ایمیل شما منتشر نخواهد شد.

نوزده + 20 =

دسته ها