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

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

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

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

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

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

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

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

آموزش افزودن کدهای PHP سفارشی به المنتور - (بصورت دستی)

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

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

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

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

فیلدهای پسورد یا password

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

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

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

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

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

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

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

بازار کار وردپرس در ایران

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

آموزش تگ های HTML

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

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

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

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

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

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

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

آموزش تگ applet در HTML

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

{
• فیلدهای متن , بخش یک خطی هستتند که به کاربر اجازه وارد کردن متن را می دهد.
|}
• در بخش بعدی در مورد نحوه استفاده از iframe ها در صفحه وب را یاد می گیریم.
{
• ما با استفاده از تگ legend درون عنصر fieldset میتوانیم یک کپشن یا یک عنوان را برای گروه مون مشخص نماییم.
|}
• اگر فیلدی خاصیت name را نداشته باشد، دیتایی از آن عنصر ورودی به صفحه Action ما ارسال نمی‌شود.
{
• با این خصوصیت می توانید مقادیری مانند متن، ایمیل، رمز، دکمه رادیویی، چک باکس و … ایجاد کنید و اطلاعات مورد نظر را از کاربر دریافت کنید.
|}
• در جلسه بعدی درباره‌ی Inputها جزییات بیشتری را ارائه می‌دهیم و ساخت فرم را تکمیل خواهیم کرد.

جدول صفات تگ form در HTML

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

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

دکمه Radio در input

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

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

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

آموزش کامل ساختار یک فایل HTML

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

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

تگ title در HTML

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

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

فیلد کنترل رمز عبور

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

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

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

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

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