آموزش تگ form در html آموزش تگ فرم در html به صورت کامل آموزش کامل تگ فرم

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

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

{
• Label همانطور که از نامش هم مشخص است، لیبل هر فیلد را نشان میدهد.
|}
• در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
{
• تگ form همونطور که از اسمشم مشخصه با استفاده از اون میتونیم یک یا چندین فرم رو در یک صفحه ی وب ایجاد کنیم.
|}
• امیدواریم که از این آموزش لذت برده باشید و در آینده نیز در آموزش های بعدی همراه ما باشید.
{
• این مبحث بسیار کاربردی و مهم است چراکه در اغلب وب سایت‌ها در صفحات تماس با ما، در بخش نظرات، ثبت نام و ورود، جستجو و… از فرم‌ها استفاده می‌شود.
|}
• برای این منظور در طراحی سایت از فرم های HTML استفاده می کنیم.

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

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

خب دوستان به پایان آموزش کار با فرم ها یا Forms در HTML رسیدیم، امیدوارم که مشکل خاصی در این آموزش نداشته باشید و نهایت استفاده رو برده باشید. معمولا مرورگرها تگ form را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند. در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ form در HTML پشتیبانی میکنند یا خیر. پیشنهاد میکنم آموزش کار با فرم ها را در HTML از اینجا مشاهده نمایید.

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

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

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

آموزش ویژگی border-radius در css

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

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

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

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

نوع "email"  یک فیلد ورودی ایجاد می کند که به کاربر اجازه می دهد تا آدرس ایمیل را با اعتبار سنجی الگوی وارد کند. ویژگی های متعدد به کاربر اجازه می دهد بیش از یک آدرس ایمیل وارد کند. عنصر از نوع "date" یک قسمت ورودی ایجاد می کند، که به کاربر اجازه می دهد تاریخ را در یک قالب معین وارد کند.

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

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

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

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

کنترل های ورودی رمز عبور (Password input controls) - این کنترل نیز یک ورودی تک خطی است، اما به محض اینکه کاربر، کاراکتر را وارد کند، آن کاراکتر را ماسک می کند یا می پوشاند. شما می توانید از ویژگی enctype برای مشخص کردن نحوه کد گذاری داده های مرورگر، قبل از ارسال آن به سرور، استفاده کنید. کنترل چک باکس یا کادر انتخاب برای انتخاب چندین گزینه از میان کادرهای انتخاب داده شده می باشد.

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

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

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

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

نرم افزار های مورد نیاز در HTML

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

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

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

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

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

چه زمانی از متد Get در فرم استفاده می‌کنیم؟

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

دوره آموزش طراحی سایت (HTML CSS Javascript)

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

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

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

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

تگ form در html

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

آموزش طراحی سایت

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

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

خاصیت Target

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

طراحی و برنامه نویسی وب

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

چک لیست سئو محتوا مطابق با آخرین الگوریتم های گوگل

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

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

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

صفت method در فرم ها

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

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

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

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

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

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

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

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

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

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

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