آموزش ساختن فرم HTML با استفاده از تگ Form مسترکد

با توجه به تجربه‌ای طولانی در عرصه برنامه‌نویسی و مواجهه با چالش‌های گوناگون، به این نکته پی بردیم که نبود منابع آموزشی کاربردی و عمیق در سطح حرفه‌ای، یکی از موانع اصلی رشد برنامه‌نویسان در کشورمان است. از این رو، ما در باگتو تصمیم گرفتیم تا با ارائه دوره‌های آموزشی جامع و متنوع در زمینه‌های مختلف .NET، گامی مؤثر در جهت افزایش کیفیت مهارت‌های فنی برنامه‌نویسان و بهبود استانداردهای نرم‌افزاری ایرانی برداریم. از  text برای ایجاد فیلدهای متنی (متن کوتاه) استفاده می شود. از  image برای ایجاد یک دکمه ارسال فرم (که خود از یک تصویر به عنوان پس زمینه استفاده می کند) استفاده می شود. برای ایجاد این کادر باید مقدار شناسه type  در input  را برابر با password  قرار دهیم.

باعث می شود تا کاربر نتواند تغییری در متن وارد شده ایجاد کند. Self  – بیان می کند که صفحه action  در فریمی که فرم قرار دارد باز می شود. با ما در بهترین آموزشگاه طراحی سایت همراه باشید ، ما در کنار شما هستیم. مثال بالا دو دکمه دارای تایپ های submit و reset را نشان میدهد. در مثال بالا، تنها سه تا از انتخاب ها به نمایش در می آیند و برای دیدن سایر انتخاب ها لازم است که در بین آپشن ها اسکرول کنید. طبعا میتوانید تعداد آیتم های به نمایش در آمده را بر اساس نیاز خود، کم و زیاد کنید.

ست شدن این مقدار باعث می شود اطلاعاتی که در فرم وارد می شود در نوار آدرس مرورگر نمایش داده شود. این خصوصیت برای زمانی که در فرم اطلاعات محرمانه ای وجود ندارد مفید است. به عنوان مثال اگر همین الان در قسمت جستجوی سایت وبسافت 3 کلمه «آموزش طراحی قالب وردپرس» را جستجو کنید URL سایت به شکل زیر در می آید. حالا که تگ form در html را ایجاد کردید وقت آن رسیده که یکسری باکس داخل آن ایجاد کنید و اطلاعات مورد نیاز را از کاربران دریافت کنید. مثلا یک باکس برای نام، یک باکس برای ایمیل و … ایجاد کنیم و در آخر یک دکمه برای ارسال فرم در نظر بگیریم.

Action  مشخص کننده صفحه ای است که اطلاعات فرم باید به آن ارسال شود.آدرس صفحه مورد نظر باید به عنوان مقدار این شناسه قرار گیرد. پس از اینکه کاربر اطلاعات را وارد و دکمه ارسال را کلیک کرد، صفحه action برای پردازش اطلاعات باز می شود. وقتی شما یک فرم ایجاد میکنید، فارق از اینکه چه نوع فرمی ایجاد کرده اید، باید صفحه ای در اختیار داشته باشید که بتواند اطلاعات فرم را پردازش کند. آدرسی که به صفت action فرم نسبت میدهیم دقیقا هدفش انجام همین کار است. بنابراین چه یک فرم تماس ساده ایجاد میکنید و چه یک فرم پیچیده، لازم است که صفحه ای که میتواند اطلاعات این فرم را مدیریت کرده، عملیات لازم را روی آنها انجام داده و پاسخ های لازم را به کاربر و … ارسال کند، در اختیار داشته باشید. در غیر این صورت یک فرم html تنها یک نمای ظاهری است که به تنهایی قادر به انجام کاری نخواهد بود.

چک باکس ها به کاربران اجازه انتخاب چندین گزینه از بین آپشن های از پیش تعریف شده را می دهد. این دکمه با تگ و خصوصیت type و مقدار checkbox برای آن ساخته می شود. یکی از جذاب ترین موضوعات در طراحی صفحات وب، کار با فرم ها می باشد.

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

