روز بخیر، طرفداران توسعه وب و کسانی که می خواهند وب سایت خود را ایجاد کنند. قبل از آن، تمام انتشارات من به عناصر اساسی زبان، راه های ایجاد اشیاء محتوای مختلف، قالب بندی، ساختار و غیره اختصاص داده شده بود. با تسلط بر موضوعات قبلی، می توانید یک وب سایت نسبتا خوب ایجاد کنید. با این حال، بدون موضوع امروز: "ایجاد فرم ها در html" ناقص خواهد بود.
این بخش از زبان بسیار مهم است. پس برای مطالعه آن وقت بگذارید. توجه ویژه، در غیر این صورت منبع وب که ایجاد کرده اید به مرحله تولید نمی رسد. بنابراین، پس از خواندن مقاله، یاد خواهید گرفت که برای چه چیزی باید از فرم ها استفاده کنید، از آنها برای ایجاد چه برچسب هایی استفاده می شود و همچنین می توانید امتحان کنید نمونه های خاصدر تمرین بیا شروع کنیم!
فرم چیست و چگونه کار می کند؟
فرم- این یکی از مهمترین اشیاء است که برای تبادل اطلاعات بین سرور و کاربر در نظر گرفته شده است.
به عبارت ساده، اگر می خواهید یک فروشگاه آنلاین با قابلیت سفارش محصولات در وب سایت ایجاد کنید، درخواست ثبت نام در یک منبع وب و کار با حساب ها یا ارائه بازخورد مدیران شرکت به مشتریان را داشته باشید، بدون فرم نمی توانید این کار را انجام دهید.
فرم با استفاده از آن مشخص می شود عنصر خاصزبان html .
توجه داشته باشید که سند کد ممکن است حاوی چندین اعلان برچسب باشد ، با این حال، فقط یک درخواست می تواند به سرور برای پردازش داده ها ارسال شود. به همین دلیل است که اطلاعاتی که توسط کاربر در فیلدهای ارائه شده برای این کار وارد می شود و مربوط به فرم های مختلف است نباید وابسته باشد. همچنین، لانه سازی فرم ها در داخل یکدیگر مجاز نیست.
برای کسانی که بی تاب هستند و مشتاق نگاهی سریع به نمایش کد هستند، من یک مثال ساده از استفاده از یک پنل با یک فیلد متنی برای رمز عبور با یک دکمه را پیوست کرده ام:
| 1 2 3 4 5 6 7 8 9 10 11 12 |
|
شاید اکنون خیلی روشن نباشد که چه چیزی و چگونه در این تعامل دارد برنامه کوچکبا این حال، من تضمین می کنم که پس از خواندن کل این مقاله، می توانید برنامه های کاربردی بسیار پیچیده تر ایجاد کنید.
ارسال اطلاعات به سمت سرور
برای ارسال اطلاعات تایپ شده (یا انتخاب شده) در یک کادر محاوره ای، باید از مکانیزم استاندارد استفاده کنید - دکمه ارسال.
کد چنین روشی به صورت زیر است:
هنگامی که خط ارائه شده را اجرا می کنید، دکمه ای با کتیبه ظاهر می شود: "ارسال".
راه دیگر برای ارسال اطلاعات به سمت سرور، فشار دادن کلید Enter در کادر محاوره ای است.
پس از تایید ارسال اطلاعات مشخص شده، بلافاصله به سرور نمی رسد. ابتدا توسط مرورگر پردازش می شود و به شکل "name=value" در می آید.
پارامتر ویژگی مسئول نام است نوعبرچسب زدن و برای مقدار - داده های وارد شده توسط کاربر. در مرحله بعد، رشته تبدیل شده به handler ارسال می شود که اغلب در ویژگی مشخص می شود عملعنصر .
خود پارامتر اقدام مورد نیاز نیست و در برخی موارد اصلاً مورد نیاز نیست. به عنوان مثال، اگر یک صفحه وب سایت با نوشته شده است با استفاده از phpیا js، سپس پردازش روی آن انجام می شود صفحه فعلیو نیازی به لینک نیست
برای درک بهتر تصویر کلی از عملکرد سایت، می خواهم اضافه کنم که در سرور، داده ها با استفاده از زبان های دیگر پردازش می شوند. بنابراین، زبان های سمت سرور عبارتند از: Python، php، زبان های C مانند (C#، C، و غیره)، جاوا و غیره.
اکنون می خواهم توقف کنم و بیشتر در مورد عنصر صحبت کنم . اگه توضیح بدی به زبان ساده، آن برای ایجاد فیلدهای متنی، دکمه های رادیویی، دکمه های مختلف، فیلدهای مخفی، چک باکس ها و سایر اشیاء مورد نیاز است.
لزومی ندارد که برچسب با آن جفت شود ، با این حال، اگر نیاز به پردازش سوابق کاربر یا وارد کردن آنها به عنوان مثال در یک پایگاه داده دارید، بدون کانتینر نمی توانید انجام دهید.
ویژگی های اصلی از این عنصرزبان نشانه گذاری فرامتن عبارتند از:
- متن- یک فیلد متنی ایجاد می کند.
- ارسال– ایجاد دکمه ای برای ارسال داده ها به سرور؛
- تصویر- مسئول دکمه با تصویر است.
- بازنشانی کنید- یک دکمه برای پاک کردن فرم تنظیم می کند.
- کلمه عبور- یک فیلد متنی را به طور خاص برای رمزهای عبور تنظیم می کند.
- چک باکس- مسئول فیلدهای دارای چک باکس.
- رادیو- مسئول زمینه هایی با انتخاب یک عنصر؛
- دکمه- یک دکمه ایجاد می کند.
- پنهان شده است- برای فیلدهای پنهان استفاده می شود.
- فایل– فیلد مسئول ارسال فایل ها را تنظیم می کند.
روشهای انتقال اطلاعات
2 راه برای انتقال اطلاعات کاربر به سمت سرور وجود دارد: گرفتنو پست. این روش ها همان عمل را انجام می دهند، اما تفاوت قابل توجهی با یکدیگر دارند. بنابراین، قبل از ذکر هر یک از آنها، با ویژگی های آنها آشنا می شویم.
| پست | گرفتن | |
| اندازه اسناد ارسالی | محدود به سمت سرور | حداکثر - 4 کیلوبایت. |
| نحوه نمایش اطلاعات ارسالی | فقط زمانی در دسترس است که از طریق افزونه های مرورگر یا سایر محصولات نرم افزاری خاص مشاهده شود. | فوراً در دسترس همه است. |
| استفاده از نشانک ها | هیچ راهی برای افزودن به نشانک ها وجود ندارد، زیرا درخواست ها تکرار نمی شوند (همه صفحات به یک آدرس پیوند دارند). | هر صفحه ای که درخواستی داشته باشد را می توان به عنوان نشانک ذخیره کرد و بعداً به آن بازگرداند. |
| ذخیره سازی | مستقر پاراگراف قبلیهمه درخواست ها در یک صفحه | هر صفحه را می توان به طور جداگانه کش کرد. |
| هدف | برای حمل و نقل استفاده می شود فایل های حجیم(کتاب، تصاویر، فیلم ها و غیره)، پیام ها، نظرات. | برای جستجوی مقادیر درخواستی در یک منبع وب یا برای ارسال پیام های متنی کوتاه عالی است. |
به منظور نشان دادن اینکه مرورگر باید از کدام یک از دو روش انتقال داده استفاده کند، در عنصر از پارامتر ارائه شده استفاده کنید روش(مثلا، روش = "پست").
بیایید به مثال دوم نگاه کنیم. بیایید فرمی ایجاد کنیم که در آن باید اطلاعات شخصی خود را وارد کنید (نام و نام خانوادگی، تاریخ تولد) و یک رمز عبور ایجاد کنید. سپس همه اینها را با استفاده از روش به سرور ارسال می کنیم پست.
اطلاعات شخصی خود را وارد کنید!
به عنوان مثال، برای وارد کردن تاریخ، سوئیچ هایی برای تعداد هر پارامتر (روز، ماه و سال) و همچنین یک پانل کشویی با خود تقویم برای راحتی وجود دارد.
ایجاد پنل ثبت نام
برچسب ها و ویژگی های اصلی پوشش داده شده است. به همین دلیل زمان آن رسیده است که با استفاده از سبک یک فرم ثبت نام کامل ایجاد کنید نشانه گذاری cssو بررسی داده های وارد شده البته یه نگاهی بنداز کار سرورما با آنها موفق نخواهیم شد، اما طراحی و جزئیات مهمما تهیه خواهیم کرد.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
|
من به شما توصیه می کنم پس انداز کنید این کدبرنامه های موجود در یک سند با پسوند html و رمزگذاری utf-8، و دومی را در پنجره مرورگر باز کنید. یک پنل ثبت نام با شکوه تمام با فیلدهایی برای وارد کردن نام، نام خانوادگی، ایمیل و رمز عبور مکرر خود خواهید دید. توجه داشته باشید که وقتی صفحه را راه اندازی می کنید، مکان نما بلافاصله در اولین فیلد متنی قرار می گیرد. این تکنیک از طریق ویژگی به دست می آید فوکوس خودکار.
تمام تعاملات - فیلدهای ورودی، چک باکس ها، دکمه های رادیویی، لیست های کشویی، دکمه ها - فرم های وب و عناصر آنها هستند. شما در فرم نظر می گذارید، با استفاده از فرم ثبت نام می کنید، از طریق فرم وارد می شوید، از فرم جستجو استفاده می کنید، در نظرسنجی ها رای می دهید، فایل ها را آپلود می کنید، مشترک می شوید - همه این کارها را با استفاده از فرم های وب انجام می دهید.
سازمان داخلی
فرم در واقع از دو بخش تشکیل شده است: طراحی بصریو یک اسکریپت که داده های وارد شده را پردازش می کند. برای نوشتن یک اسکریپت باید یکی از زبان های برنامه نویسی را بدانید. ما در اینجا آنها را مطالعه نمی کنیم، بنابراین مؤلفه HTML را تجزیه و تحلیل می کنیم - یاد می گیریم که چگونه یک رابط فرم ایجاد کنید، با این فرض که در جایی از قبل یک اسکریپت داریم که آن را پردازش می کند.
فرم HTML با استفاده از جفت برچسب ، که تگ های عناصر آن در داخل آن قرار دارد.
برچسب ها
قبل از نمایش نمونه ها، اجازه دهید از طریق برچسب ها بگذریم.
. یک فرم ایجاد می کند. اگر فرم را با جدول مقایسه کنید، تگ همان نقش تگ را ایفا می کند ویژگی های دیگری نیز وجود دارد، اما آنها بسیار به ندرت استفاده می شوند.
. یک تگ جالب که با آن می توانید هر عنصر ورودی را ایجاد کنید که کدام یک مشخص است نوع ویژگی. به عبارت دقیق تر، این تگ می تواند خارج از فرم استفاده شود، اما پس از آن نمی توانید آدرس کنترل کننده را مشخص کنید و عنصر صفحه غیر کاربردی خواهد بود. معنی شرح پرچم ها با کمک آنها می توانید چندین گزینه را همزمان انتخاب کنید دکمه انتخاب فایل فیلد پنهان، در مرورگر قابل مشاهده نیست دکمه با عکس فیلد ورود رمز عبور یک فیلد متنی معمولی، اما کاراکترهایی که وارد می‌کنید در پشت ستاره‌ها (*) پنهان هستند. سوئیچ ها تقریبا چک باکس، اما با کمک آنها می توانید تنها یکی از گزینه های پیشنهادی را انتخاب کنید دکمه بازنشانی داده های فرم به مقادیر اصلی دکمه ارسال اطلاعات به سرور معمولاً آنها را برای تأیید ورودی فشار می دهید - ذخیره، اعمال، OK فیلد متنی بسیاری از مقادیر جدید در HTML5 ظاهر شده اند، اما، متأسفانه، تا کنون (ژوئن 2016) فقط تا حدی پشتیبانی می شوند. اکنون که همه برچسب ها شناخته شده اند، اجازه دهید یک فرم مجوز کوچک ایجاد کنیم که داده های آن توسط فایل پردازش می شود. script.php، در پوشه ای با صفحه HTML قرار دارد. کد به این صورت خواهد بود.
بیایید به برخی از قطعات آن نگاه کنیم. - یک فرم پردازش شده توسط فایل script.php ایجاد کنید. داده ها با استفاده از روش GET منتقل می شوند. <
br>
- برچسب انتقال به خط بعدی. <
ورودی نام="
وارد شدن"
نوع="
متن"
اندازه="25"
بیشترین طول="30"
ارزش"میخائیل">- یک فیلد متنی با نام ورود به سیستم با عرض 25 کاراکتر ایجاد کنید. ما Mikhail را به عنوان مقدار پیش فرض مشخص می کنیم تا کاربر بتواند بفهمد چه چیزی و چگونه باید وارد شود. <
ورودی نام="
عبور"
نوع="
کلمه عبور"
اندازه="25"
بیشترین طول="30"
ارزش="">
- ایجاد یک فیلد ورود رمز عبور (نمادها با ستاره جایگزین می شوند). عرض میدان - 25، حداکثر طولرمز عبور - 30 کاراکتر. <
انتخاب کنید><
گزینه ارزش="
ج1"> مهمانگزینه><
گزینه ارزش="
ج2"> مدیرگزینه>انتخاب کنید>
- یک لیست کشویی ساده از دو مورد ایجاد کنید. <
ورودی نام="
صرفه جویی"
نوع="
چک باکس"
ارزش="
آره"> به خاطر بسپار- یک چک باکس اضافه کنید و متن توضیحی بنویسید. <
br><
ورودی نوع="
ارسال"
نام="
وارد"
ارزش"ورود">- یک دکمه ایجاد کنید، با کلیک کردن روی آن، فرآیند پردازش داده ها شروع می شود.
- فرم را ببندید در مرورگر، فرم وب مانند تصویر زیر خواهد بود. می توانید آن را پر کنید، اما برای شروع کار باید کد بنویسید و در یک فایل ذخیره کنید script.phpدر کنار صفحه HTML با در نظر گرفتن اصول تگ های HTMLما نمی توانیم از لمس این موضوع خودداری کنیم عنصر مهممانند فرم ها بازخورد اغلب در صفحات وب مورد نیاز است. به عنوان مثال، پر کردن فرم در سایت، ثبت نام، مجوز، نظرات و غیره. در تمام این موارد کاربر قسمت های خاصی (فیلدهای فرم) را در صفحه پر می کند و پس از آن داده ها به سرور ارسال می شود. برای ایجاد بازخوردفرم ها استفاده می شود. فرم یک قطعه است سند HTMLبرای ورودی کاربر در نظر گرفته شده است. شکل یک فرم ثبت نام دانشجو در وب سایت یک موسسه آموزشی را نشان می دهد. برای ایجاد فرم از یک ظرف استفاده می شود ساختار در ساده ترین شکل آن: هر فرم نیز باید داشته باشد دکمه های ارسال، برای ارسال داده ها پس از پر کردن فرم طراحی شده است. ساختار دکمه: بنابراین، برای ثبت تقریباً تمام عناصر فرم، از تگ استفاده می شود با ویژگی type برای ایجاد دکمه ای که تمام داده ها را از فرم ها بازنشانی می کند، از ساختار زیر استفاده می شود: برای ایجاد فیلد متنی(فیلد متنی) یک پارامتر متن وجود دارد. پارامترهای زیر استفاده می شود: نام - نام فیلد. اندازه - برای فیلد در نمادها؛ maxlength - حداکثر تعداد کاراکترهای ممکن در فیلد. مقدار - اطلاعاتی که به طور پیش فرض در فرم نمایش داده می شود نمونه ای از یک فرم ورودی با دو فیلد متنی: نتیجه فرم در شکل نشان داده شده است. اگر نیاز دارید در قسمت متن وارد کنید تعداد زیادی ازاطلاعات، به عنوان مثال، یک نظر از فرم یک ناحیه متنی استفاده می کند که با استفاده از یک برچسب ایجاد می شود نتیجه کار کد با ناحیه متن در شکل نشان داده شده است. عنصر بعدیفرم ها لیست هایی هستند که به شما امکان می دهند از میان مجموعه ای از مقادیر ارائه شده انتخاب کنید. برچسب ها به شما امکان می دهند یک فرم لیست ایجاد کنید ساختار ورودی فهرست: برای اینکه عنصر هنگام بارگذاری صفحه برجسته شود، در تگ ضروری است یک روش انتخاب مشابه، چک باکس و عناصر فرم رادیو دکمه است. تفاوت بین این عناصر این است که یک چک باکس به شما امکان می دهد چندین انتخاب را انجام دهید، در حالی که یک دکمه رادیویی فقط یک انتخاب را امکان پذیر می کند. ساختار یک چک باکس و ورودی دکمه رادیویی: متن دکمه رادیویی: متن در عناصر مشخص شده در ساختار، ویژگی checked به طور پیش فرض برای برجسته کردن کادر انتخاب و دکمه رادیویی استفاده می شود. نمونه ای از استفاده از چک باکس، دکمه رادیویی و کد HTML در شکل نشان داده شده است. یکی دیگر از عناصر فرم یک دکمه است که با استفاده از ویژگی type tag مشخص شده است با دکمه مقدار: در کد مشخص شده برای ایجاد یک دکمه، یک پارامتر onclick وجود دارد که معمولا کدی را در یک زبان برنامه نویسی مشخص می کند تا با کلیک روی این دکمه، عمل خاصی را انجام دهد: برای نمایش یک پیام در یک پنجره خاص، از دستور JavaScript – aler استفاده کنید. نتیجه مثال در شکل نشان داده شده است. برای درج یک تصویر در یک دکمه، از کد نشان داده شده در مثال زیر استفاده کنید: هنگام ثبت نام و ورود به وب سایت ها، از یک فیلد با تست مخفی استفاده می شود که به عنوان ستاره نمایش داده می شود. این عنصر فرم رمز عبور است: ثبت نام در سایت اغلب به چندین صفحه تقسیم می شود و هر صفحه بعدی باید حاوی اطلاعات صفحه قبلی باشد. برای پنهان کردن اطلاعات ارسال شده، از عنصر فرم پنهان استفاده می شود: عنصر فرم پنهان در پنجره مرورگر نامرئی خواهد بود. برای آپلود فایل ها در سرور، فرم ها دارای یک عنصر فایل هستند. یک کد نمونه برای آپلود فایل ها در سرور در زیر ارائه شده است: بنابراین، در این مبحث به عناصر فرم برای ایجاد صفحات مختلف HTML نگاه کردیم، که همراه با کنترل‌کننده‌های اسکریپت در یک رایانه یا سرور، به شما امکان می‌دهد تا برنامه‌های کاربردی وب کامل را توسعه دهید. اغلب در وب سایت ها می توانید صفحاتی را پیدا کنید که فرم های HTML روی آنها قرار داده شده است. فرم های وب راهی مناسب برای دریافت اطلاعات از بازدیدکنندگان سایت شما هستند. نمونه ای از این -، - است که بازخوردی را به بازدیدکنندگان و توسعه دهندگان سایت ارائه می دهد. فرم ها همچنین هنگام توسعه یک CMS برای توسعه دهندگان سایت مناسب هستند که به آنها امکان می دهد ویژگی اصلی سایت - مربوط بودن را حفظ کنند. این مقاله به اصول ایجاد فرم‌های HTML، پردازش آنها و راه‌های انتقال داده‌ها از فرم‌های صفحه به اسکریپت‌های PHP اختصاص دارد. برچسب ها و
ابتدا و انتهای فرم را مشخص کنید. تگ فرم شروع شامل دو ویژگی است: عملو روش. ویژگی action حاوی URL اسکریپت است که برای پردازش اسکریپت باید فراخوانی شود. صفت روشبه مرورگر می گوید که از چه نوع درخواست HTTP برای ارسال فرم استفاده کند. مقادیر ممکن پستو گرفتن. تفاوت اصلی بین روش های POST و GET در نحوه انتقال اطلاعات است. در روش GET، پارامترها از طریق نوار آدرس، یعنی. اساساً در هدر درخواست HTTP، در حالی که در روش POST پارامترها از طریق بدنه درخواست HTTP منتقل می شوند و به هیچ وجه در نوار آدرس منعکس نمی شوند.
این فرم html حاوی یک عنصر است مرور کردن، که یک کادر محاوره ای برای انتخاب یک فایل برای آپلود در سرور باز می کند. وقتی دکمه را فشار می دهید "انتقال فایل"، فایل به اسکریپت handler ارسال می شود. سپس باید یک اسکریپت کنترل کننده بنویسید action.php. قبل از نوشتن handler، باید تصمیم بگیریم که فایل را در کدام دایرکتوری کپی کنیم: if(isset($_FILES [ "myfile" ])) // اگر فایل موجود باشد اگر به کاربران اعتماد دارید که هر فایلی را در سرور خود آپلود می کنند، باید بسیار مراقب باشید. مهاجمان می توانند کد "بد" را در یک تصویر یا فایل جاسازی کنند و آن را به سرور ارسال کنند. در چنین مواردی، شما باید به شدت بر دانلود فایل ها کنترل داشته باشید. این مثالایجاد یک دایرکتوری و کپی کردن یک فایل در آن دایرکتوری بر روی سرور را نشان می دهد. من همچنین می خواهم یک مثال را با عنصر نشان دهم چک باکس. این عنصر با سایر عناصر تفاوت اندکی دارد که اگر یکی از عناصر نباشد چک باکس a انتخاب نشده است، سپس متغیر superglobal $_POSTمقدار خالی را برمی گرداند:
if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // اگر حداقل 1 عنصر انتخاب شده باشد
. ویژگی های زیر به آن متصل شده است.
فرم نمونه
عناصر فرم ... 
1) یک فرم ساده ایجاد کنید
اظهار نظر
{
$catalog = "../image/" ; // کاتالوگ ما
if (is_dir ($catalog)) // اگر چنین دایرکتوری وجود داشته باشد
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // فایل موقت
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // نام فایل
if(! copy ($myfile, $catalog)) echo "خطا در کپی کردن فایل". $myfile_name // اگر کپی فایل ناموفق بود
}
else mkdir ("../image/" ); // اگر چنین دایرکتوری وجود نداشته باشد، آن را ایجاد می کنیم
}
?>
اظهار نظر
دیگر اکو "انتخاب مقدار";
?>
بهترین مقالات در این زمینه
