ایجاد فرم در HTML ساخت فرم در HTML آموزش فرمها در html دویکس

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

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

آموزش کامل کار با Form فرم ها در HTML

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

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

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

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

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

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

درج ناحیه نوشتاری یا textarea

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

ساعت پاسخگویی 9 الی تماس با شماره زیر فقط برای محصولات غیر رایگان جواب داده خواهد شد. به این دلیل که عناصر ورودی به خودی خود روشن و واضح نیستند بهتر است از عنصر برای توصیف آنها استفاده کرد. وقتی برای یک Input میخوایم Label تعریف کنیم، باید اول یه id برای Input مون مشخص کنیم بعدش همون id رو داخل تگ Label قرار بدیم تا بهمدیگه وصل بشن. Radio Button ها به کاربران اجازه می دهد که از بین مجموعه گزینه ها, دقیقا یک گزینه را انتخال کند. مثلا در نمونه زیر، پس از کلیک بر روی کلید ثبت نتیجه در یک صفحه جدید نمایش داده می‌شود.

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

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

افزودن به لیست پخش

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

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

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

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

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

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

• برای آشنایی بیشتر با این موضوع پیشنهاد می کنم حتما ویدیویی که در ابتدای این صفحه برای شما قرار داده شده را مشاهده کنید.
• سعی دارد کاربران را به سمتی سوق دهد که خودشان بتوانند کلیه ی نیازهای خود را در زمینه طراحی یک سایت و نگهداری از آن برطرف کنند.
{
• به کمک فرم‌ها، کاربران می‌توانند اطلاعاتی را به سرور ارسال کنند.
|}{
• در دوره طراحی سایت آموختیم که فرم‌ها یکی از مهم‌ترین عناصر در ساخت صفحات وب تعاملی هستند.
|}{
• اگر به html و css  و به صورت کلی طراحی سایت علاقمند هستید ، پیشنهاد می کنیم که در کلاس آموزش طراحی سایت و یا کلاس آموزش html – css  در آموزشگاه کامپیوتر پرتو شرکت نمایید.
|}
• در این مطلب از بلاگ کندو شما با اصول اولیه ساخت و استفاده از فرم‌ها در HTML به عنوان آموزش فرم ها در html آشنا خواهید شد.

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

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

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

وبسافت ۳ در سوشال مدیاها

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

فرم HTML بخشی از یک سند است که شامل کنترل هایی مانند فیلدهای متنی، فیلدهای رمز عبور، چک باکس ها،radio buttons، دکمه ارسال، منوها و غیره است. فرم HTML به کاربر کمک می کند تا داده هایی را که قرار است برای پردازش به سرور ارسال شود مانند نام، آدرس ایمیل، رمز عبور، شماره تلفن و غیره وارد کند. کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه و با حساسیت کمتر به کار می رود. ست شدن این مقدار باعث می شود اطلاعاتی که در فرم وارد می شود در نوار آدرس مرورگر نمایش داده شود. این خصوصیت برای زمانی که در فرم اطلاعات محرمانه ای وجود ندارد مفید است. به عنوان مثال اگر همین الان در قسمت جستجوی سایت وبسافت 3 کلمه «آموزش طراحی قالب وردپرس» را جستجو کنید URL سایت به شکل زیر در می آید.

خاصیت method در تگ form

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

فرم ها چجوری کار میکنن؟

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

لیست کامل تگ های HTML بهمراه توضیح و مثال

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تگ های زیرمجموعه form

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

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

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

لیست تگ های منسوخ شده در HTML5

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

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

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

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

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