در آموزش امروز از مجموعه آموزش های طراحی سایت در آموزشگاه کامپیوتر پرتو ، به سراغ آموزش تگ form  HTML رفته ایم تا بدین وسیله یکی از بهترین ، مهم ترین و پرطرفدار ترین تگ های html  را با هم بیاموزیم. تقریبا تمام فرم ها ورودی متنی از کاربر می خواهند تا بتوانند اطلاعاتی مثل نام، ایمیل، رمزعبور و آدرس و اطلاعات دیگری را از آنها دریافت کنند. یک فرم HTML بخشی از سند است که شامل کنترل های تعاملی به منظور فعال سازی یک بخش برای دریافت و ارسال اطلاعات از کاربر به سمت وب سرور است. سپس این آیدی را به عنوان مقدار برای صفت for در تگ label مربوطه استفاده می کنیم تا هر وقت کاربر بر روی کلمه ی username کلیک کرد، فیلد متنی مربوط به آن فعال شود. همانطور که در تصویر مشاهده می‌کنید، نمونه کد ما به این شکل در مرورگر نمایش داده می‌شود، در نظر داشته باشید که برای نمایش متن بالای هر فیلد از یک عنصر دیگر به نام Label استفاده کرده‌ایم که در ادامه به آن نیز می‌پردازیم.

تگ noscript در HTML

دکمه ای را برای ارسال داده های فرم به یک کنترل کننده فرم (form-handler) تعریف می کند. عنصر برای کاربران صفحه خوان مفید است، زیرا وقتی کاربر روی عنصر ورودی تمرکز می کند، صفحه خوان برچسب را با صدای بلند می خواند. همچنین توجه داشته باشید که عرض پیش فرض یک فیلد ورودی 20 کاراکتر است. تمام عناصر مختلف فرم در فصل های بعدی آموزش طراحی سایت توسط موسسه آموزشی آتریا تحت عنوان (عناصر فرم HTML) پوشش داده شده است. یک فرم در html ، داده ها را از بازدید کننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی عملیات مورد نیاز را ، بر اساس دستور العمل تعریف شده در برنامه، روی داده ی مورد نظر انجام می دهد.

مثال ۱ – ست کردن GET

بااین روش کاربران می توانند تعداد نا محدودی کاراکتر را در سطرهای مختلف وارد کنند.بهتر است برای متن های طولانی از text area  استفاده کنیم تا کاربران کل متن خود را ببینند و بتوانند در صورت نیاز آن را ویرایش کنند. در این آموزش کار با فرم ها یا Forms در html به بررسی این فرم ها و چگونگی ایجاد آنها میپردازیم و اینکه چه تگ ها و خصوصیت هایی در آنها بکار گرفته می شوند تا در صفحات وب اینگونه مشاهده شوند. فرم ها شامل المان های خاصی به نام کنترل ها مثل باکس ورودی متن, باکس های چند انتخابی (checkbox) , دکمه های تک انتخابی (radio-button), دکمه ارسال (submit) و غیره است. زمانی فرم های HTML  به کار می آیند، که شما می خواهید برخی از داده ها را از بازدید کننده سایت جمع آوری کنید. برای مثال، در هنگام ثبت نام کاربر می خواهید اطلاعاتی مانند نام، آدرس ایمیل، کارت اعتباری و غیره را جمع آوری کنید.

صفت Action فرم ها در HTML

فرم را تکمیل و با سابمیت این فرم, اطلاعات را به سمت وب سرور برای پردازش ارسال می کند. اطلاعاتی که از طریق فرم‌ها جمع‌آوری می‌شود، می‌تواند به سرور ارسال شود و در آنجا پردازش شود. به عنوان مثال، یک فرم تماس با ما می‌تواند اطلاعاتی را که کاربر وارد کرده است به یک آدرس ایمیل ارسال کند.

عنصر از نوع "datetime-local" زمینه ورودی را ایجاد می کند که به کاربر اجازه می دهد تاریخ و همچنین ساعت محلی را در ساعت و دقیقه و بدون اطلاعات منطقه زمانی انتخاب کند. از این مقادیر به همراه تگ input برای ایجاد باکس های قابل تایید (چک باکس) استفاده می شود. این ورودی یک کادر یک سطری برای ورود متن فراهم می کند برای ساختن این کادر باید به شناسه type  تگ input مقدار text  را بدهیم. Method   get  برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. خوب، در اینجا دیگر تقریبا با تمامی عناصری که برای ساختن یک فرم HTML به آنها نیاز خواهید داشت، آشنا شده اید.

