فرم هاي html

http://www.tahlildadeh.com Translate this page شما در اين سايت آموزشي با مقالات,كتاب,PDF,فيلم هاي آموزشي رايگان و همين طور دوره آموزش برنامه نويسي به زبان هاي C#,HTML5,ASP,MVC,SQL,اندرويد,React,وردپرس .. را ياد مي گيريد

دوشنبه ۲۴ شهریور ۰۴

فرم هاي html

۷ بازديد

فرم هاي html

وقتي كه مي خواهيد داده هايي را از سايت بازديدكننده جمع آوري كنيد، به فرم هاي HTML احتياج خواهيد داشت. به عنوان مثال در هنگام ثبت كاربر، اطلاعاتي مانند نام، آدرس ايميل و كارت اعتباري و غيره را جمع آوري مي كنيد. يك فرم داده ها را از بازديدكننده ي سايت مي گيرد و سپس آن را به يك برنامه ي پاياني مانند CGI، اسكريپت ASP يا اسكريپت PHP باز مي گرداند. برنامه ي پاياني فرايندهاي مورد نياز را بر اساس كار تعريف شده در برنامه، روي داده ي منتقل شده انجام مي دهد.
عناصر متفاوتي براي فرم در دسترس ميباشند، مانند فيلدهاي متن، فيلدهاي textarea، منوهاي رو به پايين، دكمه هاي راديو، چك باكس ها و غيره.

< form action="Script URL" method="GET|POST">
    form elements like input, textarea etc.
< /form>

ويژگي هاي فرم

علاوه بر ويژگي هاي متداول، در زير ليستي از متداول ترين ويژگي هاي مربوط به فرم را مشاهده مي كنيد .

Attribute
Description
action
اسكريپت backend براي پردازش داده ي انتقال شده ي شما آماده ميباشد.
method
روشي براي بارگذاري داده. متداولترين روش هاي مورد استفاده GET و POST مي باشند.
target
پنجره ي هدف يا چارچوب را، جايي كه نتيجه ي اسكريپت نمايش داده خواهد شد، مشخص مي كند. اين ويژگي مقادير _blank, _self, _parent و غيره را به خود مي گيرد.
enctype
شما مي توانيد از ويژگي enctype براي مشخص كردن چگونگي برنامه نويسي توسط مرورگر قبل از ارسال به سرور، استفاده كنيد. مقادير ممكن عبارتند از: application/x-www-form-urlencoded - اين روش استانداردي است كه بيشتر فرم ها در سناريو هاي ساده استفاده مي كنند. mutlipart/form-data - اين روش زماني استفاده مي شود كه شما مي خواهيد داده هاي دوتايي را به شكل فايل هايي مانند تصوير بارگذاري كنيد.

كنترل هاي فرم HTML

انواع مختلفي از كنترل هاي فرم وجود دارند كه مي توانيد براي جمع آوري داده با استفاده از فرم HTML از آنها استفاده كنيد.

 

  • كنترل هاي ورودي متن
  • كنترل هاي چك باكس
  • كنترل هاي راديو باكس
  • كنترل هاي انتخاب باكس
  • باكس هاي انتخاب فايل
  • كنترل هاي مخفي
  • دكمه هاي قابل كليك شدن
  • ثبت و تنظيم مجدد

كنترل هاي ورودي متن

سه نوع ورودي متن وجود دارد كه در فرم ها استفاده مي شوند .

 

  • كنترل هاي ورودي متن تك خطي: اين كنترل براي آيتم هايي استفاده مي شود كه فقط يك خط از ورودي كاربر را لازم دارد، مانند باكس هاي جستجو و نام ها. اين كنترل ها با استفاده ازبرچسب < input> مربوطبه HTML ايجاد مي شوند.
  • كنترل ورودي گذرواژه: اين نيز يك متن ورودي تك خطي مي باشد، اما به محض اينكه كاربر كاراكتر را وارد مي كند، اين كنترل آن را مي پوشاند.
  • كنترل هاي متن ورودي چند خطي: زماني استفاده مي شود كه لازم است كاربر جزئياتي را وارد كند كه بيشتر از يك جمله مي باشند. كنترل هاي ورودي چند خطي با استفاده از برچسب < textarea> استفاده مي شوند.

كنترل هاي ورودي تك خطي

اين كنترل ها براي آيتم هايي استفاده مي شوند كه كاربر فقط يك خط ورودي احتياج دارد، مانند باكس هاي جستجو و نام ها و با استفاده از برچسب < input> مربوط به HTML ايجاد مي شوند.


 مثال:

در اينجا مثال پايه اي مي بينيد از يك ورودي تك خطي كه براي گرفتن نام كوچك و نام خانوادگي به كار مي رود .

 

