2018-06-28

ایجاد فرم های HTML

سلام بازدید کننده عزیز!

در قسمت های قبل، عناصر اصلی سایت را ایجاد کردیم و همچنین مسائل مربوط به پر کردن محتوا را در نظر گرفتیم. و اکنون می توانیم به موضوع بسیار مهم و گسترده بعدی برویم - کار با فرم های HTML.

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

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

علاوه بر این، مسائل مربوط به کار با پایگاه داده MySQL نیز در اینجا مورد بررسی قرار خواهد گرفت. از آنجایی که استفاده از فرم ها در مثال های ما به طور جدایی ناپذیری با تعامل آنها با جداول پایگاه داده مرتبط است. که در آن داده های وارد شده توسط کاربران ذخیره می شود که بعداً توسط سرور هنگام پردازش درخواست ها استفاده می شود.

• در مورد فرم های HTML به طور کلی
• فرم سفارش آنلاین
• فرم مجوز
• فرم انتقادات و پیشنهادات

در مورد فرم های HTML به طور کلی

یک فرم در یک صفحه وب توسط یک عنصر بلوک تنظیم می شود ، که محفظه ای است که شامل تمام عناصر مسئول پردازش ورودی داده ها می شود، مانند , , یا .</p> <p>در همان زمان، برچسب <form>چندین ویژگی وجود دارد، اما دو مورد از آنها لازم است. این یک "عمل" است که حاوی یک آدرس است که مشخص می کند فرم در کجا ارسال شود و یک "روش" که روش ارسال (POST یا GET) را مشخص می کند.</p> <p>در مورد عناصر آن، همه کاره ترین تگ است <input>که به کمک آن بیشتر اطلاعات منتقل می شود و عناصر رابط مختلف ایجاد می شود. علاوه بر این، نوع فیلدهای ورودی با ویژگی اصلی آن "نوع" تعیین می شود که مقدار آن هدف عملکردی آنها را تعیین می کند.</p> <p>بنابراین، هنگامی که مقدار "متن" است - یک فیلد متنی، "رمز عبور" - یک فیلد با رمز عبور، "ایمیل" - یک فیلد برای وارد کردن آدرس ایمیل، "رادیو" - یک سوئیچ، "جعبه چک" - یک کادر انتخاب، "ارسال" - دکمه ای برای ارسال فرم ها.</p> <p>در زیر مثالی از استفاده از عنصر آورده شده است <input>برای انواع مختلف زمینه ها</p> <ol><p><form name =<b>"مثال"</b>عمل = <b>"#" </b>روش = <b>"پست"</b> ></p> <p><input type =<b>"متن"</b>نام = <b>"وارد شدن"</b> ></p> <p><input type =<b>"پست الکترونیک"</b>نام = <b>"پست الکترونیک"</b> ></p> <p><input type =<b>"کلمه عبور"</b>نام = <b>"کلمه عبور"</b> ></p> <p><input type =<b>"ارسال"</b>نام = <b>"دکمه"</b>ارزش = <b>"ارسال"</b> ></p> <li> </ol><p>شکل 1 نمونه فرم HTML</p> <p>در این مثال می توانید آن عنصر را ببینید <input>بسته به مقدار ویژگی "type"، فیلد می تواند اشکال مختلفی داشته باشد. به عنوان مثال، در عنصر اول (موقعیت 2)، فیلد برای وارد کردن اطلاعات متنی (در این مورد، برای ورود) در نظر گرفته شده است. مورد بعدی (موقعیت 3) برای وارد کردن ایمیل است، سپس (موقعیت 4) برای رمز عبور و آخرین (موقعیت 5) دکمه ای برای ارسال فرم است.</p> <p>البته این یک مثال ساده شده است که بیشتر از ویژگی های مورد نیاز استفاده می کند. در واقع، فیلدهای دیگری که مشخصه های فیلدها را تعیین می کنند، معمولا استفاده می شوند.</p> <p>علاوه بر این، هر عنصر فهرستی از ویژگی های خاص خود را دارد. ارزش ندارد همه آنها را در اینجا فهرست کنید، زیرا تعداد آنها بسیار زیاد است و بهتر است این اطلاعات را از ادبیات مرجع HTML که مخصوص این کار طراحی شده است، بگیرید.</p> <p>شما می توانید تعداد زیادی کتاب مرجع معتبر HTML را در اینترنت پیدا کنید. به عنوان مثال، همانطور که قبلاً ذکر کردم، برای این اهداف می توانید از مرجع فناوری های وب WebReference.ru استفاده کنید که یکی از قسمت های آن به شرح دقیق همه عناصر موجود در HTML5 اختصاص دارد.</p> <p>اسکرین شات 33</p> <p>در اینجا ما عملا فرم هایی را برای ساخت واحدهای کاربردی سایت خود ایجاد می کنیم. و ما سعی خواهیم کرد تا حد امکان از عناصر مختلف با ویژگی های مختلف استفاده کنیم.</p> <h2><i>فرم سفارش آنلاین</i></h2> <p>وب سایت در حال ایجاد امکان سفارش نصب علائم ضد سرقت بر روی شیشه اتومبیل را فراهم می کند. برای انجام این کار، باید اطلاعات خودرو را وارد کرده و یک روش علامت گذاری را انتخاب کنید. پس از آن بر اساس داده های وارد شده باید اطلاعاتی در مورد هزینه انجام کار به کاربر ارائه شود. علاوه بر این، هر دو قیمت کامل و محاسبه با در نظر گرفتن تخفیف.</p> <p>نسخه مربوط به فرم سفارش آنلاین که ایجاد خواهیم کرد در تصویر زیر نشان داده شده است.</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-onlajn-zakaza.jpg' width="100%" loading=lazy loading=lazy><p>شکل 2 فرم سفارش آنلاین</p> <p>عناصر زیر در اینجا استفاده خواهند شد:</p> <ul><li><input>با فیلد ورودی متن؛</li> <li><select>;</li> <li><option>.</li> </ul><p>فرم ثبت نام مورد استفاده در وب سایت در حال ایجاد با سفارش آنلاین ترکیب شده است. این به این دلیل است که در این حالت حساب شخصی کاربر برای نمایش وضعیت سفارش های انجام شده و ثبت سفارش های جدید در نظر گرفته شده است. بنابراین در این گزینه ثبت نام همزمان با اجرای اولین دستور کاملاً منطقی است.</p> <p>در زیر نحوه شکل گیری این بخش کاربردی را مشاهده می کنید.</p> <p>برای افزایش/کاهش اندازه تصویر روی عکس کلیک کنید</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-registracii.jpg' width="100%" loading=lazy loading=lazy><p>شکل 3 فرم ثبت نام</p> <p>عناصری که باید در این گزینه ارائه شوند:</p> <ul><li><label>;</li> <li><input>با فیلد ورودی متن؛</li> <li><input>با یک فیلد ورودی ایمیل؛</li> <li><input>با فیلد ورود رمز عبور؛</li> <li><input>با یک دکمه برای ارسال فرم (همراه با فرم سفارش آنلاین).</li> </ul><h2><i>فرم مجوز</i></h2> <p>برای ورود به حساب شخصی خود، مجوز لازم است. به طور معمول، چنین فرمی شامل فیلدهای ورودی برای ورود، رمز عبور و دکمه ای برای ارسال آن است. همچنین، برای بازیابی اعتبار، پیوندهای اضافی مانند: "ورود خود را فراموش کرده اید؟"، "رمز عبور خود را فراموش کرده اید؟" اغلب استفاده می شود.</p> <p>علیرغم اینکه چنین پیوندهای اضافی معمولاً همراه با عناصر فرم ثبت نام قرار می گیرند، در واقع به عناصر آن ارتباطی ندارند.</p> <p>در زیر یک نمای کلی از پنل کاربری با عناصر مجوز وجود دارد.</p> <p>برای افزایش/کاهش اندازه تصویر روی عکس کلیک کنید</p> <br><img src='https://i0.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-avtorizacii.jpg' width="100%" loading=lazy loading=lazy> <p>در این مورد از عناصر زیر استفاده خواهد شد:</p> <ul><li><label>;</li> <li><input>با فیلد ورودی متن؛</li> <li><input>با فیلد ورود رمز عبور؛</li> <li><input> </li> </ul><h2><i>فرم انتقادات و پیشنهادات</i></h2> <p>نام این فرم در مورد هدف آن صحبت می کند. بنابراین تمام فیلدهای لازم برای ارسال پیام باید در اینجا باشد. در این صورت از چهار فیلد تشکیل خواهد شد: دو قسمت برای وارد کردن نام و آدرس پستی فرستنده و دو قسمت برای ارسال خود پیام.</p> <p>شکل ظاهری این فرم در تصویر زیر نشان داده شده است.</p> <p>برای افزایش/کاهش اندازه تصویر روی عکس کلیک کنید</p> <br><img src='https://i1.wp.com/rabota-vinete.ru/images/article/sait/form/sozdat-formu-html/forma-obratnoj-svyazi.jpg' width="100%" loading=lazy loading=lazy><p>شکل 5 فرم بازخورد</p> <p>در اینجا، علاوه بر عناصری که قبلاً استفاده شده است، یک عنصر دیگر نیز باید اضافه شود ( <textarea>) که با آن می توانید چندین خط متن را در فیلد وارد کنید. و کل لیست این گزینه به شکل زیر خواهد بود:</p> <ul><li><label>;</li> <li><input>با فیلد ورودی متن؛</li> <li><input>با یک فیلد ورودی ایمیل؛</li> <li><textarea>با ناحیه ای که می توانید چندین خط متن را وارد کنید.</li> <li><input>با دکمه ارسال فرم</li> </ul><p>بنابراین در این مقاله اساساً مقدماتی، برخی از مسائل کلی مربوط به فرم های HTML را پوشش داده ایم. و ما تصمیم گرفتیم که در آینده با کدام نمونه های خاص کار کنیم.</p> <p>پس از آن می‌توانیم به ساخت عملی فرم‌ها، تدوین کدهای لازم برای هر مورد و تشریح تعامل آنها با جداول MySQL مربوطه برویم. اما این در مقالات بعدی خواهد بود.</p> <p>با احترام، نیکولای گریشین</p> <ul><li>ساتیا بعدی:</li></ul> <p>در حین پیمایش در وب سایت ها، کاربر بیشتر فقط روی آن کلیک می کند <b>پیوندها</b>برای پیمایش در صفحات وب</p><p>اما واضح است که کاربر گاهی نیاز به ارائه خود دارد <b>فیلدهای ورودی</b>. این نوع تعاملات عبارتند از:</p><ul><li>ثبت نام و ورود در وب سایت ها؛</li><li>وارد کردن اطلاعات شخصی (نام، آدرس، اطلاعات کارت اعتباری و غیره)؛</li><li>فیلتر کردن محتوا (با استفاده از لیست های کشویی، چک باکس ها و غیره)؛</li><li>انجام جستجو؛</li><li>دانلود فایل ها</li> </ul><p>برای برآوردن این نیازها، HTML تعاملی ارائه می دهد <b>کنترل ها</b>تشکیل می دهد:</p><ul><li>فیلدهای متنی (برای یک یا چند خط)؛</li><li>سوئیچ ها؛</li><li>چک باکس ها؛</li><li>لیست های کشویی؛</li><li>ابزارک برای دانلود؛</li><li>دکمه های ارسال</li> </ul><p>این کنترل ها شامل موارد مختلفی است <b>برچسب ها</b> HTML، اما بیشتر آنها از تگ استفاده می کنند <input>. از آنجایی که یک عنصر خود بسته است، نوع فیلد با ویژگی نوع آن تعیین می شود:</p><p> <!-- Текстовое поле --> <input type="text"> <!-- Флажок --> <input type="checkbox"> <!-- Переключатель --> <input type="radio"> </p><h2>عنصر <form></h2><p><form>یک عنصر بلوکی است که تعریف می کند <b>در ارتباط بودن</b>بخشی از یک صفحه وب در نتیجه تمام کنترل ها (مانند <input> , <textarea>یا <button>) باید باشد <i>داخل</i>عنصر <form> .</p><p>دو ویژگی HTML <b>لازم است</b>:</p><ul><li>اقدام شامل آدرسی است که تعیین می کند <i>جایی که</i>اطلاعات فرم ارسال خواهد شد.</li><li>روش می تواند GET یا POST باشد و تعیین می کند که آیا <i>چگونه</i>اطلاعات فرم ارسال خواهد شد.</li> </ul><p>به طور معمول، اطلاعات فرم به <b>سرور</b>. <i>چگونه</i>سپس این داده ها فراتر از محدوده این راهنما پردازش می شوند.</p><p>یک فرم را به عنوان مجموعه ای از کنترل ها در نظر بگیرید که با هم کار می کنند تا به انجام برسند <b>یکی</b>عمل. اگر یک فرم ورود به سایت نوشته اید، ممکن است داشته باشید <b>سه</b>زمینه های:</p><ul><li>فیلد ایمیل <input type="email"> </li><li>فیلد رمز عبور <input type="password"> </li><li>دکمه ارسال <input type="submit"> </li> </ul><p>این سه عنصر HTML در یک فرم قرار خواهند گرفت <span><form action="/login" method="POST"> </span>.</p><p>شما می توانید به طور مشابه یک فرم ثبت نام را در همان صفحه HTML، در یک عنصر جداگانه اضافه کنید <form> .</p><h2>فیلدهای متنی</h2><p>تقریباً همه فرم ها نیاز دارند <b>متن</b>ورودی از کاربران برای وارد کردن نام، آدرس ایمیل، رمز عبور، آدرس، و غیره. فیلدهای متن فرم انواع مختلفی دارند.</p><p>اگرچه این فیلدها بسیار شبیه هستند و به کاربران اجازه می دهند هر نوع متنی (حتی متن نادرست) را وارد کنند، اما نوع آنها یک ویژگی خاص را ارائه می دهد. <b>مفاهیم</b>برای ورودی، تعیین چه اطلاعاتی فیلد <b>باید</b>حاوی.</p><p>مرورگرها ممکن است متعاقباً رابط کنترل را برای بهبود کمی تغییر دهند <i>تعامل</i>یا پیشنهاد کنید چه محتوایی مورد انتظار است.</p><p>به عنوان مثال، قسمت رمز عبور به جای نمادها، نقطه ها را نشان می دهد. و فیلد عدد به شما امکان می دهد با استفاده از کلیدهای بالا و پایین مقدار را افزایش یا کاهش دهید.</p><h2>نگهدارنده مکان</h2><p>فیلدهای متنی می توانند نمایش داده شوند <b>پیشنهادی</b>متنی که به محض وارد کردن متن ناپدید می شود.</p><p> <input type="text" placeholder="اسمت را وارد کن"> </p><p>اگر شروع به تایپ کردن چیزی کنید، متن "نام خود را وارد کنید" ناپدید می شود.</p><h2><label></h2><p>از آنجایی که عناصر فرم به خودی خود چندان توصیفی نیستند، معمولاً قبل از متن قرار می گیرند. <b>برچسب</b>.</p><p> <label>پست الکترونیک</label> <input type="email"> </p><p>در حالی که مکان‌نما قبلاً نکاتی را درباره محتوای مورد انتظار ارائه می‌دهد، برچسب‌ها این مزیت را دارند که همیشه قابل مشاهده هستند و می‌توانند در کنار انواع دیگر عناصر فرم مانند چک باکس یا دکمه‌های رادیویی استفاده شوند.</p><p>اگرچه می توانید از پاراگراف های کوتاه برای توصیف عناصر فرم استفاده کنید، با استفاده از <label>از نظر معنایی صحیح تر است زیرا آنها فقط در فرم ها وجود دارند. <label>همچنین می تواند با یک عنصر فرم خاص با استفاده از ویژگی for مربوط به مقدار id فیلد مرتبط شود.</p><p> <label for="first_name">نام</label> <input id="first_name" type="text"> </p><p>وقتی روی برچسب کلیک می کنید، فوکوس به قسمت متن می رود و مکان نما را داخل آن قرار می دهد. تا اینجای کار این بسته بی فایده به نظر می رسد، اما با چک باکس ها و سوئیچ ها مفید خواهد بود.</p><h2>چک باکس ها</h2><p><b>چک باکس ها</b>- اینها عناصر فرمی هستند که فقط دو حالت دارند: روشن یا خاموش. آنها اساسا به کاربر این امکان را می دهند که به چیزی "بله" یا "نه" بگوید.</p><p> <input type="checkbox">مرا به خاطر بسپار</p><p>از آنجایی که ممکن است کلیک کردن روی یک چک باکس کوچک دشوار باشد، توصیه می شود چک باکس و توضیحات آن را داخل آن قرار دهید <label> .</p><p> <label> <input type="checkbox">من با شرایط موافقم</label> </p><p>می‌توانید روی متن «من با شرایط موافقم» کلیک کنید تا کادر انتخاب را تغییر دهید.</p><p>به طور پیش فرض، چک باکس غیرفعال است. شما می توانید آن را به سادگی با استفاده از ویژگی علامت زده شده به عنوان فعال علامت گذاری کنید.</p><p> <label> <input type="checkbox" checked>از آدرس صورتحساب من استفاده کنید</label> </p><h2>سوئیچ ها</h2><p>می توانید به کاربر ارائه دهید <b>لیست گزینه ها</b>قابل انتخاب با استفاده از سوئیچ ها</p><p>برای اینکه این عنصر فرم کار کند، کد HTML شما باید <b>گروه</b>لیست دکمه های رادیویی با هم این با استفاده از همان مقدار برای ویژگی name به دست می آید:</p><p> <label>وضعیت خانوادگی</label> <label> <input type="radio" name="status">تنها</label> <label> <input type="radio" name="status">متاهل</label> <label> <input type="radio" name="status">جدا شده</label> <label> <input type="radio" name="status">بیوه</label> </p><p>از آنجایی که همه دکمه‌های رادیویی از یک مقدار برای ویژگی name استفاده می‌کنند (در این مورد، مقدار status)، انتخاب یک گزینه همه گزینه‌های دیگر را لغو می‌کند. سوئیچ ها هستند <b>متقابل منحصر به فرد</b>.</p><h3>تفاوت بین دکمه های رادیویی و چک باکس ها</h3><p>اگر چه چک باکس وجود دارد <b>به تنهایی</b>، سوئیچ ها فقط می توانند در فرم ظاهر شوند <b>فهرست</b>(یعنی حداقل دو گزینه).</p><p>علاوه بر این، کلیک کردن بر روی چک باکس است <b>دلخواه</b>، ضمن انتخاب یکی از دکمه های رادیویی می باشد <b>اجباری</b>. به همین دلیل است که در صورت انتخاب نزدیکترین گزینه، امکان خاموش کردن سوئیچ وجود ندارد. در پایان همیشه یکی از سوئیچ ها انتخاب می شود.</p><h2>منوهای کشویی</h2><p>اگر تعداد گزینه های انتخابی فضای زیادی را اشغال می کند، می توانید از منوهای کشویی استفاده کنید <select> .</p><p>آنها مشابه سوئیچ ها کار می کنند، فقط طرح بندی متفاوت است.</p><p> <select> <option>ژانویه</option> <option>فوریه</option> <option>مارس</option> <option>آوریل</option> <option>ممکن است</option> <option>ژوئن</option> <option>جولای</option> <option>اوت</option> <option>سپتامبر</option> <option>اکتبر</option> <option>نوامبر</option> <option>دسامبر</option> </select> </p><h3>انتخاب چندگانه از منوی کشویی</h3><p>اگر ویژگی چندگانه را اضافه کنید، می توانید امکان انتخاب چندین گزینه را فراهم کنید.</p><p> <label>از چه مرورگرهایی استفاده می کنید؟</label> <select multiple> <option>گوگل کروم</option> <option>اینترنت اکسپلورر</option> <option>موزیلا فایرفاکس</option> <option>اپرا</option> <option>سافاری</option> </select> </p><p>با نگه داشتن Ctrl (یا ⌘) و کلیک کردن، چندین گزینه را انتخاب کنید. این می تواند جایگزین خوبی برای استفاده از چندین چک باکس در هر خط باشد.</p><h2>مثال: فرم ثبت نام کامل</h2> <form action="/signup" method="POST"> <p> <label>درخواست</label> <label> <input type="radio" name="title" value="آقای">آقای.</label> <label> <input type="radio" name="title" value="خانم">خانم</label> </p> <p> <label>نام</label> <input type="text" name="first_name"> </p> <p> <label>نام خانوادگی</label> <input type="text" name="last_name"> </p> <p> <label>پست الکترونیک</label> <input type="email" name="email"> </p> <p> <label>تلفن</label> <input type="tel" name="phone"> </p> <p> <label>کلمه عبور</label> <input type="password" name="password"> </p> <p> <label>رمز عبور را تایید کنید</label> <input type="password" name="password_confirm"> </p> <p> <label>یک کشور</label> <select name="country"> <option>کانادا</option> <option>فرانسه</option> <option>آلمان</option> <option>ایتالیا</option> <option>ژاپن</option> <option>روسیه</option> <option>بریتانیای کبیر</option> <option>ایالات متحده آمریکا</option> </select> </p> <p> <label> <input type="checkbox" name="terms">با شرایط استفاده موافق هستم</label> </p> <p> <button>ثبت نام</button> </p> </form> <p>سایر عناصر فرم نیز موجود است، اما ما به پرکاربردترین آنها نگاه کرده ایم.</p> <p><form action="file.php" method="post" id="form">... محتویات فرم ...</form></p> <li>فقط در داخل عنصر فرم باید کنترل هایی وجود داشته باشد که می تواند به تعداد دلخواه وجود داشته باشد.</li> <p><b>ویژگی های فرم:</b></p> <ul><li>ویژگی action یک فایل سرور با یک اسکریپت مسئول پردازش اصلی داده های ارسال شده از فرم را مشخص می کند. به طور معمول، کد این فایل در یک زبان برنامه نویسی سمت سرور نوشته می شود، به عنوان مثال، در <i>php</i>یا <i>پرل</i>.</li> <li>مشخصه enctype نوع اطلاعات ارسال شده به سرور را نشان می دهد، اگر فقط داده متنی باشد - text/plain، اگر فایل ها با فرم ارسال می شوند، باید multipart/form-data را مشخص کنید.</li> <li>ویژگی متد شکل انتقال داده را مشخص و تعریف می کند. در این مورد به تفصیل نمی پردازیم، اما باید گفت که برای انتقال مطمئن تر، باید روش پست مشخص شود.</li> </ul><h2><span>عناصر فرم HTML</span></h2> <ul><table><tr><td class="code"> <<span>نوع ورودی = "متن" نام = "ورود" اندازه = "20" مقدار = "Login" maxlength = "25" > !}</span> </td> </tr></table><p><input type="text" name="login" size="20" value="وارد شدن" maxlength="25"></p> <p>نتیجه:</p> <p><input style="all: inherit; border:1px #aaa solid" type="text" size="20" value="وارد شدن" maxlength="25"></p> <ul><li>مقدار ویژگی type - text - نشان می دهد که این یک فیلد متنی است</li> <li>اندازه - اندازه فیلد متن به کاراکتر</li> <li>maxlength - حداکثر تعداد کاراکترهایی که می توانند در فیلد قرار بگیرند</li> <li>مقدار - متن اولیه در قسمت متن</li> <li>نام - نام عنصر، برای پردازش داده ها در فایل کنترل کننده لازم است</li> </ul><p><input type="password" name="pass" size="20" value="کلمه عبور" maxlength="25"></p> <p>نتیجه:</p> <p><input style="all: inherit; border:1px #aaa solid" type="password" size="20" value="کلمه عبور" maxlength="25"><br>به جای متن، یک ماسک در قسمت نمایش داده می شود - ستاره ها یا دایره ها</p> <table><tr><td class="code"> <<span>نوع ورودی = مقدار "ارسال" = <span>"ارسال داده ها"</span>> </span> </td> </tr></table><p><input type="submit" value="ارسال داده"></p> <p>نتیجه:</p> <p><input type="submit" value="ارسال داده" style="all: unset; border:1px #aaa solid"></p> <p>دکمه ارسال تمامی داده های فرم وارد شده توسط کاربر را جمع آوری کرده و به آدرس مشخص شده در ویژگی action فرم ارسال می کند.</p> <table><tr><td class="code"> <<span>نوع ورودی = "تنظیم مجدد" مقدار = "فرم را پاک کنید" > !}</span> </td> </tr></table><p><input type="reset" value="فرم پاک کردن"></p> <p>نتیجه: <br><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-65.png' height="54" width="224" loading=lazy loading=lazy><br>دکمه وضعیت همه کنترل ها را به حالت اولیه باز می گرداند (فرم را پاک می کند)</p> <table><tr><td class="code"> <<span>نوع ورودی = "چک باکس" نام = "asp" مقدار = " بله" > !}</span> A.S.P.<<span>br></span> <<span>نوع ورودی = "چک باکس" نام = "js" مقدار = " بله" checked = "checked" > !}</span>جاوا اسکریپت<<span>br></span> <<span>نوع ورودی = "چک باکس" نام = "php" مقدار = " بله" > !}</span> PHP<<span>br></span> <<span>نوع ورودی = "چک باکس" نام = "html" مقدار = " بله" checked = "checked" > !}</span> HTML<<span>br></span> </td> </tr></table><p><input type="checkbox" name="asp" value="آره">A.S.P. <br> <input type="checkbox" name="js" value="آره" checked="checked">جاوا اسکریپت <br> <input type="checkbox" name="php" value="آره">PHP <br> <input type="checkbox" name="html" value="آره" checked="checked">HTML <br></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-95.png' align="center" width="100%" loading=lazy loading=lazy><br>نتیجه:</p> <p><input type="checkbox">A.S.P. <br><input type="checkbox" checked>جاوا اسکریپت <br><input type="checkbox">PHP <br><input type="checkbox" checked>HTML</p> <p>در html، یک چک باکس برای سازماندهی چندین انتخاب استفاده می شود، به عنوان مثال. در مواقعی که انتخاب چندین گزینه پاسخ ضروری و امکان پذیر است</p> <table><tr><td class="code"> <<span>نوع ورودی = "رادیو" نام = "کتاب" مقدار = "asp" > !}</span> A.S.P.<<span>br></span> <<span>نوع ورودی = "رادیو" نام = "کتاب" مقدار = "js" > !}</span>جاوا اسکریپت<<span>br></span> <<span>نوع ورودی = "رادیو" نام = "کتاب" مقدار = "php" > !}</span> PHP<<span>br></span> <<span>نوع ورودی = "رادیو" نام = "کتاب" مقدار = "html" checked = "checked" > !}</span> HTML<<span>br></span> </td> </tr></table><p><input type="radio" name="book" value="asp">A.S.P. <br> <input type="radio" name="book" value="js">جاوا اسکریپت <br> <input type="radio" name="book" value="php">PHP <br> <input type="radio" name="book" value="html" checked="checked">HTML <br></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-89.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>نتیجه:</p> <p><input type="radio">A.S.P. <br><input type="radio">جاوا اسکریپت <br><input type="radio">PHP <br><input type="radio" checked>HTML</p> <p>دکمه رادیویی html برای یک انتخاب واحد از چندین گزینه استفاده می شود</p> <p>ویژگی checked بلافاصله عنصر را علامت زده می کند</p> </ul><p><b>مهم:</b>برای عناصر <b>رادیو</b>لازم است که مقدار ویژگی <b>نام</b>همه عناصر در گروه یکسان بودند: در این حالت، عناصر به هم پیوسته کار می کنند، زمانی که یک عنصر روشن است، بقیه خاموش می شوند.</p> <h2><span>لیست کشویی HTML</span></h2> <p>بیایید به مثالی از افزودن یک لیست کشویی نگاه کنیم:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 </td><td class="code"> <<span>نام = "کتاب" اندازه = "1" > را انتخاب کنید</span> <<span>مقدار گزینه = "asp" > !}</span> A.S.P.<<span>/option></span> <<span>مقدار گزینه = "js" > !}</span>جاوا اسکریپت<<span>/option></span> <<span>مقدار گزینه = "php" > !}</span> PHP<<span>/option></span> <<span>مقدار گزینه = "html" selected = "selected" > !}</span> HTML<<span>/option></span> <<span>/انتخاب></span> </td> </tr></table><p><select name="book" size="1"> <option value="asp">A.S.P.</option> <option value="js">جاوا اسکریپت</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </select></p> <p>نتیجه:</p> <p><img src='https://i2.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-68.png' height="122" width="117" loading=lazy loading=lazy></p> <ul><li>لیست کشویی شامل یک تگ اصلی - انتخاب - است که دارای یک جفت بسته است و هر آیتم لیست یک تگ گزینه است که متن مورد در داخل آن نمایش داده می شود.</li> <li>ویژگی اندازه با مقدار <i>"1"</i>نشان می دهد که لیست جمع شده یک مورد را نشان می دهد، بقیه با کلیک بر روی فلش منو باز می شوند</li> <li>ویژگی انتخاب شده یک آیتم (گزینه) نشان می دهد که این مورد خاص در ابتدا قابل مشاهده خواهد بود و موارد باقی مانده "جمع شده" هستند.</li> </ul><p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-90.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>برای لیست های بزرگ و پیچیده یک گزینه وجود دارد <b>عنوان های فرعی را اضافه کنید</b>- تگ optgroup با ویژگی برچسب:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> <<span>نام = "کتاب" اندازه = "1" > را انتخاب کنید</span> <<span>optgroup label = "انگلیسی" ></span> <<span>مقدار گزینه = "asp" > !}</span> A.S.P.<<span>/option></span> <<span>مقدار گزینه = "js" > !}</span>جاوا اسکریپت<<span>/option></span> <<span>مقدار گزینه = "php" > !}</span> PHP<<span>/option></span> <<span>مقدار گزینه = "html" selected = "selected" > !}</span> HTML<<span>/option></span> <<span>/optgroup></span> <<span>optgroup label = "روس ها" ></span> <<span>مقدار گزینه = "asp_rus" > !}</span> ASP در روسی<<span>/option></span> <<span>مقدار گزینه = "js_rus" > !}</span>جاوا اسکریپت به زبان روسی<<span>/option></span> <<span>/optgroup></span> <<span>/انتخاب></span> </td> </tr></table><p><select name="book" size="1"> <optgroup label="Английские"> <option value="asp">A.S.P.</option> <option value="js">جاوا اسکریپت</option> <option value="php">PHP</option> <option value="html" selected="selected">HTML</option> </optgroup> <optgroup label="Русские"> <option value="asp_rus">ASP در روسی</option> <option value="js_rus">جاوا اسکریپت به زبان روسی</option> </optgroup> </select></p> <p><img src='https://i0.wp.com/labs-org.ru/wp-content/uploads/2016/11/1-69.png' height="202" width="211" loading=lazy loading=lazy><br>تا فرصت را فراهم کند <b>انتخاب چندین مورد به طور همزمان</b>شما باید ویژگی چندگانه را اضافه کنید. اما در این مورد، ویژگی size نیز باید روی مقداری بیشتر از 1 تنظیم شود:</p> <p><textarea name="description" cols="30" rows="10">متن

