مروری کامل بر ساختار تگ Form در HTML️ باگتو

این المان به شما اجازه می دهد انواع مختلف فیلد های ورودی را بر اساس مقدار خصوصیت type ایجاد کنید. فرم ها در HTML برلی جمعاوری انواع اطلاعات ورودی کاربر مثل اطلاعات تماسی مانند نام, ایمیل, شماره تماس, یا جزییاتی مثا حساب بانکی برای پرداخت آنلاین و غیره ست. Value،  صفت بعدی است که در تگ input قرار می گیرد و می توانید مقدار اولیه داخل فیلد را با آن تغیر دهید. در متد post علاوه بر ارسال اطلاعات بصورت مخفی، میتوان طول داده ها را بیشتر داد ولی در متد get محدودیت در طول داده ها وجود دارد. پس اگر نوع متد ارسال به صورت get بو د اطلاعات را در نوار آدرس می بینیم که مناسب فرم هایی که دارای پسورد می باشند نیست و استفاده از آن در این موارد توصیه نمی شود و امنیت را پایین می آورد. با target می توانید ارسال فرم را در صفحه جدید به کاربر نمایش دهید.

انواع attribute در فرم‌ها

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

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

آموزش کار با توضیحات یا Comments در HTML

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

ایجاد فرم در HTML

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

عنصر از نوع "date" یک قسمت ورودی ایجاد می کند، که به کاربر اجازه می دهد تاریخ را در یک قالب معین وارد کند. کاربر می تواند تاریخ را با فیلد متن یا رابط انتخابگر تاریخ وارد کند. Label همانطور که از نامش هم مشخص است، لیبل هر فیلد را نشان میدهد. ولی اگر آن را با صفت for ترکیب کنید، در صورتی که کاربر روی لیبل کلیک کند، فیلدی که در صفت for تعیین کرده اید، به صورت اتوماتیک انتخاب خواهد شد. مقدار id فیلد مورد نظر را برای صفت for در لیبل مورد نظر قرار داده ایم تا با کلیک روی هر لیبل، فیلد مربوط به آن انتخاب شود.

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

پارامتر اکشن تعیین می‌کند اطلاعات فرم به چه آدرسی ارسال شوند. این صفحه آدرس فایلی است که قرار است اطلاعات فرم به کمک کدهای بک‌اند پردازش شوند.برای آدرس دهی در اکشن می‌توانید از روش آدرس دهی نسبی یا ورود مستقیم یک url استفاده کنید. از نوع "week" یک فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد هفته و سال تقویم کشویی را بدون منطقه زمانی انتخاب کند. فیلدهای رمزعبور نیز دقیقا مانند فیلدهای متنی می باشند با این تفاوت که متن تایپ شده در آن ها به صورت ستاره و یا دایره های توپر مشاهده می شود. تنها کافی است در تگ فوق میزان مشخصه ی type را برابر password قرار دهید. سلام و دورود میگنم خدمت شما دوست و همراهان و ب سایت سون ریپلای در این قسمت از آموزش HTML فرم ها یا Forms در html می پردازیم.کار با فرم ها در HTML و طراحی سایت بسیار مهم است.

در صورتی که بخواهیم یک گزینه را به دلخواه خودمان از لیست بصورت پیش فرض انتخاب نماییم باید از مقدار selected درون گزینه ی مورد نظرمان استفاده نماییم. ما همیشه در تلاشیم که بهترین آموزش ها, مقالات تخصصی، سورس کد, قالب ها و اپلیکیشن های وب و موبایل را تولید و در اختیار علاقه مندان و حرفه ای های این حوزه ها قرار بدیم. یک دکمه ریسیت (reset) نیز تمام مقادیر وارد شده توسط کاربر در فرم را به مقدار اولیه باز می گرداند. یک دکمه سابمیت (submit) برای ارسال داده های فرم به وب سرور استفاده می شود. از متد POST همیشه زمانی استفاده کنید که اطلاعات درون فرم شما خیلی محرمانه یا خصوصی هست.

خاصیت Target مشخص می‌کند که هنگامی که ما بر روی کلید ثبت کلیک می‌کنیم عملیات چطور انجام شود. برای مثال در یک صفحه مثل "/mizfa_form.php" که در بخش سرور ما قرار دارد، می‌تواند این عمل را برای ما انجام دهد. در جدول زیر خاصیت های موجود در تگ form را با همدیگر بررسی میکنیم. در نظر داشته باشید که برای متصل شدن عنصر label به عنصر input حتما باید خاصیت Id در آن‌ها، کاملا یکسان باشد. برای مثال در زیر نمونه هایی از عناصر ورودی را در جدولی برایتان آورده ایم. Mutlipart / form-data - این روش هنگامی مورده استفاده قرار می گیرد که شما می خواهید داده های باینری را به صورت فایل هایی مانند تصویر، فایل word و غیره بارگذاری کنید.