آموزش فرم ها در html

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

با استفاده از فرم‌ها می‌توانید تعامل کاربر با وبسایت را افزایش دهید. به عنوان مثال، یک فرم جستجو به کاربر اجازه می‌دهد تا به راحتی مطالب مورد نظر خود را پیدا کند. درکل وظیفه این صفت در فرم ها مشخص کننده نوع متد HTTP ارسالی ( GET یا POST ) در هنگام ارسال اطلاعات به سرور می باشد. تگ form همونطور که از اسمشم مشخصه با استفاده از اون میتونیم یک یا چندین فرم رو در یک صفحه ی وب ایجاد کنیم. نوع "tel" دارای اعتبار پیش فرض مانند ایمیل نیست ، زیرا الگوی شماره تلفن در سراسر دنیا متفاوت است. Reset برای ایجاد یک دکمه که با کلیک بر روی آن اطلاعات فیلدها به حالت پیش فرض برمی گردد کاربرد دارد،.

در بخش بعدی در مورد نحوه استفاده از iframe ها در صفحه وب را یاد می گیریم. امیدوارم در این بخش آموزش HTML , از ساخت فرم ها در HTML نهایت استفاده را برده باشید. انوع input هایی که بیشترین استفاده و کاربرد را دارند در بخش زیر توضیح دادیم. یک دوره مقدماتی و رایگان سئو که بسیار پربار و سرشار از تجربه مدرس و با کیفیت بالا تهیه شده تا بتوانید در زمان کمتری وب سایت را سئو کنید.

ویژگی for تگ باید برابر با ویژگی id عنصر باشد تا آنها را به یکدیگر متصل کند. انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم از آنها استفاده کنید. همینطور می توان با استفاده از ویژگی multiple امکان اینکه کاربر بتواند چند مورد را انتخاب کند فراهم کرد.

کنترل دکمه ارسال

در ادامه با هم یک فرم ساده ایجاد می کنیم تا بهتر با روند کار آشنا شوید. فرم بخشی از سند است که شامل کنترل هایی مانند فیلدهای متنی، فیلدهای رمز عبور، کادرهای انتخاب (چک باکس ها)، دکمه های رادیویی، دکمه ارسال، منوها و غیره می باشد. را ایجاد کرد، در زیر چند نمونه اولیه از نحوه تعریف و به کارگیری تگ input را ملاحظه می کنید. در این مقاله هدف ما آموزش تگ form در html بود که در همان ابتدای مقاله به صورت کامل به آن پرداختیم و یک فرم ساده هم ایجاد کردیم. در ادامه راجع استایل دهی و ارسال فرم هم بررسی هایی انجام شد و همچنین یک ویدیو آموزشی در ابتدای صفحه قرار دادیم تا بتوانید به راحتی و بدون هیچ مشکلی فرم خود را به صورت کامل ایجاد کنید.

توسط این مشخصه نوع فیلد را مشخص می کنیم که مثلا این فیلد به صورت متن قابل مشاهده باشد و یا به صورت رمزعبور یا دکمه ی رادیویی و …مقادیری که توسط این مشخصه دریافت می گردند . بدون شک تمام افرادی که وبگردی را تجربه کرده اند از فرم ها نیز استفاده کرده و با آن ها سر و کار دارند؛ از فرم ساده ای مثل جستجوی گوگل گرفته تا فرم های پیچیده ی ثبت نام در سایت ها و … . لطفا در ادامه با آموزش عناصر قابل استفاده در تگ Form در HTML با من همراه باشید. این دکمه با تگ و خصوصیت type و مقدار radio برای آن ساخته می شود. در جلسه قبلی آموزش HTML با نحوه ایجاد لیست ها در HTML آشنا شدیم.

برای انتخاب تنها یک گزینه از میان چند گزینه باید همه دکمه های رادیویی هم نام باشند. بهتر است از برچسب در فرم استفاده کنید، زیراکد را برای تجزیه کننده، مرورگر و کاربر راحتر و آسان تر می سازد. برای جمع آوری اطلاعات موردنیاز از بازدید کنندگان سایت، فرم ها ضروری هستند.. در ادامه آموزش فرم ها در html، به بررسی عناصر اصلی فرم می‌پردازیم. بصورت پیش فرض اگه از این متد استفاده نکنیم، فرم خودش خودکار متد GET رو انتخاب میکنه. این ابزار شبیه checkbox  است و برای انتخاب گزینه ها به کار می رود با این تفاوت که از بین گزینه های موجود تنها یکی را می توانیم انتخاب کنیم .

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

