|
آموزش جامع ساخت فرم های HTML تعداد بازدیدvisits : 785
|
|||||||||
erfan-pwd
|
آموزش جامع ساخت فرم های HTML به دلیل سوالات مکرر در رابطه با فرم های تماس با ما موجود در سایت و با توجه به اینکه بسیاری از کاربران به زبان نشان گذاری HTML آشنایی کافی ندارند تصمیم گرفتیم آموزش جامعی برای شما ایجاد کنیم تا در اون فرم‌های HTML رو به طور کامل برای شما توضیح بدیم. بدون شک تمام افرادی که از اینترنت استفاده می کنند روزانه چند باری از فرم ها استفاده می کنند و با آن ها سر و کار دارند از فرم ساده ای مثل جستجوی گوگل گرفته تا فرم های پیچیده ی ثبت نام در سایت ها و … حال با هم بررسی می کنیم این فرم ها چگونه ایجاد می شود و چه تگ ها و خصوصیت هایی در آنها بکار گرفته می شوند تا ما آنها را در صفحات وب اینگونه مشاهده می کنیم!؟ ایجاد یک فرم برای ایجاد یک فرم باید از تگ شروع فرم یعنی استفاده کنیم.که خود این تگ دارای خصوصیت هایی می باشد که بدون آن ها یک فرم فقط جنبه ی نمایشی پیدا می کند و در واقع هیچ ارزشی نخواهد داشت. مشخصه ی action : توسط این مشخصه می توانیم اطلاعات یک فرم را به صفحه ی پردازشی مانند یک صفحه ی php و یا asp ارسال نماییم تا اطلاعات تکمیل شده بررسی شود و کارهای لازم بر روی آن ها اعمال شود. مشخصه ی method: توسط این مشخصه می توانید نحوه ی ارسال اطلاعات را مشخص نمایید که دو مقدار post و get را دریافت می کند. تفاوت این دو مقدار در این است که مقدار post به صورت امن ارسال می شود و توسط کاربر دیده نمی شود و اطلاعات طولانی را در بر می گیرد ولی مقدار get علاوه بر اینکه توسط کاربر قابل مشاهده است از نظر اندازه ی اطلاعات نیز محدود می باشد برای مثال هنگامی که از مقدار get استفاده کنید آدرس به صورت زیر خواهد بود: در مثال فوق مقدار متغیر email توسط get ارسال شده است و کاربران قادر می باشند ایمیل (یا مقدار متغیر) را مشاهده نمایند! خوب با این وجود تگ شروع یک فرم به این صورت خواهد بود : البته مشخصه های دیگری نظیر name,id و class و … هم در فرم استفاده می شود که کاربرد های خاصی دارند. فیلد ها هر فرم دارای بخشی است که توسط آن میتوان اطلاعاتی را وارد کرد ، یکی از این بخش ها می تواند به صورت فیلدهای متنی باشد که می توانیم داخل آنها مطالبی را بنویسیم مانند فیلدهای نام و نام خوانوادگی و ایمیل و یا به صورت دکمه های رادیویی یا دکمه های انتخاب و منو های باز شونده و… برای ایجاد این چنین فیلد هایی از تگ هایی استفاده می کنیم که با هم بررسی خواهیم کرد ولی برخی خصوصیات مهم در همه ی آنها مشترک می باشند که عبارتند از: مشخصه ی name : توسط این مشخصه نام فیلد را مشخص می کنیم تا توسط این نام بتوانیم در صفحه ی پردازش آن را از سایر فیلدهای یک فرم مجزا کنیم. مشخصه ی type : توسط این مشخصه نوع فیلد را مشخص می کنیم که مثلا این فیلد به صورت متن قابل مشاهده باشد و یا به صورت رمزعبور یا دکمه ی رادیویی و …مقادیری که توسط این مشخصه دریافت می گردند شامل text,password,radio,hidden,submit,reset,button,checkbox,file و image می باشند. مشخصه ی value : می توان توسط این مشخصه میزان پیشفرضی برای اطلاعات یک فرم تعریف کرد. و برخی مشخصه های دیگر که بنا به کاربرد ذکر خواهد شد. فیلدهای متنی برای ورود اطلاعات به صورت متنی از تگ استفاده می کنیم و مشخصه ها را بر حسب نوع فیلد وارد می کنیم به عنوان مثال می خواهیم یک فیلد برای وارد کردن نام کاربر ایجاد کنیم : توجه کنید در تگ فوق مقدار مشخصه ی type برابر text قرار داده شده است چرا که می خواهیم یک متن را دریافت کنیم.همچنین می توانیم از متغیر size برای تعیین اندازه ی این فیلد استفاده کنیم که یک مقدار عددی را دریافت می کند. نکته ی دیگر در مورد مقدار دریافت شده توسط مشخصه ی name می باشد که می توانید آن را به هر نام دلخواهی اختصاص دهید که ما در اینجا آن را naam قرار دادیم ، شما می توانید آن را برابر esm , name و یا هرچیز دیگری قرار دهید ولی توجه کنید این نام نباید با نام فیلد های دیگر یکسان باشد.برای دریافت ایمیل ، وبسایت ، و هرگونه متنی می توانید از این تگ استفاده کنید. فیلدهای پسورد فیلدهای رمزعبور نیز دقیقا مانند فیلدهای متنی می باشند با این تفاوت که متن تایپ شده در آن ها به صورت ستاره و یا دایره های توپر مشاهده می شود. تنها کافی است در تگ فوق میزان مشخصه ی type را برابر password قرار دهید. برای مثال : فیلدهای مخفی این گونه فیلد ها در واقع انتخاب یا دکمه ای برای کاربر نمایش نمی دهند و برای ارسال اطلاعات ثابت استفاده می شود بدون اینکه کاربر از آنها اطلاعی داشته باشد.مثلا شما یک فرم با موضوع “فرم وام” در سایت خود قرار داده اید و نمی خواهید که کاربر موضوع را مشاهده کند در این هنگام از این نوع فیلد ها استفاده می کنیم.برای مثال : دکمه های رادیویی دکمه های رادیویی به دکمه های اطلاق می شود که تنها یکی از گزینه ها را می توانید انتخاب کنید و نه بیشتر!این دکمه ها به صورت دایره های کوچکی در صفحه مشاهده می شوند.این نوع فیلد ها فرق کوچکی با نمونه های متنی دارند که با مشاهده ی مثال زیر به آن ها پی خواهید برد : در مثال زیر به از کاربر می خواهیم رنگ مورد علاقه اش را انتخاب کند و گزینه های زیر را در اختیار وی قرار می دهیم: زرد سبز مشکی در واقع ما سه رنگ زرد ، سبز و مشکی را برای کاربر قابل انتخاب کردیم ولی تنها یک رنگ قابلیت انتخاب شدن را دارد! حتما متوجه این نکته شده اید که در تمام تگ های فوق مقداری که متغیر name دریافت کرده است یکسان و برابر با هم می باشند و این نکته برای درست کار کردن دکمه های رادیویی ضروری استدکمه های انتخاب چندتایی برخلاف دکمه های رادیویی که تنها یک گزینه قابلیت انتخاب شدن را دارد در دکمه های انتخاب چندتایی که کاربر آنها را به شکل مربع های کوچک توخالی مشاهده می کند چند گزینه قابلیت انتخاب شدن را دارا می باشند.این دکمه ها مقدار checkbox را دریافت می نمایند.در مثال زیر از کاربر می خواهیم زبان هایی که به آنها آشنایی دارد را انتخاب نماید: فارسی فرانسوی انگلیسی همچنین می توانید یک چک باکس را به طور پیشفرض در حالت انتخاب قرار دهید: فارسی منوهای بازشونده منوهای باز شونده یا DropDown menus همان منو هایی هستند که لیستی از موارد را برای شما نمایش می دهند و شما می توانید یک گزینه و در برخی موارد بیش از یک گزینه را انتخاب نمایید.به عنوان مثال در لیست عضویت سایت خود می خواهید لیست شهرستان های ایران را قرار دهید تا کاربر یکی از آنها را انتخاب نماید. به مثال زیر توجه فرمایید: نکته : برای منوهای باز شونده برعکس سایر موارد از تگ استفاده می کنیم. تهران اصفهان شیراز در منوی بالا کاربر تنها مجاز است یکی از استان ها را انتخاب نماید و در صورتی که بخواهیم یک استان مثلا شیراز را استان پیشفرض قرار دهیم مشخصه ای مانند زیر به آن اضافه می کنیم: شیراز حال اگر بخواهیم لیستی داشته باشیم که کاربر بتواند بیش از یک مورد را انتخاب کند کافی است مشخصه ای به تگ select اضافه کنیم ، مانند نمونه زیر : تهران اصفهان شیراز حال مشاهده می کنید که کاربر می تواند از لیست بیش از یک مورد را انتخاب نماید. فیلد های متن طولانی اگر فرم های ارسال نظر را مشاهده کرده باشید بخشی وجود دارد که می توانید نظر خود را در آن وارد کنید و اندازه ی آن از سایر فیلد ها بزرگتر می باشد. به این نوع فیلد ها textarea یا محیط متن گفته می شود . این نوع فیلد ها نیز دارای تگ اختصاصی خود می باشند و مشخصه های ویژه ی خود را دارند. اگر در مثال فوق دقت کرده باشید دو مشخصه ی cols و rows جدید می باشند.این دو مشخصه مقادیر عددی را دریافت می کنند و برای تعیین اندازه ی فیلد مورد استفاده قرار می گیرند.cols مقدار پهنای فیلد را کنترل می کند و rows مقدار ارتفاع آن را. دکمه های ثبت و ازنو کردن فرم ها در انتهای هر فرم دکمه هایی وجود دارد که با فشردن آنها یا فرم پاکسازی می شود و یا اینکه اطلاعات فرم برای سرور و صفحه ی پردازش ارسال می شود.نحوه ی قرار دادن این دکمه ها نیز مانند مثال های فوق می باشد با این تفاوت که مقدار مشخصه ی type برابر با reset و یا submit قرار داده می شود: دقت کنید در تگ های فوق از مشخصه ی name استفاده نکرده ایم! خوب تا اینجا یاد گرفتیم که چگونه یک فرم و اجزای مختلف آن را در سایت به صورت HTML نمایش دهیم و انتظار می رود پس از مطالعه ی این مقاله بتوانید فرم های ساده تا پیچیده را به سادگی طراحی نمایید.برای تزیین فرم نیز باید از CSS کمک بگیرید که آموزش آن به زودی در سایت قرار داده خواهد شد. در انتها فراموش نکنید تگ فرم را ببندید! منبع : سایت علمی آموزشی عصرعلم
http://www.uploadtak.com/images/h3415_learn.swf |
||||||||
| جمعه 04 اسفند 1391 - 15:14 |
|
||||||||
erfan-pwd
|
پاسخAnswer 1 : آموزش جامع ساخت فرم های HTML یعنی هیچ کس خوشش نیومد http://www.uploadtak.com/images/h3415_learn.swf |
||||||||
| جمعه 04 اسفند 1391 - 15:37 |
|
benben
 