طبعا میتوانید تعداد آیتم های به نمایش در آمده را بر اساس نیاز خود، کم و زیاد کنید. Form-handler معمولاً یک فایل روی سرور با یک اسکریپت برای پردازش داده های ورودی است. عنصر یک عنصر را می توان به روش های مختلفی، بسته به ویژگی type، نمایش داد.

تگ div در HTML

توجه کنید که در تمامی input‌ها (به جز submit) باید از name استفاده شود. از name برای گرفتن اطلاعات هر فیلد در سرور استفاده می‌شود و اگر از این خصیصه استفاده نشود اطلاعات آن فیلد ارسال نخواهد شد. این صفت هم جز صفت های ضروری و مهم در فرم ها می باشد، با استفاده از این صفت میتونیم نحوه ارسال داده ها بسمت سرور رو مشخص کنیم. ولی اینکه بتونیم دادهارو دریافت کنیم، دیگه ربطی به HTML نداره و باید از زبان های سمت سرور مثه مثلا زبان PHP استفاده کنیم، که مثلا ببینیم کاربر چه چیزی داخل اینپوت ها وارد کرده بوده. ان شاالله در مثال های بعدی کاری میکنیم که فرممون این قابلیت رو داشته باشه که بتونه داده هارو ارسال کنه به سمت سرور بعدش با استفاده از زبان سمت سرور اون داده هارو بگیریم و در خروجی نمایش بدیم.

تگ  در فرم ها

در این نوشته به توضیح و آموزش تگ form در html5 می پردازیم و مراحل ایجاد فرم را به صورت قدم به قدم شرح خواهیم داد. مسترکد با ارائه انواع آموزش در زمینه های متنوع از قبیل آموزش و ترفند های وردپرس، آموزش و ترفند های جوملا، معرفی افزونه ها و آموزش کارکرد آنها، راه حل های عیب یابی، آموزش HTML و CSS، راهنمای استفاده از جی کوئری و ... سعی دارد کاربران را به سمتی سوق دهد که خودشان بتوانند کلیه ی نیازهای خود را در زمینه طراحی یک سایت و نگهداری از آن برطرف کنند. مهمترین عنصر فرم، المنت input است که بسته به فیلدی که می خواهید داشته باشید، می تواند انواع مختلفی از جمله فیلد متنی، چک باکس ها، رمزعبور، دکمه های رادیویی، دکمه ارسال و … باشد.

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

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

آموزش نحوه قرار دادن ویدئوهای یوتیوب در HTML

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

انواع مختلفی از کنترل های فرم وجود دارد که می توانید از آنها برای جمع آوری داده های فرم HTML استفاده کنید. Application / x--urlencoded - این روش استانداردی است که اکثر فرمها در سناریوهای ساده از آن استفاده می کنند. مشخص می کند که از کدام متد HTTP (GET یا POST) برای ارسال داده ها استفاده شود. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید. سایر خصیصه‌های فرم که شامل name و کلاس بودند در ابتدای درس با آنها آشنا شدید. در جلسه بعدی درباره‌ی Inputها جزییات بیشتری را ارائه می‌دهیم و ساخت فرم را تکمیل خواهیم کرد.

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

{
• پس اگر نوع متد ارسال به صورت get بو د اطلاعات را در نوار آدرس می بینیم که مناسب فرم هایی که دارای پسورد می باشند نیست و استفاده از آن در این موارد توصیه نمی شود و امنیت را پایین می آورد.
|}{
• به عنوان نمونه در مثال بالا ویژگی name همه دکمه های زیر را برابر با color یعنی وضعیت قرار می دهیم.
|}{
• فرم ها شامل المان های خاصی به نام کنترل ها مثل باکس ورودی متن, باکس های چند انتخابی (checkbox) , دکمه های تک انتخابی (radio-button), دکمه ارسال (submit) و غیره است.
|}
• شما می توانید از ویژگی enctype برای مشخص کردن نحوه کد گذاری داده های مرورگر، قبل از ارسال آن به سرور، استفاده کنید.
• در آموزش امروز به همراه مسترکد می آموزیم که چگونه فرم HTML بسازیم و با تگ form و سایر عناصر موجود برای ایجاد فرم ها در اچ تی ام ال کار کنیم.
• مثلا من برای اینپوتم با استفاده از صفت Name یک نام به اسم ” myname ” مشخص کردم، حالا همین نام رو در سمت سرور میگیریم و خیلی راحت با ۲کلمه کد متوجه میشیم که کاربر چه چیزی وارد کرده.

تگ در فرم ها

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

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

از نوع "color "برای تعریف یک قسمت ورودی استفاده می شود که حاوی یک رنگ است. به کاربر امکان می دهد رنگ را توسط رابط رنگ بصری در یک مرورگر مشخص کند. ازradio برای ایجاد دکمه های رادیویی تایید شونده در فرم های وب استفاده می شود. برای ایجاد دکمه های ساده به کار می رود، یک دکمه معمولی باید به همراه دستورات جاوا اسکریپت تکمیل شود در غیر این صورت به خودی خود کاربردی ندارد. نوع دیگری از دکمه ها ،دکمه reset  هستند که برای پاک کردن اطلاعات فرم به کار می رود.