ورودی با فرم ها یا Forms در html

Input دارای صفت type است که در آن مقادیر متفاوتی می تواند قرار گیرد. در مقاله های بعدی با دیگر عناصر موجود در فرم ها آشنا می‌شویم و جزء به جزء هر فرم را بررسی می‌کنیم. یک فرم جدید ایجاد کنید و از نوع POST آن را تعیین کنید و عملکرد آن در صفحه اصلی میزفا باشد. خاصیت Method در فرم ها متد HTML فرم را که می‌تواند از دو نوع Get و Post باشد، مشخص می‌کند. در ادامه می‌خواهیم با خاصیت Method که یکی از مهم‌ترین خاصیت های ما در تگ Form هست آشنا شویم.

اگر روی تگ label کلیک کنید، روی کنترل مربوط به متن متمرکز خواهد شد. برای انجام این کار، باید صفت for در تگ label قرار گیرد و مقدار آن برابر با صفت id در تگ input باشد. برای اینکه یک مقدار پیشفرض (برای راهنمای کاربر) در باکس خود ایجاد کنیم از خاصیت placeholder استفاده می کنیم.

ما به وسیله label می توانیم متنی را در کنار input قرار دهیم که کابر بتواندتشخیص دهد که هر فیلد برای چه کاری است. نمونه بالا را که در Try it Yourself وب سایت W3Schools قرار دارد، اگر اجرا کنیم، متوجه می‌شویم که هیچ داده ای به صفحه ارسال نشده است. اگر فیلدی خاصیت name را نداشته باشد، دیتایی از آن عنصر ورودی به صفحه Action ما ارسال نمی‌شود. کنترل کننده فرم به طور کلی یک صفحه در سرور هستش که اسکریپت هایی برای پردازش اطلاعات یا داده های درون ورودی ها درونش وجود داره.

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

تگ form در html

در این مطلب از بلاگ کندو شما با اصول اولیه ساخت و استفاده از فرم‌ها در HTML به عنوان آموزش فرم ها در html آشنا خواهید شد. فرم ها در صفحات وب دارای یک صفت بنام action می باشند، که وظیفه این صفت ارسال اطلاعات وارد شده توسط کاربر به سمت سرور می باشد، یعنی کاربر اطلاعاتش رو وارد میکنه و سپس با زدن دکمه ثبت این اطلاعات به سرور سایت مورد نظر ارسال میشه. برای ارسال اطلاعات وارد شده در فرم به صفحه action  استفاده می شود.برای ساختن این دکمه باید در تگ input  مقدار شناسه type  را برابر با submit  قرار دهیم. در طراحی یک وب سایت بسته به نیاز برنامه نیاز است تا داده هایی را از کاربران دریافت کنیم. برای این منظور در طراحی سایت از فرم های HTML استفاده می کنیم. همانطور که مشاهده میکنید، در آدرس بالا میتوان مقدار firstname و lastname را به طور کامل مشاهده کرد.برعکس این حالت، زمانی که میخواهیم اطلاعات ارسالی در آدرس صفحه ی action مشخص نباشند، از متد POST استفاده میکنیم.

آشنایی با جئولوکیشن در HTML

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

عنصر در تگ Form

اگر قصد دارید کاربران سایت خود را حفظ کنید و ارتباط شما با مخاطبان تان یکطرفه نباشد به اهمیت و کاربرد تگ form در html پی می برید. بنابراین نیاز است که اهمیت این موضوع را درک کنید و آنها را برای سایت خود پیاده سازی کنید. در صورتی که اطلاعات فرم محرمانه نیستند می‌توانید ارسال فرم را با متد GET یعنی به کمک پارامترهایی در url انجام دهید در غیر اینصورت باید از متد post استفاده شود. برخلاف Get در صورت استفاده از مقدار Post دیگه اطلاعات ارسالی در نوار آدرس مرورگر نمایش داده نخواهد شد و از نظر امنیتی نیز این روش برای ارسال اطلاعات پیشنهاد میشود. عنصر"number" فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد مقدار عددی را وارد کند.

