آموزش HTML - فرم های HTML

فرم های HTML

تگ < input > :

تگ < input > برای ساختن انواع کنترل های HTML از قبيل کادر های متن ، ليست های بازشو ، دکمه های فرمان و انتخابی و ... درون فرم ها استفاده می شود . نوع کنترل توسط خاصيت Type در درون تگ input مشخص می شود .
نکته : تگ < input > بايد در درون تگ < form > استفاده شود .
شکل کلی تعريف يک کنترل به صورت زير است :

< input type ="نوع کنترل" name="يک نام منحصر به فرد" >
مثال : < input type =" text " name=" txtname " >

خواص مهم تگ input
نام خاصيت	نوع خاصيت	شرح
accept		يک ليست از مجموعه قابل قبول برای اين کنترل است ، که سرور پردازش کننده فرم آنها را قبول می کند .هر يک از اين مقادير به وسيله يک کاما از هم جدا می شوند .
alt	Text متن	يک متن جايگزين را در صورت عدم نمايش کنترل توسط مرورگر ، نمايش می دهد .
checked	checked	مشخص می کند که اگر کنترل مورد نظر يک دکمه انتخابي ( radio button يا chechbox ) باشد ، به صورت پيش فرض انتخاب شده باشد يا خير .
disabled	disabled	چنانچه مقدار اين خاصيت بر روی disabled تنظيم شده باشد ، آن کنترل غير فعال بوده و کاربر عملا امکان استفاده از آن را نخواهد داشت . نکته : با کنترل از نوع hidden به کار نمی رود .
maxlength	عدد number	جنانچه کنترل مورد نظر يک کادر متن ( textbox ) باشد ، حداکثر تعداد کاراکترهايی که می توان در آن کنترل وارد کرد را تعيين می کند .
name	name نام	يک نام منحصر به فرد برای کنترل در فرم در صفحه تعيين می کند . نکته : تعيين و مقدار دهی اين خاصيت برای کنترل های button , checkbox , file , hidden , image , password , text و radio ضرروی است .
readonly	readonly	در اين حالت کنترل به صورت فقط خواندنی در می آيد . در صورتی که مقدار اين خاصيت برابر readonly تنظيم شده باشد ، کاربر مجاز به تغيير متن درون کادرهای متني ( textbox ) و يا تغيير وضعيت دکمه های انتخابی ( checkbox يا radiobutton ) نخواهد بود .
size	عدد تعداد کارکتر	سايز و اندازه کاراکترهای کنترل را تعيين می کند .
src	URL مسير فايل	اين خاصيت فقط در مورد کنتزل image به کار رفته و مسير عکس کنترل را مشخص می کند .
type	button checkbox file hidden image password radio reset submit text	اين خاصيت نوع کنترل را تعيين می کند که يکی از اين موارد زير می تواند باشد : button : دکمه فرمان . checkbox : کادر يا دکمه گزينشی . file : يک فايل خارجی مثل يک صفحه اينترنتی و ... . hidden : يک کنترل مخفی دلخواه را بر روی صفحه ايجاد می کند . image : يک کنترل برای نمايش عکس يا تصوير ايجاد می کند . password : يک کادر متن است که به جای نمايش اعداد يا حروف وارد شده ، ستاره يا دايره نمايش می دهد تا اطلاعات ورودی توسط کاربر مخفی بماند . radio : دکمه انتخابی . reset : يک دکمه فرمان است که با کليک بر روی آن ، محتويات درون کليه کنترل های فرم پاک می شود . submit : يک دکمه فرمان است که با کليک بر روی آن ، اطلاعات درون کنترل های فرم به مقصد ارسال می شود . text : يک کادر متن ايجاد می کند .
value	مقدار	اين خاصيت برای کنترل های مختلف ، حالت های زير را دارد : در دکمه فرمان ها ( button , reset buttons , submit buttons ) : متن روی دکمه فرمان را تعيين می کند . در تصاوير ( images ) : مقداری که در هنگام ارسال اطلاعات فرم به جای مقدار عکس می نشيند . در دکمه های انتخابی ( radio buttons , checkbox ) : مقداری است که در صورت انتخاب کردن ( تيک زدن ) دکمه انتخابی در هنگام ارسال اطلاعات فرم به عنوان مقدار آن کنترل ارسال می شود . در کادرهای متن يا کنترل های مخفی( textbox , password , hidden ) : مقدار پيش فرض کنترل را تعيين می کند . نکته : اين خاصيت با کنترل file به کار نمی رود .

مثال : در مثال زير يک فرم جامع برای ثبت نام فرضی در يک سايت ايجاد کرده ايم و برخی از کنترل های HTML را در اين قسمت به ترتيب مشاهده می کنيد :

نکات مثال : نکات ذکر شده در مثال با عدد مشخص شده اند .

TextBox ها ابزارهايی هستند برای دريافت اطلاعات از کاربران .
از تمام کنترل های CheckBox موجود در يک فرم می توان هر تعداد دلخواه را انتخاب کرد ، ولي از ميان کنترل های Radio Buuton در هر لحظه می توان فقط يک دکمه را انتخاب کرد و با انتخاب يک دکمه بقيه دکمه ها از حالت انتخاب خارج می شوند . در اين حالت بايد Name کنترل هايي که می خواهيد در يک گروه باشند را يکسان تعيين کرده ولی Value آنها با هم متفاوت باشند .
دکمه فرمان Submit برای ارسال اطلاعات به مقصد و دکمه فرمان Reset برای پاک کردن کليه کنترل های فرم به کار می رود .
در کادر متنی که حالت Password دارد ، به جای نمايش کاراکترهای ورودی ، دايره يا ستاره نمايش داده می شود که معمولا برای مخفی ماندن رمزها از ديد به کار می رود .

Example
< form action="http://www.DeveloperStudio.ir/Default.aspx" method="post" > ¹Name : < input type="text" name="txtname" / > <br /> Family : < input type="text" name="txtfamily" /> <br /> ⁴Password : < input type="password" name="txtpass" / > <br /> ²Gender : <br /> Male < input type="radio" name="gender" value="male" / > Female < input type="radio" name="gender" value="female" / > <br /> ²List of Lessons : <br /> Visual Basic < input type="checkbox" name="VB" disabled="disabled" checked="checked" / > Visual C# < input type="checkbox" name="C#" / > ASP.NET < input type="checkbox" name="asp" / > SQL Server < input type="checkbox" name="sql" /><br / > ³< input type="reset" name="cmdreset" value="Reset the Form" / > <br /> < input type="submit" name="cmdsubmit" value="Send Information" / > <br /> </form>	کد
Name : Family : Password : Gender : Male Female List of Lessons : Visual Basic Visual C# ASP.NET SQL Server	خروجی