نتیجه:

• عرض عنصر به ویژگی cols بستگی دارد، که مشخص می کند چند کاراکتر به صورت افقی قرار می گیرند
• ویژگی rows تعداد ردیف های یک عنصر را مشخص می کند

عناصر دیگر

عناصر و ویژگی های اضافی

• برای کنترل ها رادیوو چک باکساستفاده از عناصر اضافی راحت است که اولاً متن را به رادیو یا خود عنصر چک باکس متصل می کند و ثانیاً هنگام کلیک کردن یک ضربه اضافه می کند:

<نوع ورودی = "چک باکس" id = "book1" > <label for = "book1" > A.S.P.</label>

A.S.P.

در مثال، یک کتیبه (برچسب برچسب) برای عنصر چک باکس ایجاد شده است. اتصال از طریق ویژگی id انجام می شود که مقدار آن در ویژگی for برچسب مشخص شده است.

نتیجه:

A.S.P.
جاوا اسکریپت

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

خود فرم با استفاده از تگ ایجاد می شود ، که می تواند حاوی هر تگ ضروری باشد و با پارامترهای اختیاری زیر مشخص می شود:

1. آدرس برنامه در سرور وب که محتویات داده های فرم را پردازش می کند.
2. عناصر فرم، که فیلدهای استاندارد برای ورودی کاربر هستند.
3. دکمه ارسال اطلاعات به سرور

