فرم ها و داده هاي ورودي در HTML
يک فرم ناحيه اي در صفحه HTML است که شامل عناصري مي باشد. عناصر فرم به کاربر اجازه مي دهند که اطلاعاتي را وارد صفحه ما کند؛ و ما با دريافت آن اطلاعات به اهدافي که داريم برسيم. يک فرم توسط برچسب <form> ايجاد مي شود.
برچسب <input>
پرکاربرد ترين برچسب درفرمها برچسب<input> مي باشد در اينجا انواع اين بر چسب را شرح مي دهيم.
جعبه متن
از اين جعبه هنگامي استفاده مي شود که بخواهيم کاربر کلمات يا اعدادي را در فرم بنويسد؛ و توسط مشخصه type="text" تعيين مي شود. مثال زير در همين رابطه است. توجه داشته باشيد که خود فرم قابل رويت نمي باشد وفقط عناصر داخل آن را مي توانيم ببينيم. در ضمن اندازه پيش فرض براي جهبه متن در اکثر مرورگر ها 20 حرف مي باشد و اگر مي خواهيد اين پيش فرض را تغيير دهيد بايد از مشخصه size استفاده کنيد (size=40).
.jpg)
دکمه هاي راديويي
از اين دکمه ها هنگامي استفاده مي شود که بخواهيم کاربر يکي از چند گزينه به تعداد محدود را انتخاب کند؛ و توسط مشخصه type="radio" تعيين مي شود. با انتخاب يکي از دکمه ها، دکمه ديگري با همان نام اگر در حالت انتخاب باشند، از حالت انتخاب خارج مي شود. اگر کلمه checked را در برچسب input از نوع دکمه هاي راديويي بنويسيد آن دکمه به طور پيش فرض به صورت انتخاب شده خواهد شد.
<input type="radio" name="s" value="male" checked >
.jpg)
جعبه انتخاب
از اين جعبه ها هنگامي استفاده مي شود که بخواهيم کاربر يک يا چند گزينه از گزينه هايي به تعداد محدود را انتخاب کند؛ و توسط مشخصه type=" checkbox" تعيين مي شود. کاربر مي تواند يک يا چند جعبه انتخاب را همزمان انتخاب کند. اگر کلمه checked را در برچسب input از نوع جعبه انتخاب بنويسيد آن جعبه به طور پيش فرض به صورت انتخاب شده خواهد شد.
<input type="checkbox" name="bike" checked>
.jpg)
جعبه کلمه عبور
از اين جعبه هنگامي استفاده مي شود که بخواهيم کاربر کلمه عبور يا هر چيزي که نخواهيم اطرافيان او با نگاه به صفحه نمايش متوجه آن شوند را، بنويسد که در اين حالت با فشار هر کليد صفحه کليد يک * در جعبه کلمه عبور نمايش داده مي شود. جعبه کلمه عبور توسط مشخصه type="password" تعيين مي شود.
.jpg)
دکمه
دکمه توسط type="button" مشخص مي شود و نوشته روي آن توسط مشخصه value="text" معرفي خواهد شد. ساخت دکمه شيوه ديگري نيز دارد وآن استفاده از برچسب <button>است.
هنگامي که دکمه ها را فشار مي دهيم بر اساس کاري که براي آنها تعريف کرده ايم عکس العمل نشان خواهند داد. دکمه ها کاربردهاي مختلفي دارد که در مباحثي مانند JavaScript راجع به طريقه استفاده از آنها صحبت مي شود.
.jpg)
جعبه drop down
اين جعبه همان گونه که در شکل زير مي بينيد فهرستي است که يکي از گزينه هاي آن قابل رويت است و با کليک کردن روي آن بقيه گزينه ها نيز ديده مي شوند. درضمن تنها يکي از موارد آن را مي توانيم انتخاب کنيم. اين جعبه توسط برچسب <select> مشخص مي شود وموارد فهرست نيز توسط برچسب <option> ايجاد خواهند شد. به طور پيش فرض گزينه اول اين فهرست انتخاب شده است و اگر بخواهيم که گزينه ديگري از فهرست انتخاب شده باشد بايد کلمه selected را به برچسب <option> در گزينه مورد نظر اضافه کنيم. مثال زير طريقه استفاده را مشخص مي کند.
.jpg)
جعبه textarea
گاي اوقات شما نياز داريد که کاربر متني طولاني تر از يک خط را بنويسد. بنابر اين نمي توانيد از جعبه متن استفاده کنيد چون فقط در آن مي توانيد يک خط را بنويسيد. اما توسط اين جعبه شما مي توانيد به کاربر اجازه دهيد که بيش از يک خط را بنويسد. اين جعبه توسط برچسب <textarea> مشخص مي شود و همانطور که در مثال زير مي بينيد تعداد سطرها وستونها توسط مشخصه هاي rows و cols تعيين مي شوند.
.jpg)
فرم حاشيه دار
توسط برچسب <fieldset> شما مي توانيد يک حاشيه دور عناصر فرم خود ايجاد کنيد و توسط برچسب <legend> مي توانيد کلماتي را روي قسمت بالايي حاشيه بنويسيد.
.jpg)
مشخصه action در فرمها و دکمه ارسال
وقتي که کاربر بر دکمه Submit کليک مي کند، محتويات فرم به فايل يا آدرس ديگري فرستاده خواهد شد. مشخصه action، نام آن فايل يا آدرس را مشخص مي کند، آن فايل معمولا داراي ابزاري براي دريافت اطلاعات فرستاده مي باشد. اين ابزار در مباحث ASP و CGI توضيح داده مي شوند. در مثال زير شيوه ارسال اطلاعات توسط method="get" مشخص مي شود، اين شيوه ها مورد بحث ASP و CGI و ... مي باشد.
.jpg)
نکته
شما مي توانيد در فرم دکمه اي قرار دهيد که کاربر با کليک بر آن اطلاعات فرم را به صورت پيش فرض در آورد. اين دکمه توسط عبارت <input type="reset"> ايجاد مي شود.
ادامه دارد ......
* ارسال مقاله توسط عضو محترم سايت با نام کاربري : davidfattahi/خ