قسمت چهارم
فرمهــا در HTML
همانطور که میدانید در صفحات وب صفحاتی وجود دارند که بوسیله فرمهایی اطلاعاتی را از کاربر دریافت میکنند مانند فرم ثبت نام یم سایت و از این قبیل.برای ساختن فرمها از فیلدهـای بسیاری میتوان استفاده نمود.ما در این قسمت ابتدا انواع این فیلدها را معرفی کرده سپس برای مثال یک فرم ایجاد میکنیم.
اولین فیلد TextBox میباشد که از آن برای درافت اطلاعاتی مانند نام ، نام خانوادگی و از این قبیل اطلاعات بسته به سلیقه طراح وب استفاده میشود.صورت این فیلد مانند کد زیر است.
<Input Type=Text size=N Name=T1 value="">
همانطور که در کد بالا ملاحظه میکنید Type نوع فیلد ما را مشخص میکند ، Size مشخص کننده ادازه این فیلد می باشد که به جای N میتوان هر عدد را قرار داد Name نام فیلد فرم را مشخص میکند و در نهایت Value مشخص کننده مقدار پیش فرض فیلد TextBox است که نشان داده میشود.
فیلد بعدی که با آن آشنا خواهید شد ListBox میباشد که از جهت ساختن منو که در آن گزینه های متفاوتی به کار برده میشود استفاده می شود.صورت این فیلد مانند کد زیر است.
<Select Name=S1>
<option value="
<option Value="
<option Value="Itlay">Itlay
<option Value="Other">Other
</select>
همانطر که در کد بالا ملاحظه میکنید ListBoxها بوسیله تگ Select ساخته میشوند.خصوصیت نام آنها را بوسیله پارامتر Name میتوان مشخص نمود.بوسیله پارامتر Option گزینه های این منو ساخته میشود.و مقدار آنها را نیز میتوان بوسیله Value مشخص نمود.
یکی دیگر از فیلدهایی که جهت ساخت فرمها مورد استفاده قرار می گیرد CheckBox میباشد.از این فیلد زمانی استفاده میشود که مثلا برای سوالی چند مورد انتخاب داشته باشیم مثلا مانند علاقه مندیها و یا هر چیز دیگر که بسته به سلیقه طراح دارد.
<Input Type=Checkbox Name=C1 Value=Home >Home
<Input Type=Checkbox Name=C1 Value=Office>Office
همانطور که در کد بالا ملاحظه می فرمایید پارامتر TYPE ، Checkbox انتخاب شده است که مشخص کننده نوع فیلد میباشد خصوصیت Name آنها نیز یکسان انتخاب شده است تا در یک گروه قرار گیرند و در نهایت مقدار آنها نیز توسط Value انتخاب گردیده است .و مقدار نهایی آنها که در صفحه نمایش داده میشود در آخر خط نوشته میشود.
فیلد دیگری که با آن آشنا خواهید شد فیلد Radibutton است.از این فیلد زمانی استفاده میشود که سوال ما فقط داری یک جواب و یک گزینه انتخابی باشد مانند سوالهایی که جواب Yes یا NO دارند و موارد دیگر که همه اینها به سلیقه شما که طراح صفحه وبتان هستید بر میگردد.به کد زیر توجه نمایید که بوسیله آن RadioButton ایجاد کرده ایم.
<Input Type=Radio Name=R1 Value="Yes">Yes
<Input Type=Radio Name=R1 Value="NO ">No
در نمونه بالا همانطور که ملاحظه می فرمایید خصوصیت Type ، Radio انتخاب شده است و مقدار Name آنها نیز یکسان مقدارهای Value نیز با توجه به نیاز مشخص گردیده و در نهایت Yes ، NO کهدر صفحه نشان داده میشود.
نکته ای که در اینجا وجود دارد این است که زمانی که ما فرم را ایجاد نمودیم باید به ارسال فرم بپردازیم.این عمل توسط دکمه Submit انجام میشود.یا زمانی می رسد کمه ما میخواهید اطلاعات فرم را پاک نمایید که این عمل توسط دکمه ریست انجام میشود. به کدهای زیر دقت نمایید.
<Input Type=Submit Value="Send!">
<Input Type=Reset Value="CleanForm">
در خط اول مقدار Type ، Submit انتخاب شده است.که عمل فرستادن اطلاعات فرم را مشخص میکند خصوصیت Value در اینجا مشخص کننده نوشته روی کلید Submit است.
در خط دوم مقدار Type ، Reset انتخاب شده است که عمل پاک کردن فرم را انجام میدهد.خصوصیت Value نیز مانند خط اول است.
نکته دیگری که باید توجه کنید قرار دادن کد زیر بعد از تگ <Body> است.کار کد زیر ارسال اطلاعات فرم به یک صفحه دیگر میباشد.که در دروس بعدی با آن آشنا خواهید شد.در دروس مربوط به ASP.
در اینجا معرفی فیلدهای فرم به پایان رسید حال به ایجاد یک فرم می پردازیم.
مثال :
<html>
<body>
<Form method=post action="form.asp">
<center><b><H1>Create the Form</center></b></H1>
<hr width=50%>
<center>
Name:<Input type=text name=T1 size=30 value=""><br>
Family:<Input type=text name=T2 size=30 value=""><br>
E-Mail:<Input type=text name=T3 size=30 value=""><br><br>
Job:
<Select name=S1>
<option value="Student">Student
<option value="Teacher"> Teacher
<option value="Hardware"> Hardware
<option value="Software"> Software
<option value="Other"> Other
</select>
<br>
Sex:
<input type=radio name=R1 Value="Male">Male
<input type=radio name=R1 Value="FeMale">FeMale
<br>
What for you send mail?
<Input type=checkbox name=C1 value="Music">Music
<Input type=checkbox name=C1 value="Sport">Sport
<Input type=checkbox name=C1 value="News">News
<Input type=checkbox name=C1 value="Picture">Picture
<br>
<hr width=50%>
<Input Type=Submit Value="Send!">
<Input Type=Reset Value="CleanForm">
</Center>
</Form>
</Body>
</Html>
پایان قسمت چهارم