استفاده از چندین فرم در یک صفحه مجاز است، اما آنها نباید درون یکدیگر قرار گیرند (مثال 1).

مثال 1: استفاده نادرست از فرم ها

HTML5 IE Cr Op Sa Fx

قبل از ارسال داده ها، مرورگر اطلاعات را به صورت یک جفت name=value آماده می کند، جایی که نام توسط ویژگی name تگ تعیین می شود. یا تگ معتبر دیگر در فرم، و مقدار توسط کاربر وارد می شود یا روی فیلد فرم پیش فرض تنظیم می شود. پس از کلیک کاربر بر روی دکمه Submit، کنترل کننده فرم فراخوانی می شود که اطلاعات وارد شده در فرم را دریافت می کند و سپس آنچه را که توسعه دهنده مد نظر دارد با آن انجام می دهد. کنترل کننده فرم معمولاً برنامه ای است که توسط ویژگی action تگ مشخص می شود.

همچنین می‌توانید یک آدرس ایمیل را به‌عنوان مقدار مشخصه action مشخص کنید که با کلمه کلیدی mailto: شروع می‌شود. هنگامی که فرم را ارسال می کنید، برنامه ایمیل پیش فرض شما راه اندازی می شود. به دلایل امنیتی، مرورگر طوری تنظیم شده است که از ارسال محتاطانه اطلاعات وارد شده در فرم از طریق پست جلوگیری کند. برای تفسیر صحیح داده ها، از ویژگی enctype با مقدار text/plain در تگ استفاده کنید

مرورگرها در کار با این کد مشکل دارند. فایرفاکس لیستی از برنامه های کاربردی مناسب برای ارسال نامه ارائه می دهد (شکل 1)، اینترنت اکسپلورر هشداری را نمایش می دهد (شکل 2) و سعی می کند برنامه مرتبط با ایمیل را راه اندازی کند، Opera مانند فایرفاکس لیستی از گزینه های مناسب را ارائه می دهد. برای ارسال نامه (شکل 3).

برنج. 1. برنامه را در فایرفاکس راه اندازی کنید

برنج. 2. هشدار اینترنت اکسپلورر

برنج. 3. انتخاب یک برنامه در Opera