مدرسه HTML
تعریف و کاربرد
برچسب form یک فرم برای ورودی های کاربران می سازد. فرم ها برای پاس دادن اطلاعات کاربر به یک صفحه تعیین شده استفاده می شوند.
تفاوت بین HTML و XHTML
تفاوتی ندارد
مثال
| منبع | خروجی |
|---|---|
|
<form action="form_action.asp" method="get"> First name: <input type="text" name="fname" value="Mickey" /> <br /> Last name: <input type="text" name="lname" value="Mouse" /> <br /> <input type="submit" value="Submit" /> </form> <p dir=rtl> اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد. </p> |
First name: Last name: اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد. |
موجودیت های مورد نیاز
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| action | URL | یک URL که مشخص می کند داده ها به هنگام فشردن دکمه submit کجا روند. | STF |
خواص انتخابی
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| accept | list of contenttypes | یک لیست از انواع داده ها که با کاما از هم جداشده اند سروری که این فرم را پردازش می کند می تواند داده ها را بدرستی اجرا کند | STF |
| accept-charset | charset_list | یک لیست که با کاما جدا شده از مجموعه کاراکترهای ممکن برای داده های یک فرم. داده پیش فرض "unknown" است. | STF |
| enctype | mimetype | The mime type used to encode the content of the form | STF |
| method |
get post |
یک شیوه فرستادن داده های فرم به صفحه action در HTTP که پیش فرض آن get است.
این شیوه داده های فرم را در URL می فرستد: URL?name=value&name=value.
این روش محتویات را در بدنه درخواست می فرستد. |
STF |
| name | form_name | یک نام منحصر به فرد برای فرم تخصیص می دهد. | TF |
| target |
_blank _self _parent _top |
URL هدف کجا باز شود
|
TF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
برچسب input شروع یک فیلد ورودی را نشان می دهد که کاربر می تواند داده های خود را تعریف کند.
تفاوت بین HTML و XHTML
در HTML برچسب input برچسب پایانی ندارد.
در XHTML برچسب input باید برچسب پایانی داشته باشد.
نکات:
برچسب input خالی است و فقط حاوی موجودیت هاست.
برای ساخت یک برچسب از label استفاده کنید.
مثال
| منبع | خروجی |
|---|---|
|
<form action="form_action.asp" method="get"> First name: <input type="text" name="fname" value="Mickey" /> <br /> Last name: <input type="text" name="lname" value="Mouse" /> <br /> <input type="submit" value="Submit" /> </form> <p dir=rtl> اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد. </p> |
First name: Last name: اگر شما روی دکمه "submit" کلیک کنید شما ورودی های خود را به یک صفحه جدید به نام form_action.asp خواهید فرستاد. |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| accept | list_of_mime_types |
A comma-separated list of MIME types that indicates the MIME type of the file transfer.
فقط با "type="file استفاده می شود. |
STF |
| align |
left right top texttop middle absmiddle baseline bottom absbottom |
چیدمان متن زیر تصویر را مشخص می کند.
"with type="image |
TF |
| alt | text |
یک متن برای تصویر معرفی می کند.
فقط برای "type="image استفاده می شود. |
STF |
| checked | checked |
مشخص می کند که عنصر باید در اولین باری که صفحه بارگیری می شود انتخاب شده باشد.
فقط با "type="checkbox و "type="radio استفاده می شود. |
STF |
| disabled | disabled |
عنصر ورودی را دراولین باری که بارگیری می شودغیر فعال می کند. بنابراین کاربر نمی تواند در آن متنی وارد کند یا آن را انتخاب کند.
نمی تواند با "type="hidden استفاده شود. |
STF |
| maxlength | number |
Defines بیشترین تعداد کاراکتری که اجازه دارد در فیلد متنی قرار بگیرد.
فقط با "type="text استفاده می شود. |
STF |
| name | field_name |
برای عنصر ورودی یک نام یکتا درنظر می گیرد.
این موجودیت برای type="button", type="checkbox", type="file", type="hidden", type="image", type="password", type="text", and "type="radio مورد نیاز است. |
STF |
| readonly | readonly |
مشخص می کند که محتوای این فیلد قابل تغییر نیست.
فقط برای "type="text استفاده می شود. |
STF |
| size | number_of_char |
اندازه عنصر ورودی را مشخص می کند.
نمی تواند برای "type="hidden استفاده شود. |
STF |
| src | URL |
URL تصویری راکه نشان داده می شود را مشخص می کند.
فقط برای "type="image استفاده می شود. |
STF |
| type |
button checkbox file hidden image password radio reset submit text |
نوع عنصر ورودی را مشخص می کند.. عنصر پیش فرض "text" است. این یک موجودیت مورد نیاز نیست، اما ما فکر می کنیم شما باید آن را قرار دهید.. اگر از قلم بیفتد ie 5.5 یک فیلد متنی نشان خواهد داد اما Netscape نه. |
STF |
| value | value |
متن روی دکمه را مشخص می کند.
یک نتیجه نمادین برای فیلدی که به script پاس داده می شود معرفی می کند. نتیجه عناصر ورودی وقتی کلیک می شوند را مشخص می کند. نتیجه به URL صفحه action ارسال می شود. مقدار پیش فرض آن فیلد را معرفی می کند نمی تواند با "type="file استفاده شود. این موجودیت برای type="checkbox" and "type="radio مورد نیاز است. |
STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
یک فیلد ورودی متن چند خطی را معرفی می کند. یک کاربر می تواند متن در textarea وارد کند. در یک textarea شما می توانید به میزان نامحدود کاراکتر وارد کنید.
تفاوت بین HTML و XHTML
تفاوتی ندارند.
مثال
| منبع | خروجی |
|---|---|
|
<textarea rows="2" cols="20"> در اینجا می توان به میزان نامحدود کاراکتر وارد کرد.... </textarea> |
موجودیت های مورد نیاز
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| cols | number | تعداد ستون هایی را که در textarea نشان داده می شود را مشخص خواهد کرد. | STF |
| rows | number | تعداد سطرهایی را که در textarea نشان داده خواهد شد را مشخص می کند. | STF |
خواص انتخابی
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| disabled | disabled | textarea را اولین بار که بارگیری می شود غیر فعال می کند. | STF |
| name | name_of_textarea | یک نام برای textarea مشخص می کند. | STF |
| readonly | readonly | مشخص می کند که نمی توان محتویات textarea را تغییر داد. | STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
خواص رویداد
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
برای یک کنترل یک برچسب معرفی می کند. اگر روی متنی که در برچسب است کلیک کنید ، آن فکر می کند که شما کنترل را کلیک کرده اید.
تفاوت بین HTML و XHTML
تفاوتی ندارند.
مثال
| منبع | خروجی |
|---|---|
|
<p>Try clicking on the text labels:</p> <form name="input" action=""> <input type="radio" name="sex" id="male" /> <label for="male">Male</label> <br /> <input type="radio" name="sex" id="female" /> <label for="female">Female</label> </form> |
Try clicking on the text labels: |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| for | id_of_another_field |
نشان می دهد که برچسب برای کدام عنصر فرم است.. یک id یک عنصر فرم تخصیص می دهد.
اگر این موجودیت مشخص نشده باشدآن برچسب به محتویاتش وابسته است. |
STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
accesskey, onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
عنصر fieldset یک کادر اطراف عناصری که شامل آنها می شود می کشد.
تفاوت بین HTML و XHTML
تفاوتی ندارند.
مثال
| منبع | خروجی |
|---|---|
|
<fieldset> Height <input type="text" size="3" /><br /> Weight <input type="text" size="3" /> </fieldset> |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
برچسب legend یک عنوان برای fieldset قرار می دهد.
تفاوت بین HTML و XHTML
برچسب menu در HTML4.0 توصیه نمی شود.
برچسب menu در XHTML 1.0 پشتیبانی نمی شود.
تفاوت بین HTML و XHTML
موجودیت align در HTML 4.0 توصیه نمی شود.
موجودیت align در XHTML 1.0 پشتیبانی نمی شود.
مثال
| منبع | خروجی |
|---|---|
|
<fieldset> <legend align="right">Health information:</legend> Height <input type="text" size="3" /> Weight <input type="text" size="3" /> </fieldset> |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| align |
top bottom left right |
چیدمان محتویات fieldset را معرفی می کند. پیش فرض top است.. | TF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
accesskey, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
برچسب select یک لیست پایین بازشو را معرفی می کند.
تفاوت بین HTML و XHTML
تفاوتی ندارند.
مثال
| منبع | خروجی |
|---|---|
|
<select> <option value ="volvo">Volvo</option> <option value ="BMW">Saab</option> <option value ="Ford">Opel</option> <option value ="Toyota">Audi</option> </select> |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| disabled | disabled | لیست پایین باز شو غیر فعال می شود. | STF |
| multiple | multiple | چند گزینه در آن واحد می توانند انتخاب شوند. | STF |
| name | unique_name | یک نام یکتا برای لیست انتخاب می کند. | STF |
| size | number | تعداد عناصری که قابل دیدن در لیست هستند را مشخص می کند. | STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
خواص رویداد
onfocus, onblur, onchange
تعریف و کاربرد
یک لیست گروهی درست می کنند. این عنصر یه شما اجازه می دهد تا انتخابات را گروه بندی کنید. هنگامی که شما یک لیست لند از گزینه ها دارید، گروه های انتخاب های مرتبط با هم برای اجرا آسانتر است. عنصر fieldset یک کادر اطراف عناصری که شامل آنها می شود می کشد.
تفاوت بین HTML و XHTML
تفاوتی ندارند.
مثال
| منبع | خروجی |
|---|---|
|
<select> <optgroup label="خودرو های سوئدی"> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="خودرو های آلمانی"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select> |
موجودیت های مورد نیاز
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| label | text_label | یک برچسب برای گروه گزینه ها انتخاب می کند. | STF |
خواص انتخابی
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| disabled | disabled | در اولین بارگیری لیست گزینه ها را غیرفعال می کند. | STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang
خواص رویداد
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
عنصر option یک گزینه در لیست پایین بازشو معرفی می کند.
تفاوت بین HTML و XHTML
در HTML برچسب option برچسب انتهایی ندارد.
در XHTML برچب option باید حتما بسته شود. تفاوتی ندارند.
نکات:
نکته: برچسب option می تواند هیچ موجودیتی نداشته باشد اما شما معمولا به موجودیت value احتیاج دارید که نشان می دهد چه عنصری به سرور فرستاده می شود.
نکته:از این برچسب برای همبستگی با select استفاده کنید. علی رغم اینکه این معنی را نمی دهد.
مثال
| منبع | خروجی |
|---|---|
|
<select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value ="opel" selected="selected">Opel</option> <option value ="audi">Audi</option> </select> |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| disabled | disabled | مشخص می کند که در اولین بارگیری کدام گزینه باید نشان داده شود. | STF |
| label | text | یک برچسب برای استفاده از <optgroup> معرفی می کند. | STF |
| selected | selected | مشخص می کند که گزینه باید بصورت انتخاب شده نشان داده شود (اولین عنصر لیست نشان داده خواهد شد) | STF |
| value | text | مقدار گزینه ای را که به سرور ارسال خواهد شد مشخص می کند. server | STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang, tabindex
خواص رویداد
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
تعریف و کاربرد
یک دکمه فشاری را معرفی می کند. در داخل دکمه شما می توانید محتویاتی مانند متن یا تصویر داشته باشید. تفاوت بین این و دکمه ها با
تفاوت بین HTML و XHTML
تفاوتی ندارند.
مثال
| منبع | خروجی |
|---|---|
| <button>Click Me!</button> |
خواص انتخابی
DTD نشان می دهد که در کدام DTD این خواص مجاز هستند.S=اکید ، T=وابسته، F=frameset.
| موجودیت | مقدار | توضیحات | DTD |
|---|---|---|---|
| disabled | disabled | دکمه را غیر فعال می کند | STF |
| name | button_name | یک نام یکتا برای دکمه انتخاب می کند | STF |
| type |
button reset submit |
نوع دکمه را مشخص می کند | STF |
| value | some_value | یک مقدار آغازین برای دکمه مشخص می کند. مقدار می تواند با script عوض شود. | STF |
خواص استاندارد
id, class, title, style, dir, lang, xml:lang, accesskey, tabindex
خواص رویداد
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
با HTML شما می توانید در یک پرونده عکس نشان دهید.
نمایش عکس
این مثال چگونگی نمایش عکس را نشان می دهد.
نمایش عکس از محلی دیگر
در صورتیکه عکس مورد نظر در محلی دیگر باشد(آدرسی در شبکه)، می توانید برای نمایش آن، از این مثال کمک بگیرید.
در HTML عکس ها با برچسب <img > معرفی می شوند.برچسب <img > خالی است بدین معنا که آن فقط حاوی موجودیت هاست و برچسب پایانی ندارد.
برای نمایش یک تصویر در یک صفحه ، شما احتیاج دارید که از موجودیت Src استفاده کنید. Src مخفف source (منبع) است. محتوای موجودیت url ، Src تصویری است که شما می خواهید در صفحه تان نمایش دهید. نحوه معرفی یک تصویر:
<"img src="url >
url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که "boat.gif" نامیده شده در دایرکتوری "images" در "www.farajpour.ir" دارای این url است:
http://farajpour.ir/wp-content/uploads/2015/04/java.jpg
مرورگر تصویر را جایی قرار می دهد که بر چسب تصویر پرونده در آنجا قرار گرفته است.اگر شما برچسب تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و سپس پاراگراف دوم را نشان می دهد.
موجودیت Alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای موجودیت Alt یک متن توصیفی است:
<"img src="url" alt="Big Boat>
اگر مرورگر نتواند تصویری را بارگیری نماید ، موجودیت alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد.
اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این بهترین توصیه من اینست که از تصاویر به دقت استفاده کنید.