فرم هاي html

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

ويژگي هاي فرم

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

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

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

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

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

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

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

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

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

 مثال:

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

   

ويژگي ها

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

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

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

 مثال:

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

ويژگي ها

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

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

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

 مثال:

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

ويژگي ها

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

كنترل چك باكس

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

 مثال:

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

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

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

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

 مثال:

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

ويژگي ها

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

كنترل Select Box

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

 مثال:

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

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

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

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

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

 مثال:

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

فونت ها

فونت ها نقش مهمي در زيبا ساختن و خواناتر كردن وب سايت بازي مي كنند. ظاهرو رنگ فونت به طور كامل بستگي به كامپيوتر و مرورگري دارد كه استفاده مي شود، اما شما مي توانيد از برچسب < font>در HTML براي افزودن استايل، سايز و رنگ به متن خود در وب سايت استفاده كنيد. مي توانيد از يك برچسب< basefont> براي تنظيم تمام متن خود به اندازه، ظاهر و رنگ يكسان استفاده كنيد.
برچسب فونت داراي سه ويژگي به نام هاي size، color و face مي باشد كه فونت شكا را به دلخواه در مي آورد. براي تغيير هركدام از ويژگي هاي فونت در هر زماني در صفحه ي وب خود، به سادگي از برچسب < font> استفاده كنيد. متني كه دنبال مي كند، تغيير يافته با قي مي ماند تا زماني كه شما آن را با < /font> برچسب ببنديد. شما مي توانيد يكي از ويژگي ها يا همه ي ويژگي هاي داخل برچسب < font> را تغيير دهيد.

تنظيم اندازه ي فونت

شما مي توانيد با استفتده از ويژگي size اندازه فونت محتوا را تنظيم كنيد. دامنه ي مقادير قابل قبول از 1 (كوچكترين) تا 7 (بزرگترين) مي باشد. اندازه ي فونت پيش فرض 3 مي باشد.

 مثال:

اگر هيچكدام از فونت هاي ارائه شده نصب نشده باشند، بنابراين فونت پيش فرض Times New Roman نمايش داده خواهد شد.

تنظيم رنگ فونت

شما مي توانيد با استفاده از ويژگي color هر رنگي رابراي فونت تنظيم كنيد. شما مي توانيد رنگ مورد نظر خود را يا با استفاده از نام رنگ و يا با استفاده از كد هگزادسيمال براي آن رنگ تعيين كنيد.

 مثال:

عنصر < basefont>

انتظار مي رود كه عنصر < basefont> يك اندازه، رنگ و ظاهر پيش فرض براي هر بخشي از داكيومنت كه در برچسب < font>قرار نمي گيرند، تنظيم كند. شما مي توانيد از عناصر < font>استفاده كنيد تا تنظيمات < basefont> را انجام دهيد.
برچسب < basefont> همچنين ويژگي هاي رنگ، اندازه و ظاهر را مي گيرد و با دادن مقدار بيشتر از 1+ براي فونت هاي بزرگتر و كمتر از 2- براي فونت هاي كوچكتر، تنظيمات فونت مربوطه را پشتيباني مي كند.

 مثال:

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

رنگ در html-آموزش html 

رنگهاي HTML

رنگ ها براي دادن يك ظاهر و احساس خوب به وب سايت شما بسيار مهم مي باشند. شما مي توانيد رنگ ها را روي لايه ي صفحه با استفاده از برچسب < body>مشخص كنيد، يا مي توانيد رنگ ها را براي برچسب هاي مجزا با استفاده از ويژگي bgcolor مشخص كنيد.
برچسب< body>داراي ويژگي هاي زير مي باشد كه مي تواند براي تنظيم رنگ هاي مختلف استفاده شود.

• bgcolor رنگي را براي زمينه ي صفحه تنظيم مي كند.
• text رنگي را براي متن تنظيم مي كند.
• alink رنگي را براي لينك هاي فعال يا انتخاب شده تنظيم مي كند.
• link رنگي را براي متن لينك شده تنظيم مي كند.

رنگي را براي لينك هاي بازديد شده تنظيم مي كند- يعني براي متن لينك شده كه روي آن كليك كرده ايد.

روش هاي كدگذاري رنگ HTML

در زير سه روش متفاوت براي تنظيم رنگ در صفحه ي وب خود مشاهده مي كنيد:

• Color names - مي توانيد نام رنگ ها را به طور مستقيم تعيين كنيد، به عنوان مثال سبز، قرمز، آبي و غيره.
• Hex codes - يك كد شش رقمي كه نشان دهنده ي مقدار آبي، قرمز و سبز سازنده ي رنگ، مي باشد.
• Color decimal or percentage values- اين مقدار با استفاده از ويژگي rgb( ) تعيين مي شود.

