• سبد خریدتان خالی است.



با عضویت در خبرنامه از اخرین اخبار وب سایت با خبرشوید برای اینکار تنها کافیست ایمیل خود را وارد کرده و روی عضویت کلیک کنید


برای عضویت در کانال تلگرام کدمونی
و باخبر شدن از آخرین مطالب قرار گرفته در وب سایت بر روی عکس زیر کلیک کنید






  عناصر فرم در HTML

وب فرم ها ابزاری هستند که به کاربران اجازه میدهند بوسیله وارد کردن اطلاعات با یک صفحه وب تعامل برقرار کنند و این اطلاعات برای پردازش به سرور ارسال شوند. اگر شما هر زمانی را در اینترنت صرف کنید به روشهای مختلفی نیاز خواهید داشت که از این فرمها استفاده کنید، از جمله ثبت نام یا ورود بهیک سرویس ایمیل، ارسال ایمیل، قرار دادن سفارشات، پاسخ دادن به سوالات در یک نظرسنجی، و بسیاری دیگر.

فرمهای html پس از پر کردن و ارائه شدن توسط کاربر ، باید به صفحه ای روی سرور که در تگ باز شده فرم مشخص میشود، ارسال شوند. این صفحه باید حاوی اسکریپت باشد ( معمولا اسکریپت php ، اگر چه زبانهای دیگری که کار میکنند نیز وجود دارد) که اطلاعات ارسال شده را جمع میکند و  از آنها با چاپ روی یک صفحه ، اضافه کردن آن به پایگاه داده، ارسال ایمیل آن به کسی، و غیره استفاده میکند.

عنصر اساسی فرم به شکل زیر است: ( در تمامی مثالها به جای() از علامتهای <>استفاده کنید)

(form action=”what-to-do-next.php” method=”post”) (/form)
or
(form action=”what-to-do-next.php” method=”get”) (/form)

در تگ باز فرم، “action” صفحه ای را مشخص میکند که داده های کاربران هنگام ارسال فرم برای پردازش به آن فرستاده میشوند. “method” تعیین میکند داده ها چگونه به صفحه ارسال شوند، روش “post” داده ها را در پشت صحنه ارسال میکند بناببراین کاربر اطلاعات ارسالی را نمیبیند. “get” داده ها را به عنوان یک رشته در امتداد آدرس میفرستد، که کاربر میتواند آن را در نوار آدرس خود ببیند.

برخی عناصر مفید فرم در زیر نام برده شده اند:

فیلد input

تگ “input ” در HTML رایجترین عنصر فرم مورد استفاده است. این عنصر میتواند فیلد متن فرم، فیلد رمز، فیلدهای مخفی فرم و … را ایجاد کند. صفت “type” تعیین میکند که کدام یک از اینها و دیگر ویژگی ها در هر مورد استفاده میشوند.

 

فیلد text فرم html

فیلد متن فرم به کاربر این اجازه را میدهد که کاراکترهایی را در یک خط چاپ کند، که میتوانند طولهای متفاوت داشته باشند و تعداد نامحدودی از حروف را بپذیرند، مگر اینکه بصورت دیگری مشخص شده باشد.

(form action=”what-to-do-next.php” method=”post”)
(input type=”text” size=”25″ name=”field-identifier” /)
(/form)

صفت type نوع فیلد را مشخص میکند ، در این مثال نوع “text” میباشد. ویژگی “size” طول فیلد را مشخص میکند و برای ویژگی “name” باید یک هویت منحصر به فرد به فیلد اختصاص دهید تا بعدا زمانیکه داده ها پردازش میشوند بتوان با استفاده از آن به فیلد اشاره کرد.

استفاده از ویژگی maxlength با استفاده از یک مقدار عددی ، حداکثر تعداد کاراکترهایی را که میتوان برای یک فیلد فرم وارد کرد را تعیین میکند. ویژگی “value” کاراکترهایی را که بطور پیش فرض در فرم ظاهر میشوند را مشخص میکند، اما توسط بازدیدکننده نیز میتواند رونویسی شود.

 