نمونه يك

    Text Input Control

   

   

    First name: 

       
   

    Last name: 

   

ويژگي ها

در زير ليستي از ويژگي هاي برچسب < input>را براي ايجاد فيلد متن مي بينيد.

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل متن ورودي براي text تنظيم خواهد شد.
name
براي دادن نام به كنترلي استفاده مي شود كه قرار است براي تشخيص به سرور ارسال شود و مقدار بگيرد.
value
مي تواند براي ارائه ي يك مقدار اصلي در داخل كنترل استفاده شود.
size
اجازه مي دهد تا عرض كنترل متن ورودي را متناسب با كاراكترها تعيين كنيد.
maxlength
اجازه مي دهد تا حداكثر تعداد كاراكترهايي را كه يك كاربر مي تواند در يك تكست باكس وارد كند، مشخص كنيد.

كنترل هاي پسورد ورودي

اين كنترل نيز يك كنترل تك خطي مي باشد، اما به محض اينكه كاربر كاراكترها را وارد مي كند، آنها را مي پوشاند. اين ها نيزبا استفاده از برچسب < input> مربوط به HTML ايجاد مي شوند، اما نوع ويژگي با عنوان password تنظيم ميشود.


 مثال:

در اينجا مثالي از ورودي تك خطي پسوورد مي بينيد كه براي گرفتن پسورد كاربر استفاده مي شود.

 

نمونه دو

ويژگي ها

در زير ليست مربوط به ويژگي هاي برچسب < input>را براي ايجاد فيلد پسوورد مي بينيد.

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي پسوورد، براي password تنظيم خواهد شد.
name
براي نام گذاري كنترلي استفاده مي شود كه براي تشخيص وگرفتن مقدار به سرور فرستاده مي شود.
value
براي ارائه ي يك مقدار اوليه در داخل كنترل استفاده مي شود.
size
اجازه مي دهد تا عرض كنترل متن ورودي را با كاراكترها تعيين كنيد.
maxlength
اجازه مي دهد تا حداكثر تعداد كاراكترهايي را كه يك كاربر مي تواند در يك تكست باكس وارد كند، تعيين كنيد.

كنترل هاي متن ورودي چند خطي

زماني استفاده مي شود كه يك كاربر بايد جزئياتي را ئارد كند كه بيشتر از يك جمله مي باشند. كنترل هاي ورودي چند خطي با استفاده از برچسب < textarea> ايجاد ميشوند.


 مثال:

در اينجا مثالي را مي بينيد از يك ورودي متن چند خطي كه براي ارائه ي توصيفات آيتم استفاده مي شود.

 

نمونه سه

 

ويژگي ها

در زير ليستي از ويژگي هاي برچسب < textarea> ارائه شده اند.

 

Attribute
Description
name
براي نامگذاري كنترلي استفاده مي شود كه به سرور ارسال مي شود تا تشخيص داده شده و مقدار بگيرد.
rows
تعداد رديف هاي area box مربوط به متن را نشان مي دهد.
cols
تعداد ستون هاي area box مربوط به متن را نشان مي دهد.

كنترل چك باكس

چك باكس ها زماني استفاده مي شوند كه بيشتر از يك گزينه قرار است انتخاب شود. آنها نيزبا استفاده از برچسب < input>ايجاد مي شوند، اما نوع ويژگي به checkbox تنظيم مي شود.


 مثال:

در اينجا مثالي از كد HTML را مشاهده مي كنيد براي يك فرم با دو چك باكس.

 

نمونه چهار

در زير ليستي از ويژگي هاي برچسب < checkbox> را مي بينيد:

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي چك باكس با checkbox كنترل خواهد شد.
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور ارسال مي شود.
value
مقداري كه اگر چك باكس انتخاب شود، استفاده خواهد شد.
checked
اگر بخواهيد آن را به طور پيش فرض انتخاب كنيد، با checked تنظيم مي شود.

كنترل دكمه ي راديو

دكمه هاي راديو زماني استفاده ميشوند كه بين چندين گزينه تنها يك گزينه بايد انتخاب شود. اين كنترل ها نيز با برچسب < input> ايجاد ميشوند، اما نوع ويژگي با radio تنظيم مي شود.


 مثال:

در اينجا مثالي از كد HTML مي بينيد براي يك فرم با دو دكمه ي راديو.

 

نمونه پنج

ويژگي ها

در زير ليستي از ويژگي هاي دكمه ي راديو را مي بينيد.

 

