آموزش تگ form در HTML سایت آموزشی فری لرن

یعنی داریم میگیم که داده های فرم پس از کلیک بروی دکمه ارسال به سمت سرور و به فایل get_data.php ارسال بشه، اینجا دیگه فرم وظیفه شو بخوبی انجام داد دمش گرم. سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. عنصر از نوع "datetime-local" زمینه ورودی را ایجاد می کند که به کاربر اجازه می دهد تاریخ و همچنین ساعت محلی را در ساعت و دقیقه و بدون اطلاعات منطقه زمانی انتخاب کند. از این مقادیر به همراه تگ input برای ایجاد باکس های قابل تایید (چک باکس) استفاده می شود.

{
• فیلد فایل به کاربر اجازه انتخاب فایل از روی حافظه کامپیوتر و ارسال آن به عنوان ضمینه در داده فرم را می دهد.
|}
• کنترل های ورودی رمز عبور (Password input controls) - این کنترل نیز یک ورودی تک خطی است، اما به محض اینکه کاربر، کاراکتر را وارد کند، آن کاراکتر را ماسک می کند یا می پوشاند.
• این ابزار شبیه checkbox  است و برای انتخاب گزینه ها به کار می رود با این تفاوت که از بین گزینه های موجود تنها یکی را می توانیم انتخاب کنیم .
{
• Name  که برای اختصاص دادن یک نام برای ورودی مربوط استفاده می شود .
|}
• به طور کلی بدر نظر داشته باشید که عرض پیش‌فرض برای فرم ها به اندازه ۲۰ حرف انگلیسی هست.
{
• خیلی اوقات در سایت ها نیاز داریم که اطلاعات کاربران را دریافت کنیم مثلاً برای نظرسنجی و ثبت نام از کاربران و یا ایجاد فرم تماس برای ارتباط کاربر با مدیر سایت.
|}

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

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

آدرس دهی فایل ها در HTML

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

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

ایجاد منوی دراپ داون با استفاده از عنصر Select

یک فرم در html ، داده ها را از بازدید کننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی عملیات مورد نیاز را ، بر اساس دستور العمل تعریف شده در برنامه، روی داده ی مورد نظر انجام می دهد. اگر در مثال فوق دقت کرده باشید دو مشخصه ی cols و rows جدید می باشند.

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

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

شما می توانید از ویژگی enctype برای مشخص کردن نحوه کد گذاری داده های مرورگر، قبل از ارسال آن به سرور، استفاده کنید. کنترل چک باکس یا کادر انتخاب برای انتخاب چندین گزینه از میان کادرهای انتخاب داده شده می باشد. اگر از ظاهر فرم خود راضی نیستید برای زیباسازی آن باید به آن استایل دلخواه را بدهید.

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

دکمه Radio در input

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

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

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

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

بخش زیر از آموزش فرم ها در HTML درباره توضیحات انواع مختلف کنترل هایی که در فرم می توانید استفاده کنید را نشان می دهد. اکنون می پرسید چگونه نام پیشفرض دکمه submit و reset را تغیر دهیم؟ ما به وسیله صفت value این کار را هم می توانیم انجام دهیم. Input دارای صفت type است که در آن مقادیر متفاوتی می تواند قرار گیرد.

فرم داده های کاربر مانند نام، آدرس میل، رمز عبور، شماره تلفن و … را برای پردازش به سرور ارسال می کند. این کدها یک فرم ساده مانند تصویر بالا را برای ما ایجاد می کند. بعد از ایجاد فرم احتمال دارد که بخواهید ظاهر آن را شخصی سازی کنید و اطلاعات آن را نیز به سرور خود ارسال کنید. در زیر به این موارد می پردازیم تا هیچ مشکلی در زمینه ایجاد فرم نداشته باشید. به این ترتیب کاربر متوجه خواهد شد هر لیبل برای چه فیلدی است. مثلا من برای اینپوتم با استفاده از صفت Name یک نام به اسم ” myname ” مشخص کردم، حالا همین نام رو در سمت سرور میگیریم و خیلی راحت با ۲کلمه کد متوجه میشیم که کاربر چه چیزی وارد کرده.

تگ و در فرم ها

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