اكنون اين روش هاي رنگ گذاري را يكي يكي بررسي خواهيم كرد.

رنگ هاي HTML – نام رنگ

مي توانيد براي تنظيم رنگ متن يا زمينه به طور مستقيم از نام رنگ استفاده كنيد. W3C ليستي از 16 رنگ پايه را دارد كه توسط يك اعتباز سنج HTML ارزيابي مي شود، اما نام بيشتر از 200 رنگ مختلف وجود داردكه توسط مرورگرهاي مهم پشتيباني مي شوند.

16 رنگ استاندارد W3C

 مثال:

در اينجا مثال هايي را ميبينيد از تنظيم زمينه ي يك برچسب HTML به وسيله ي نام رنگ.

 

Use different color names for for body and table and see the result.

رنگ هاي HTML – كدهاي Hex

آموزش html css

هگزادسيمال يك نمايش 6 رقمي از يك رنگ مي باشد. دو رقم اول يعني RR نمايانگر رنگ قرمر (Red) مي باشند، دو رقم بعدي (GG) مقدار سبز (green) را نشان مي دهند و آخرين دو رقم (BB) نيز مقدار آبي (blue) را نشان مي دهند.
هر كد هگزادسيمال به وسيله ي يك علامت # دنبال مي شود. در ادامه رنگ هاي مورد استفاده در نشانه گذاري هگزادسيمال را مشاهده مي كنيد.

در زير مثال هايي را مي بينيند از تنظيم زمينه ي يك برچسب HTML به وسيله ي كد رنگ در هگزادسيمال.

Use different color code for for body and table and see the result.

در زير ليستي از 216 رنگ را مشاهده مي كنيد كه تصور مي شود سالم ترين و مستقل ترين رنگ هاي كامپيوتر باشند. اين رنگ ها از كد هگزاي 000000 تا FFFFFF متفاوت مي باشند و توسط همه ي كامپيوترهاي داراي پالت رنگ 256 تايي پشتيباني مي شوند.

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

background در html

آموزش طراحي سايت 

به طور پيش فرض رنگ زمينه ي صفحه ي وب شما سفيد مي باشد. ممكن است اين زمينه را دوست نداشته باشيد، اما نگراني وجود ندارد. HTML دو روش مناسب زير را ارائه مي دهد تا زمينه ي صفحه وب خود را به دلخواه بياراييد.

• زمينه ي HTML با رنگ ها.
• زمينه ي HTML با تصاوير.

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

زمينه ي HTML با رنگها

ويژگي bgcolor براي كنترل زمينه ي يك عنصر HTML، به ويژه بدنه ي صفحه و زمينه ي جدول، استفاده مي شود. در زير تركيب استفاده از bgcolor را با هر برچسب HTML مي بينيد.

< tagname bgcolor="color_value" ...>

اين color- value مي تواند به هركدام از فرمت هاي زير ارائه شود.

مثال:

در اينجا مثالي را مي بينيد از تنظيم زمينه ي يك برچسب HTML.

زمينه ي HTML با تصاوير

آموزش html css

ويژگي background همچنين مي تواند براي كنترل زمينه ي يك عنصر HTML، به ويژه بدنه ي صفحه و زمينه هاي جدول، استفاده شود. شما مي توانيد يك تصوير را به عنوان زمينه ي صفحه و يا جدول HTML خود استفاده كنيد. در زير تركيب استفاده از ويژگي background را با هر عنصر HTML مي بينيد.

< tagname background="Image URL" ...>

متداول ترين فرمت هاي مورد استفاده ي تصوير عبارتند از JPEG، PNG و GIF.

 مثال:

در اينجا مثال هايي را از تنظيم تصوير به عنوان زمينه ي جدول مشاهده مي كنيد.

زمينه هاي طرح دار و شفاف

شما ممكن است الگوها و زمينه هاي شفاف بسياري را در وب سايت هاي نختلف ديده باشيد. اين امر به راحتي و با استفاده از تصاوير طرح دار و شفاف در زمينه قابل دستيابي مي باشد. توصيه مي شود در هنگام ايجاد تصاوير طرح دار يا شفاف GIF يا PNG، از كوچكترين ابعاد ممكن آنها استفاده كنيد، حتي به كوچكي 1x1 براي جلوگيري از بارگذاري آهسته.

 مثال:

در اينجا مثالي از تنظيم يك الگوي زمينه براي يك جدول را مشاهده مي كنيد.

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