فیلد password فرم html

فیلد رمز عبور فرم همان فیلد متن است با یک استثناء مهم. هر کراکتر وارد شده به فیلد رمز عبور باید در مرورگر بصورت ستاره (*) یا نوعی نقطه نشان داده شود. این باعث میشود افرادی که در کنار کاربر نشسته اند رمز وارد شده را نبینند.

(form action=”what-to-do-next.php” method=”post”)
(input type=”password” size=”25″ name=”password” /)
(/form)

همانطور که میبینید همان ویژگی ها را میتوان استفاده کرد، به استثناء نوع، که اکنون دارای ارزش “password” است و name که باید منحصربه فرد باشد.

 

فیلدهای مخفی فرم html

فیلدهای مخفی فرم ها هرگز در یک صفحه وب قابل مشاهده نیستند. آنها در پشت صحنه برای ذخیره داده هایی که توسط کاربر وارد نمیشوند، اما لازم است همراه بقیه داده های فرم به سرور ارسال شوند، استفاده میشوند.

(form action=”what-to-do-next.php” method=”post”)
(input type=”hidden” name=”hidden-data” value=”No One Will Ever See Me On the Webpage!” /)
(/form)

ویژگی type باید “hidden” تعیین شود و name نیز باید منحصر به فرد باشد. value هم باید شامل داده ای باشد که قرار است هنگام ارسال فرم برای سرور فرستاده شود.

 

دکمه های فرم html

دکمه ها برای فرم html ضروری اند ، چرا که بدون آنها کاربر هیچ راهی ندارد که نشان دهد پر کردن فرم تمام شده است و یا میخواهد فرم را برای پردازش ارسال کند. دو نوع اصلی از دکمه های فرم وحود دارد: submit و reset

 

دکمه submit

(form action=”what-to-do-next.php” method=”post”)
(input type=”submit” name=”send” value=”Send For Processing!” /)
(/form)

از بین این سه ویژگی در مثال ما تنها دو مورد نیاز است، type که واضح است و value متنی را تعیین میکند که روی دکمه نشان داده میشود. name فقط وقتی لازم است که نیاز باشد بعدا مشخص شود روی کدام دکمه کلیک شده است!

 

دکمه reset

با کلیک روی دکمه reset تمام فیلدهای فرم به مقدار پیش فرضشان برمیگردند.

(form action=”what-to-do-next.php” method=”post”)
(input type=”reset” value=”Reset” /)
(/form)

 

دکمه check box  در فرم

check box اجازه انتخابهای متعدد را در یک زمان به کاربر میدهد و برای ایجاد box از تگ input استفاده میشود. از check box ها به جای “yes” یا “no” در پاسخ به سوالات، و یا برای چندین پاسخ برای یک سوال میتوان استفاده کرد.