انواع شناسه ها در این مدل ،type  که رفتاری مانند این شناسه در tex box  دارد. اگر در این کادر کاراکتری تایپ شود به صورت نقطه یا ستاره مشخص می شود. Blank – بیان می کند که صفحه پردازش action  در یک جدید باز شود. در HTML عناصر کنترل ورودی دیگری نیز وجود دارند اما ما در این مطلب مهمترین های آنها را بررسی کردیم. ما با استفاده از تگ legend درون عنصر fieldset میتوانیم یک کپشن یا یک عنوان را برای گروه مون مشخص نماییم. تگ همونطور که از اسمش هم مشخصه، با استفاده از اون میتونیم برای اینپوت هامون یک برچسب یا لیبل ( یا یه متن برای عنوان یا شناسایی ) مشخص نماییم.

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

عنصر در تگ Form

ذخیره نام، ایمیل و وبسایت من در مرورگر برای زمانی که دوباره دیدگاهی می‌نویسم. در ادامه شما با تمامی جنبه‌های کار با فرم‌ها در HTML آشنا خواهید شد، از ساختار اولیه تا اعتبارسنجی داده‌ها. در checkbox کاربران می‌توانند همزمان چند گزینه را انتخاب نمایند.

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

عنصر Label برای کاربرانی که گذری صفحه وب سایت را نگاه می‌کنند خیلی خیلی کاربردی هست، چرا که فرم هایی که اطلاعات مورد نظرشان را در داخل input نمایش می‌دهند برای اینجور کاربران خیلی نامفهوم هست و باعث کاهش تجربه کاربری ما می‌شود. کنترل های ورودی متن تک خطی (Single-line text input controls) - این کنترل ها برای مواردی که فقط به یک خط از ورودی کاربر نیاز داریم، مانند جعبه های جستجو یا نام ها استفاده می شوند. همانطور که در دروس ابتدایی دوره گفته شده هر المانی که در صفحه قرار می گیرد به واسطه تگ‌های HTML ایجاد شده است. این مبحث بسیار کاربردی و مهم است چراکه در اغلب وب سایت‌ها در صفحات تماس با ما، در بخش نظرات، ثبت نام و ورود، جستجو و… از فرم‌ها استفاده می‌شود. الان اون MyName میشه نام اون اینپوت یا Input داخل فرم و در نهایت اون Sadegh هم میشه مقدارش که کاربر داخل فرم وارد کرده، پس همونطور که میبینید صفت method با مقدار Get داده های فرم رو در نوار آدرس مرورگر نشون میده.

اگرچه این ورودی های خیلی شبیه به هم هستند اما ویژگی type به هرکدام از آنها معنا و مفهموم خاصی می دهد و تعریف می کند که هرکدام چه نوع محتوایی قرار است داشته باشد. به کمک آن می توان مشخص کرد که کاربر چه نوع محتوایی را درون ورودی باید قرار دهد. لطفا برای مشاهده خروجی مثال زیر بروی دکمه امتحان کنید کلیک نمایید و سپس در خروجی، ۲ عدد را به دلخواه انتخاب نمایید تا حاصل جمع آن به شما نمایش داده شود. این تگ یکی از تگ های محاسبه گر در فرم ها می باشد، یعنی همانطورم که از اسمش پیداست این عنصر میتواند نتیجه ی یک یا چند عمل را در خروجی به نمایش در بیاورد، و بطور کلی ما برای ایجاد خروجی مان از این عنصر استفاده مینماییم. در مرحله اول باید با استفاده از تگ Input و صفت list یک لیست را تعریف نماییم و سپس در مرحله ی دوم باید از تگ datalist و صفت id استفاده کرد و سپس نامی که در صفت list در مرحله ی اول ایجاد کردیم را در صفت id تگ datalist قرار دهیم.

چه موقع باید از مقادیر Get و Post استفاده نماییم؟

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

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

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

مشخصه های فرم های html :

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

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

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

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

آموزش تگ option در HTML

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

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

به طور کلی بدر نظر داشته باشید که عرض پیش‌فرض برای فرم ها به اندازه ۲۰ حرف انگلیسی هست. تمامی حقوق و مطالب سایت برای وبسافت۳ محفوظ می باشد و کپی برداری از مطالب رایگان باذکر منبع آزاد است. کافیه از این صفت در هریک از Input هامون استفاده کنیم و یه نام دلخواه براشون مشخص کنیم، هر نامی که دوست داشتید میتونید مشخص کنید، ولی سعی کنید نام هاتون منحصربفرد باشه. مثلا اگه برای یه اینپوت نام test مشخص کردید برای اینپوت دیگه باید نام متفاوت باشه.

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

انتخاب فایل برای آپلود

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

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

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

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

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

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

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

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

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