|
پاسخAnswer 2 : آموزش جامع ساخت فرم های HTML چرا خوشمون میاد ولی کی حال داره این همه رو بخونه حداقل خودت می خوندی خلاصشو میذاشتی!!! یاد روزای جوونی بخیر
کدستان کجایی...؟! My Language: Html5 Css3 Android ++Learning PHP & c |
||||||||
| جمعه 04 اسفند 1391 - 16:10 |
|
erfan-pwd
|
پاسخAnswer 3 : آموزش جامع ساخت فرم های HTML ببخشید داش بنیامین برای بار های دیگه همین کارو میکنم http://www.uploadtak.com/images/h3415_learn.swf |
||||||||
| جمعه 04 اسفند 1391 - 16:45 |
|
desperado
|
پاسخAnswer 4 : آموزش جامع ساخت فرم های HTML خداییش خودت خوندی؟ 
|
||||||||
| جمعه 04 اسفند 1391 - 18:37 |
|
erfan-pwd
|
پاسخAnswer 5 : آموزش جامع ساخت فرم های HTML نه! حال نداشتم http://www.uploadtak.com/images/h3415_learn.swf |
||||||||
| جمعه 04 اسفند 1391 - 18:46 |
|
vivaforum
 
|
پاسخAnswer 6 : آموزش جامع ساخت فرم های HTML بابا کاش یه خورده ادیتش میکردی! آدم توش گم بشه ییدا نمیشه 
دوستان کسانی که منو میشناسید!من همون t97 هستم دوستان دیگه با این اکانت آن نمیشم! با این اکانت بای بای کردم! متسلط به فتوشاب و کورل دراو طراح بنر ، هدر ، لوگو و ... متسلط به Html تقریبا میشه گفت css بلدم سازنده اتوران و نرم افزار های ساده سئو کار 100% قالب وبلاگ مترجم تمامی سیستم های وبلاگدهی [b]فارسی ساز قالب های وردیرس[ |
||||||||
| جمعه 04 اسفند 1391 - 18:49 |
|
farbod
 
|
پاسخAnswer 7 : آموزش جامع ساخت فرم های HTML حیف که اینجا بخش پی اچ پی نداره. اما بیخی (بیخیال) من یه فرم براتون میسازم. پ.ن : فرمی که من می سازم با PHP (پی اچ پی) هستش (یعنی برای اجراش باید هاست لینوکس یا هست لوکال داشته باشین) خوب فرمی که من امروز قراره بسازم، مربوط میشه به فرم جمع دو عدد! خوب ابتدا میزم سراغ استایلش : *** لطفا برای یادگیری، کد هارو کپی پیست نکنید *** کد: @charset "utf-8";برای CSS فعلا تا اینجا داشته باشید! جای اون (images/bg.png) آدرس عکستونو بنویسید (که میشه بکگراند صفحه) خوب؛ حالا ظاهر فرم؛ (اچ تی ام ال) کد: <form method="post" action="">() بزارید اینجا رو توضیح بدم () // خوب این فرم اگه جای درستی قرار بگیره میتونه دو تا مقدار first و second رو به همین صفحه ارسال کنه! پ.ن.2 : پی اچ پی هیچ کاربردی در وبلاگ ندارد! خوب حالا سراغ پی اچ پی کد: <?php خوب اینم دیگه اونقدر گنگ نیست فقط میاد فیرست و سکند رو باهم جمع میکنه! خوب دیگه تموم شد (شما براحتی اولین صفحه پی اچ پی خود را ساختید!) با تشکر |
||||
| دوشنبه 14 اسفند 1391 - 18:24 |
|
behradx
|
پاسخAnswer 8 : آموزش جامع ساخت فرم های HTMLنقل قول از farbod خب شما خودت از کجا کپی زدی؟ آدرسشو بده ما هم بریم یاد بگیریم.. |
||||||||
| دوشنبه 14 اسفند 1391 - 19:25 |
|
