اهداف این درس
1- ایجاد میدانهای متنی
2- میدانهایی برای وارد نمودن Password
3- میدانهایی برای ایجاد
Email 4- دکمه های رادیویی
5- دکمه ها
6-ايجاد checkbox
7- منوهای انتخاب شونده
شروع درس
در این درس به معرفی اساس و اجزاء فرمها می پردازیم .
فرمها در صفحه وب با < form > ....< /form > تعریف می شوند . کلیه اجزاء فرمها مثل میدانهای متنی ، کلیدها و ... در بین این 2 تگ قرار خواهند گرفت که قالب HTML آن بصورت زیر است :
http://pnu-club.com/imported/mising.jpg
ارزش Action یا مقداری که در آن قرار می گیرد موقعیت برنامه یا اسکریپتی است که می خواهد فرآیندی بر روی اطلاعات ارسال شده توسط کاربر را انجام دهد. و صفت Method دارای 2 مقدار Get و Gost می باشد. که آن نیز معرف 2 روشی است که اطلاعات باید برای نرم افزار پردازش کننده ارسال شود . تمامی اجزاء داخل تگ < form > اطلاعات که درون آنها می باشد را ارسال می کنند . هر جزء شامل type می باشد .
برای ایجاد میدانهای متنی که دیدن کننده بتواند درون آنها تایپ کند ، طول پیش فرض است که 20 کاراکتر می باشد . ولی شما می توانید میدانهایی با سایز های دیگر ایجاد کنید . شما می توانید با قرار دادن صفت Maxlenght برای آن یک حد تعریف کنید . متن داخل میدانها هنگام بارگذاری صفحه خالی می شود مگر آنکه شما برای آن رشته متن را در صفت Value تعریف کنید . http://pnu-club.com/imported/mising.jpg
ظاهر آن مانند میدان متنی است با این تفاوت که وقتی کاربر درون این میدان تایپ می کند به جای نمایش کاراکترها نقطه یا ستاره نمایش می دهد . میدان متنی Password در هنگام ارسال کوشش به جلو رفتن می کند و بعد از رساندن اطلاعات به سرور کوشش آنها پایان می پذیرد .
Character wide.
http://pnu-club.com/imported/mising.jpg
میدانهایی که چندین خط دارند و دیدن کننده برای دیدن متن از Scroll استفاده می کند. تگ تعریف کننده سایز میدان به وسیله اعدادی که در صفات Cols و Rows وارد می شوند تعریف می گردند با وارد کردن خصیصه Wrap=Virtual متنی که وارد این میدان می شود ، بطور اتوماتیک شکسته می شود . شما همچنین می توانید متنی را بطور پیش فرض در آن داشته باشید .
http://pnu-club.com/imported/mising.jpg
http://pnu-club.com/imported/mising.jpg
کلیدهای رادیوئی (type="Radio")
کلیدهای رادیویی کلیدهایی هستند که از یک گروه کلید همزمان فقط یکی از آنها را می توان انتخاب کرد و اگر یکی از آنها را کلیک کردید و سپس دیگری را کلیک کردید دکمه اول از حالت انتخاب خارج می شود . یک گروه از دکمه های هم رده با گذاشتن یک نام مشترک برای همه آنها بوجود می آیند و مقداری که فرستاده می شود برابر است با مقداری که توسط دکمه رادیویی انتخاب شده است . با گذاشتن خصیصه Checked درآخر تگ یک دکمه این دکمه بصورت پیش فرض در هنگام بارگذاری صفحه انتخاب می گردد.
تذکر :
کلیدهایی که اسم های جداگانه دارند بصورت مستقل از هم عمل می کنند . http://pnu-club.com/imported/mising.jpghttp://pnu-club.com/imported/mising.jpg
این گونه کلیدها شبیه به کلیدهای رادیوئی عمل می کنند اما تحت تاثیر کلیدهای دیگر نیستند . بنابراین شما می توانید بیشتر از یک مورد انتخاب در یک گروه کلید شبیه به هم داشته باشید . توجه کنید که هر Checkbox اسم منحصر به فرد دارد . اگر یک Checkbox علامت نخورده باشد با گذاشتن دکمه ماوس بر روی جایی از پهنای آن و کلیک کردن آن می توانید آن را به حالت انتخاب در آورید و نیز دوباره بر روی آن می توانید آن را از حالت انتخاب خارج کنید . مقداری که برای سرور ارسال می شود برابر با ارزش مقداری است که کنار Checkbox قرار گرفته است اضافه کردن خصیصه Checkbox در این تگ باعث می شود آن مورد بطور پیش فرض انتخاب گردد .
http://pnu-club.com/imported/mising.jpghttp://pnu-club.com/imported/mising.jpg
منوهای انتخاب شونده به کاربران این امکان را می دهد که از بین انتخابهای متعدد یکی را انتخاب کنند و تگ تعریف آن < option > و < option / > می باشد .
مقدار این ویژگی در هنگام پردازش بازگردانده می شود با اضافه کردن ویژگی Selected در این تگ این جزء در هنگام بارگذاری صفحه بصورت پیش فرض انتخاب می گردد . اگر چنین ویژگی را به کار نبرید اولین مقدار منو بطور پیش فرض انتخاب می گردد.
http://pnu-club.com/imported/mising.jpg
http://pnu-club.com/imported/mising.jpg
به دنبال ایجاد دکمه ها و فرم ها کلید Submit به مرورگر اجازه می دهد که تمامی موارد انتخابی شامل منوهای انتخاب شده ، متنهای وارد شده و ... را جمع آوری و آنها را به جایی که مکان آن در صفت Action آورده شده است ارسال کند و کلید Reset فرم را به حالت اول بر می گرداند .
http://pnu-club.com/imported/mising.jpg
مروری بر مطالب
1- ساختار یک فرم چیست ؟
2- تفاوت میان کلیدهای رادیول و Checkbox در چیست ؟
3- چگونه منوهای بازشونده در صفحه ایجاد کنیم ؟
4- فرق بین کلیدهای Submit و Reset در چیست ؟
تمرین :
موارد گفته شده و کلیه فرم ها را در صفحات ساخته شده خود به کار ببرید .