نظر درباره «آموزش فرم ها در HTML به زبان ساده»

برای غیر فعال کردن کادر متن استفاده می شود و کاربر نمی تواند متنی درون کادر بنویسد.مقدار آن را باید برابر با disabled قرار دهیم. یادمان رفته بود به این نکته اشاره کنیم که input نوعی با عنوان email هم دارد؟ خوب بله این تایپ را هم میتوانید به لیستتان اضافه کنید. این حالت یک radio button برای انتخاب یکی از چندین گزینه را نمایش می دهد. اگر می خواهید اطلاعاتی از بازدیدکنندگان سایت جمع آوری کنید، فرم های HTML مورد نیاز هستند. اگرچه این ورودی های خیلی شبیه به هم هستند اما ویژگی type به هرکدام از آنها معنا و مفهموم خاصی می دهد و تعریف می کند که هرکدام چه نوع محتوایی قرار است داشته باشد. به کمک آن می توان مشخص کرد که کاربر چه نوع محتوایی را درون ورودی باید قرار دهد.

در آینده در رابطه با دریافت اطلاعات از فرم از طریق php و پردازش آن نیز صحبت خواهیم کرد. Inputها می‌توانند فیلدهایی از نوع ورودی متنی باشند، چک لیست‌ باشند یا دکمه‌ی ارسال فرم را ایجاد کنند. مشخص نکردن name برای یک عنصر میتواند منجر به عدم ارسال اطلاعات این عنصر به صفحه ی action فرم و ناقص شدن اطلاعات دریافتی شود. بنابراین نسبت دادم نام به عناصری که در فرمتان قرار خواهید داد را فراموش نکنید.

ایجاد فرم در HTML

این عنصر به چندین راه نمایش داده می‌شود و بستگی به نوع صفت هایش دارد. یک فرم، داده ها را از بازدیدکننده سایت، دریافت می کند و سپس آن را به یک برنامه ی پشت صحنه (back-end)، مانند CGI، اسکریپت ASP  یا اسکریپت PHP و غیره ارسال می نماید. برنامه ی پشت صحنه (back-end)، پردازش مورد نیاز را روی داده های انتقال داده شده، انجام خواهد داد. این پردازش، بر اساس منطقِ کارِ تعریف شده در داخل برنامه، انجام خواهد شد. خصوصیت method می تواند دو مقدار get یا post را دریافت کند که در زیر کاربرد این دو مورد را بررسی می کنیم. در ادامه آموزش کار با فرم ها یا Forms در HTML میخوام شمارو با صفت action آشنا کنم.

Name  که برای اختصاص دادن یک نام برای ورودی مربوط استفاده می شود . شناسه value  که در صورت انتخاب شدن این دکمه مقداری است که باید به صفحه action  انتقال داده شود. این حالت یک چک باکس برای انتخاب صفر یا تعداد بیشتری از میان چندین گزینه را نمایش می دهد. برای ایجاد کاربری راحت و ساده برای کاربران سایتتان یک ترفند در فرم ها را به شما آموزش میدهیم. حال اگر به آدرس سایت توجه کنیم، نشان می دهد که متغیر username و password دارای چه محتوایی است و این امینت کار ما را پایین می آورد و پسورد می تواند هک شود.

مشخصه ی name یا attribute

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

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

بنابراین وقت آن رسیده که به همراه هم، عناصر مورد نیازمان را از آنچه در این مقاله توضیح داده شد، انتخاب کرده و با کنار هم قرار دادن آنها، یک فرم تماس ساده بسازیم. امید است که آموزش کار با فرم ها یا Forms در html برای شما عزیزان مفید بوده باشه هر گونه نظر یا پیشنهاد داشت باشید توی قسمت نظرات سایت برای بنویسید ما همیشه منتظر نظرات شما عزیزان هستیم موفق باشید . توسط این مشخصه نام فیلد را مشخص می کنیم تا توسط این نام بتوانیم در صفحه ی پردازش آن را از سایر فیلدهای یک فرم مجزا کنیم و اطلاعات وارد شده در فیلد را دریافت کنیم. فیلدسِت تگی است که ما با استفاده از اون میتونیم عناصر موجود در فرم هارو گروه بندی کنیم، بفرض مثال میخوایم یکسری اطلاعات شخصی و یکسری اطلاعات تحصیلی و .. می بینیم اطلاعات به آدرس مورد نظر ارسال می شود اما پسورد را در نوار آدرس خود مشاهده نمی کنیم. عنصر ورودی یا تگ input را می‌توانیم مهمترین عنصر هر فرم HTML معرفی کنیم.