Attribute
Description
type
نوع كنترل ورودي را نشان مي دهد و براي كنترل ورودي چك باكس با عنوان radio تنظيم مي شود.
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور ارسال مي شود.
value
مقداري كه radio box انتخاب شود، استفاده خواهد شد.
checked
اگر مي خواهيد آن را به عنوان پيش فرض استفاده كنيد، به checked تنظيم كنيد.

كنترل Select Box

يك Select Boxكه منوي رو به پايين نيز ناميده مي شود، گزينه اي را براي ارائه ي گزينه هاي مختلف به شكل يك ليست رو به پايين ارائه مي دهد، كه كاربر مي تواند از آن يك يا بيشتر از يك گزينه را انتخاب كند.


 مثال:

در اينجا مثالي از كد HTML براي يك فرم با يك جعبه ي رو به پايين مي بينيد.

 

نمونه شش

در زير ليستي از ويژگي هاي برچسب < select> را مي بينيد.

 

Attribute
Description
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور انتقال مي شود.
size
براي نمايش يك ليست باكس اسكرولينك استفاده مي شود.
multiple
اگر روي multiple تنظيم شده باشد، به كاربر اجازه مي دهد تا چند آيتم را از منو انتخاب كند.

در زير ليستي از ويژگي هاي مهم برچسب < option> ارائه شده است.

 

Attribute
Description
value
اگر در سلكت باكس يك گزينه انتخاب شده باشد، اين مقدار استفاده خواهد شد.
selected
مشخص مي كند كه اين گزينه رد زمان بارگذاري صفحه، بايد گزينه ي انتخابي باشد.
label
يك روش جايگزين براي برچسب دار كردن گزينه ها.

فايل آپلود باكس

اگر مي خواهيد به كاربر اجازه دهيد تا فايلي را روي وب سايت شما آپلود كند، به يك كنترل فايل آپلود احتياج خواهيد داشت، كه Select Boxنيز ناميده مي شود. اين ويژگي با استفاده از برچسب < input> نيز ايجاد مي شود، اما نوع ويژگي با file تنظيم مي شود.


 مثال:

در اينجا مثالي را مي بينيد از كد HTML براي يك فرم با يك فايل آپلود باكس.

 

نمونه هفت

ويژگي ها

در زير ليستي از ويژگي هاي فايل آپلود باكس را مي بينيد.


Attribute
Description
name
براي نامگذاري كنترلي استفاده مي شود كه براي تشخيص و گرفتن مقدار به سرور انتقال مي شود.
accept
نوع فايل هايي را كه سرور مي پذيرد، تعيين مي كند.

كنترل هاي دكمه

راه هاي مختلفي براي ايجاد دكمه هاي قابل كليك شدن وجود دارد. شما با استفاده از برچسب < input> و با تنظيم نوع ويژگي آن به button دكمه هاي قابل كليك شدن ايجاد كنيد. نوع ويژگي مي تواند مقادير زير را بگيرد.


Type
Description
submit
دكمه اي را ايجاد مي كند كه به طور خودكار يك فرم را مي پذيرد.
reset
دكمه اي را ايجاد مي كند كه به طور خودكار كنترل هاي فرم را به مقادير اوليه ي خود بازمي گرداند.
button
دكمه اي را ايجاد مي كند كه براي اجراي اسكريپت كاربر، زماني كه كاربر آن دكمه را كليك مي كند، استفاده مي شود.
image
يك دكمه ي قابل كليك شدن ايجاد مي گند، اما ما مي توانيم از يك تصوير به عنوان زمينه ي دكمه استفاده كنيم.
 مثال:

در اينجا مثالي از كد HTML براي يك فرم با سه نوع دكمه را مي بينيد.


نمونه هشت

كنترل هاي مخفي شده ي فرم

كنترل هاي مخفي شده فرم براي پنهان كردن داده در داخل صفحه اي استفاده مي شوند كه بعدا مي توانند به سرور ارسال شوند. اين كنترل در داخل كد مخفي شده و روي صفحه ي حقيقي ظاهر نمي شود. براي مثال فرم مخفي شده ي زير براي حفظ شماره ي صفحه ي جاري استفاده مي شود. وقتي كه كاربر روي next page كليك كند، مقدار كنترل مخفي شده به سرور وب ارسال شده و در آنجا تصميم خواهد گرفت كه بر اساس انتقال صفحه ي جاري، كدام صفحه نمايش داده خواهد شد.


 مثال:

در اينجا مثالي از كد HTML براي نمايش كاربرد كنترل مخفي شده مي بينيد.


نمونه نه

جهت مشاهده نمونه مثال ها برروي دوره آموزش طراحي سايت كليك نماييد.

تا كنون نظري ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در رویا بلاگ ثبت نام کرده اید می توانید ابتدا وارد شوید.