پشتیبانی مرورگرها

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

فیلد کنترل ایمیل

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

نمونه فرم  که توسط کد های html ساخته شده است

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

استفاده از مقدار checked در خط دوم ورودی درج شده در کد بالا، نشان میدهد که این انتخاب، از پیش تیک خورده و به صورت پیشفرض انتخاب شده است. ویژگی for تگ باید برابر با ویژگی id عنصر باشد تا آنها را به یکدیگر متصل کند. انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم از آنها استفاده کنید. همینطور می توان با استفاده از ویژگی multiple امکان اینکه کاربر بتواند چند مورد را انتخاب کند فراهم کرد. می توان به کمک ویژگی selected مقدار پیشفرضی برای این لیست مشخص کرد. بصورت پیشفرض یک checkbox در حالت تیک نخورده می باشد اما می توان با استفاده از ویژگی checked حالت اولیه این عنصر را بصورت تیک خورده قرار داد.

از این روش نمی توان برای اطلاعات طولانی یا کاراکتر های خاص استفاده کرد. همچنین بهتر است برای نام کاربری و کلمه عبور هم از این روش استفاده نشود چون در این صورت این اطلاعات در نوار آدرس مرورگر داده می شوند. فرم های HTML ابزاری قدرتمند برای جمع آوری اطلاعات، برقراری ارتباط با کاربران و ارائه خدمات به آنها هستند.

برای برطرف کردن این نیازها HTML موارد زیر را فراهم کرده است:

حالا به سراغ مهمترین خصیصه‌هایی که می‌توان در یک فرم استفاده کرد، می‌رویم. ما انواع فرم داریم که شاید تا الان اسمشون رو شنیده باشید، مثلا فرم تماس با ما، فرم سفارش گیری ، فرم ثبت نام و ورود و هرنوع فرم دیگه که در ذهن شما باشه. تگ form از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند. در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید. از  password برای ایجاد فیلدهای کلمه عبور (ستاره ای) استفاده می شود. شما با گذراندن دوره ها و دریافت مدرک معتبر، می توانید به سادگی وارد بازار کار شوید.ما همواره و حتی سال ها پس از پایان دوره دانشجویانمان، در کنار آنها هستیم و راهنمایی های لازم را به صورت رایگان انجام خواهیم داد.

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

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

این فیلد بطور عادی به صورت یک باکس متنی به همراه دکمه ای که امکان انتخاب فایل را به کاربر می دهد, نمایش داده می شود. Input های متنی تک خطی با استفاده از تگ که دارای خصوصیت type با مقدار text هستند ایجاد می شود. یک عنصر input می تواند شامل فیلد متن, پسورد, چک باکس, دکمه radio , دکمه submit , دکمه ریست و .. و چندین نوع جدید که در HTML5 معرفی شده است و در بخش های بعدی به آن می پردازیم, است.

آموزش ساخت دکمه مشاهده سریع محصول با المنتور پرو

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

همانطور که مشاهده میکنید، در آدرس بالا میتوان مقدار firstname و lastname را به طور کامل مشاهده کرد.برعکس این حالت، زمانی که میخواهیم اطلاعات ارسالی در آدرس صفحه ی action مشخص نباشند، از متد POST استفاده میکنیم. مثلا زمانی که میخواهیم اطلاعاتی را به دیتابیس ارسال کرده و آپدیت کنیم، یا وقتی میخواهیم از کاربر رمز دریافت کنیم و کلیه ی حالات مشابه. هیچوقت نباید اجازه دهید اطلاعات حساب در url به نمایش در بیایند. دکمه های رادیویی به دکمه های اطلاق می شود که تنها یکی از گزینه ها را می توانید انتخاب کنید و نه بیشتر! این دکمه ها به صورت دایره های کوچکی در صفحه نمایش داده می شوند.این نوع فیلد ها فرق کوچکی با نمونه های متنی دارند که با مشاهده ی مثال زیر به آن پی خواهید برد. در مثال بالا از کاربر می خواهیم رنگ مورد علاقه اش را انتخاب کند و گزینه های زرد، سبز و مشکی را در اختیار وی قرار می دهیم.

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

امیدواریم که از این آموزش لذت برده باشید و در آینده نیز در آموزش های بعدی همراه ما باشید. اکنون ما با ساخت یک فرم login به شما یاد می دهیم که چگونه یک فرم ایجاد کنید. فراموش نکنین که فرم ها هم قابلیت استایل دهی دارند و در آموزش های CSS نوید معدن نژاد عزیز به آن‌ها پرداخته است. به صورت کلی متد HTTP پیشفرض فرم ها بر روی متد GET ست شده است. عملیات می‌تواند در یک صفحه جدید، در یک فریم جدید یا در همان صفحه ایجاد شود.

پس میشه گفت اصلی ترین و مهمترین بخش یک فرم ، همین صفت Action می باشد، یعنی اگه این صفت نباشه عملا هیچی به هیچیه و فرم نمیتونه هیچگونه عملیاتی انجام بده.