نحوه استفاده از آن مانند submit  است.هرگاه که روی این دکمه کلیک کنیم ،کل نوشته های فرم پاک می شود. شناسه بعد از check box  می باشد این شناسه باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند. اگر بخواهیم تعدادی radio button  مرتبط به هم بسازیم به طوری که تنها امکان انتخاب یکی از آنها باشد ،باید برای همه آنها یک نام در نظر بگیریم ،اما مقدار value های مختلف بدهیم.

همچنین می توانید با استفاده از ویژگی min و max مقدار حداقل و حداکثر را وارد کنید. نوعی دیگر از ابزارهایی که اطلاعاتی را از کاربران دریافت می کند  check box  ها هستند و بیشتر در مواردی که امکان انتخاب شدن یا نشدن برای یک گزینه وجود داشته باشد به کار می رود.برای ساختن آنها هم باید از تگ input  استفاده کنیم. در روش method   get  اطلاعات از طریق آدرس صفحه ارسال می شود. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سوال و بعد از آدرس صفحه action  قرار می گیرند و ارسال می شوند.

{
• شناسه بعد از check box  می باشد این شناسه باعث می شود تا در هنگام باز شدن صفحه این دکمه ها به صورت انتخاب شده نمایش داده شوند.
|}
• با اینحال، وقتی شما از متد GET استفاده می‌کنید، اطلاعات درون فرم شما در آدرس بار مرورگر شما نمایش داده می‌شود.
{
• در مقاله های بعدی با دیگر عناصر موجود در فرم ها آشنا می‌شویم و جزء به جزء هر فرم را بررسی می‌کنیم.
|}{
• مهمترین عنصر فرم، المنت input است که بسته به فیلدی که می خواهید داشته باشید، می تواند انواع مختلفی از جمله فیلد متنی، چک باکس ها، رمزعبور، دکمه های رادیویی، دکمه ارسال و … باشد.
|}
• برنامه ی پایانی عملیات مورد نیاز را ، بر اساس دستور العمل تعریف شده در برنامه، روی داده ی مورد نظر انجام می دهد.
• می خواهیم text box  هایی با قابلیت دریافت بیش از یک سطر اطلاعات را ایجاد کنیم.برای این منظور از تگ text area  استفاده می کینم .

اگر در مثال فوق دقت کرده باشید دو مشخصه ی cols و rows جدید می باشند. این دو مشخصه مقادیر عددی را دریافت می کنند و برای تعیین اندازه ی فیلد مورد استفاده قرار می گیرند. Cols مقدار پهنای فیلد را کنترل می کند و rows مقدار ارتفاع آن را. برای این کار باید گروهی از این دکمه ها را بوجود آورد و همه آنها را با یک نام یکسان عضو این گروه کرد. به عنوان نمونه در مثال بالا ویژگی name همه دکمه های زیر را برابر با color یعنی وضعیت قرار می دهیم. همچنین می توانید یک چک باکس را به طور پیشفرض در حالت انتخاب قرار دهید.

مسترکد با ارائه انواع آموزش در زمینه های متنوع از قبیل آموزش و ترفند های وردپرس، آموزش و ترفند های جوملا، معرفی افزونه ها و آموزش کارکرد آنها، راه حل های عیب یابی، آموزش HTML و CSS، راهنمای استفاده از جی کوئری و ... سعی دارد کاربران را به سمتی سوق دهد که خودشان بتوانند کلیه ی نیازهای خود را در زمینه طراحی یک سایت و نگهداری از آن برطرف کنند. مهمترین عنصر فرم، المنت input است که بسته به فیلدی که می خواهید داشته باشید، می تواند انواع مختلفی از جمله فیلد متنی، چک باکس ها، رمزعبور، دکمه های رادیویی، دکمه ارسال و … باشد. همچنین عنصر label باعث می‌شود تا شما در تگ Form برای کاربرانی که مشکلاتی برای انتخاب المان های کوچک مانند دکمه های رادیویی و چک باکس ها دارند، کار را راحت تر کنید. زیرا با توجه به تعریف شدن id با انتخاب کردن label توسط کاربران نیز می‌توانند دکمه های رادیویی یا چک باکس ها را انتخاب کنند. اگر به html و css  و به صورت کلی طراحی سایت علاقمند هستید ، پیشنهاد می کنیم که در کلاس آموزش طراحی سایت و یا کلاس آموزش html – css  در آموزشگاه کامپیوتر پرتو شرکت نمایید.