(form action=”” method=”post”)
(input type=”checkbox” name=”favorite1″ value=”chocolate” /) Chocolate
(input type=”checkbox” name=”favorite2″ value=”vanilla” /) Vanilla
(input type=”checkbox” name=”favorite3″ value=”mint” /) Mint
(/form>

نتیجه به صورت زیر است

Chocolate
Vanilla
Mint

از آنجا که بیش از یک گزینه را می توان در یک زمان انتخاب کرد، نام هر یک از چک باکس ها باید منحصر به فرد باشد به طوری که هر یک را بتوان به طور جداگانه مشخص نمود. ارزش ها نیز باید به منظور نشان دادن ارزش هر گزینه باید منحصر به فرد باشند.

 

دکمه radio در html

دکمه های رادیویی برای اجازه دادن به انتخاب واحد در میان گزینه های متعدد در پاسخ به یک سوال در نظر گرفته شده اند.

What has four legs one head but only one foot?
(form action=”” method=”post”)
(input type=”radio” name=”joke” value=”bed” /) A Bed
(input type=”radio” name=”joke” value=”clock” /) A Clock
(input type=”radio” name=”joke” value=”snake” /) A Snake
(/form>

نتیجه به صورت زیر است

What has four legs one head but only one foot?
A Bed
A Clock
A Snake

نام هر گروه از دکمه های رادیویی باید یکسان باشد تا بتوان آنها را به عنوان یک گروه شناسایی کرد. ارزش هر یک از دکمه های رادیویی  باید منحصر به فرد باشد به طوری که مقدار انتخاب شده را بتوان بعدا تشخیص داد.

 

فیلد Tip

اگر می خواهید یک دکمه چک باکس یا رادیو به طور پیش فرض بررسی می شود، به جای اینکه همه گزینه ها خالی باشند، شما می توانید یک کلمه (چک) به پایان عنصر اضافه کنید:

(form action=”” method=”post”)
(input type=”checkbox” name=”tip1″ value=”1″ checked /) Default Option
(input type=”checkbox” name=”tip2″ value=”2″ /) Other Option
(input type=”radio” name=”tip3″ value=”3″ checked /) Default Option
(input type=”radio” name=”tip3″ value=”4″ ) Other Option
(/form)

نتیجه به صورت زیر است

 Default Option
Other Option
Default Option
Other Option

 

 Textarea های فرم HTML

Textarea شبیه به فیلد text فرم  است، اما چند خط به جای فقط یک ظرفیت دارد، و اجازه تعریف پاراگراف را میدهد. Textarea  یک عنصر کامل با تگهای باز و بسته است. اگر شما میخواهید متنی که تایپ میکنید بصورت پیش فرض در Textarea نوشته شود ،آن متن باید بین تگهای باز و بسته قرار بگیرد.

(form action=”what-to-do-next.php” method=”post”)
(textarea)(/textarea)
(textarea)When is a car not a car? When it turns into a garage!(/textarea)
(/form)

Textarea دارای ویژگی های منحصر به فردی چون “rows” و “cols” نیز میباشد که مقادیر عددی را برای تعیین سایز textarea میپذیرند.

 

 



اطلاعات ، دانلود و خرید
عناصر فرم در HTML رایگان 59 کیلوبایت
رایگان – خرید
مطالب پیشنهادی

موقعیت جغرافیایی در HTML5

  موقعیت جغرافیایی در HTML5 Geolocation (موقعیت جغرافیایی) یک از رابط های برنامه کاربردی API های HTML5 است که برای مکان یابی موقعیت کاربران استفاده می شود.   ♦ تعیینمحلموقعیتکاربر API موقعیت جغرافیایی در HTML برای دریافت موقعیت جغرافیایی یک کاربر استفاده می شود. از آنجایی که این قابلیت می تواند با حریم خصوصی کاربر، تداخل داشته باشد، موقعیت جغرافیایی فقط در صورتی که خود […]

ادامه

لیست برچسب ها و تگ های HTML

  ھمه صفحات وب با استفاده از دستورالعمل ھایی ساخته شده اند که به آنھا برچسب ھا یا تگ ھای HTML گویند که مخفف کلمه Hyper Text Markup Language است. اصلی ترین تگ ھا و بدنه یک فایل HTML شامل موارد زیر است: ( در مثالها به جای() از علامتهای <>استفاده کنید) (html)             نشان گر نوع […]

ادامه

ساختار یک فایل HTML چگونه است؟

هر عنصر html کامل یک تگ باز کردن و یک تگ بستن را داراست.متن بین این دو تگ قرار میگیرد و مرورگر بر اساس دستورالعمل های مرتبط با برچسب ها متن را میخواند و میفهمد.استثنایی برای این قانون وجود دارد که “empty elements” (عناصر خالی) نامیده میشوند ،در واقع  این عناصر تگ بستن را ندارند. بر چسب هایی […]

ادامه


تمامی حقوق برای وب سایت کدمونی محفوظ است و هر گونه کپی برداری پیگرد قانونی دارد. Design By 30ble Group 30ble.net