اگر از ظاهر فرم خود راضی نیستید برای زیباسازی آن باید به آن استایل دلخواه را بدهید. برای ایجاد استایلهای دلخواه می توانید از کدهای css استفاده کنید. برای اینکه این نوشته طولانی نشود و سررشته کار از دست شما خارج نشود از نوشتن توضیحات درباره  css خودداری می کنیم.

عنصر Label همانطور که از نامش پیداست برای قرار دادن نام یا لیبل در فرم های ما استفاده می‌شود. در رابطه با input ها شما در مقاله آشنایی با input ها بیشتر آشنا خواهید شد ولی قبلش بیایم کمی بیشتر با عناصر هر فرم آشنا بشیم. انواع مختلفی از کنترل های فرم وجود دارد که می توانید از آنها برای جمع آوری داده های فرم HTML استفاده کنید. Application / x--urlencoded - این روش استانداردی است که اکثر فرمها در سناریوهای ساده از آن استفاده می کنند.

در مثال بالا فقط یه فرم ساده ایجاد کردیم، در این فرم هیچگونه کار خاصی انجام نمیشه، مثلا اگه بروی دکمه ارسال کلیک کنید هیچ اتفاق خاصی نمی افته و نباید انتظار داشته باشید داده ها ارسال بشن جایی. لطفا در ادامه با آموزش کار با فرم ها یا Forms در HTML با من همراه باشید. عنصر از نوع "url" یک قسمت ورودی ایجاد می کند که کاربر را قادر می سازد URL را وارد کند. مقادیری که تگ input برای خاصیت type   در html5  و کاربرد آنها را به صورت خلاصه در زیر عنوان میکنیم. تگ form به تنهایی کاربردی ندارد و تنها معرف ایجاد یک امکان تعاملی از نوع فرم است،بنابراین این تگ را با موارد زیر تکمیل می کنیم. برای ساختن radio button  ها در تگ input  شناسه type  را با مقدار radio  مقدار دهی می کنیم .

شاید به نظر برسد که توضیح مربوط به عنصر را می تواند توسط عناصر دیگر مثل پاراگراف نیز فراهم کرد اما باید بدانیم که عنصر از نظر معنایی مخصوص به همین کار می باشد. همینطور می توان این عنصر را با استفاده از ویژگی for با یک عنصر ورودی جفت کرد. توضیحات کامل کار با فرم ها یا Forms در html کد های بالا در ادمه آموزش . می توان توسط این مشخصه میزان پیشفرضی برای اطلاعات یک فرم تعریف کرد و برخی مشخصه های دیگر که بنا به کاربرد ذکر خواهد شد.

چک باکس ها به کاربر این امکان را می دهند که گزینه های ZERO یا MORE را از تعداد محدودی از گزینه ها انتخاب کند. دکمه های رادیویی به کاربر اجازه می دهند فقط یکی از گزینه های محدود را انتخاب کند. با استفاده از تگ datalist میتوانیم یک لیست با گزینه های از پیش تعریف شده را ایجاد نماییم که کاربر بتواند از بین گزینه های موجود در لیست به دلخواه یک گزینه را انتخاب نماید. یک باکس انتخابی, همان لیست آبشاری (dropdown) از آپشن ها است که کاربر می تواند یک یا چند گزینه را انتخاب کند. باکس های انتخابی با استفاده از المان  و داخل آن ایجاد می شود. فیلد فایل به کاربر اجازه انتخاب فایل از روی حافظه کامپیوتر و ارسال آن به عنوان ضمینه در داده فرم را می دهد.