فرم ها و عناصر فرم html. فرم های HTML

با سلام خدمت شما خوانندگان محترم سایت وبلاگ. امروز می خواهم در مورد فرم های HTML صحبت کنم. موتور سایت شما (cms) هرچه که باشد، قطعاً از فرم های ایجاد شده با استفاده از تگ های Form و Input و همچنین ویژگی ها و پارامترهای Button، Checked، Value، Checkbox، Radio، Checkbox، Submit ... استفاده می کند.

خوب، شما همچنین می توانید عناصری را برای ایجاد لیست های کشویی و فیلدهای متنی به این اضافه کنید - Select، Option، Textarea، Label، Fieldset، Legend.

چرا به ما نیاز داریم و فرم ها چگونه در وب سایت های مدرن کار می کنند

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

بنابراین، با توجه به نیاز به مطالعه این عناصر، فکر می کنم دیگر نباید سؤالی وجود داشته باشد، بنابراین وقت آن است که مستقیماً به بررسی گزینه های احتمالی آنها برویم.

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

در هسته خود، فرم ها از عناصر تشکیل شده اند که برای ایجاد آنها، در داخل ظرف اصلی، از تگ های فرم، تگ های مختلفی درج می شود - Checked، Value، Checkbox، Radio، Checkbox، Submit و غیره. فقط باید کد آن را قرار دهیم. در هر مکان مناسب از قالب سایت با مشخص کردن، با استفاده از برچسب ها و ویژگی های آنها، چگونه باید به نظر برسد.

این می‌تواند یک کادر متنی با دکمه ارسال برای درخواستی که وارد کرده‌اید، انتخاب‌هایی با دکمه‌های رادیویی (که می‌توانید تنها یکی از دکمه‌های ارائه‌شده را فشار دهید)، کادرهای متنی متعدد با یک دکمه ارسال () و موارد دیگر باشد.

به عنوان مثال، در مورد "جستجو"، با استفاده از ویژگی Value، می توانید مشخص کنید که دقیقاً چه چیزی روی دکمه ای که در کنار فیلد برای وارد کردن پرس و جو قرار دارد، نوشته شود. داده های وارد شده در فرم ها باید به نحوی بیشتر پردازش شوند.

به عنوان مثال، در مورد بازخورد، کاربر پس از پر کردن فیلد با نام خود، ایمیل خود و متن پیام را وارد کرده و سپس بر روی دکمه ارسال کلیک می کند، این حق را خواهد داشت که امیدوار به ارسال اطلاعات باشد. از فرم به ایمیل نویسنده سایت. اما متأسفانه، اجرای این مورد تنها با استفاده از یک زبان نشانه گذاری فرامتن () امکان پذیر نیست.

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

به طور معمول، یک برنامه پردازشی یک اسکریپت نوشته شده در PHP است. بنابراین در ویژگی Action تگ Form باید مسیر فایل این اسکریپت را که در سرور هاست شما قرار دارد ثبت کنید. من به عنوان مثال اشتراک در فید RSS وبلاگ خود را از طریق ایمیل می‌آورم:

کمی نامفهوم، احتمالاً در ابتدا به نظر می رسد، اما فکر می کنم با پیشرفت داستان همه چیز مشخص خواهد شد.

برچسب های فرم و ورودی برای ایجاد دکمه ها، چک باکس ها و دکمه های رادیویی

هر فرمی باید در برچسب های باز و بسته شود فرم... این یک نوع ظرف برای ایجاد آنها است. این تگ دارای تعدادی ویژگی ضروری و اختیاری است:

1. نام - یک نام منحصر به فرد که باید مشخص شود اگر چندین فرم وب در فایل Html استفاده می شود که در آن کاری انجام می دهید.
2. Action - یک ویژگی مورد نیاز که مسیر اسکریپت را نشان می دهد که داده ها را برای پردازش بیشتر از آن دریافت می کند
3. روش - با استفاده از آن می توانید روش انتقال داده ها را از این فرم وب به اسکریپت فایل کنترل کننده تغییر دهید. اگر آن را مشخص نکنید، به طور پیش فرض از روش Get استفاده می شود که در واقع عمدتاً برای متغیرها و پیام های کوتاه در نظر گرفته شده است و علاوه بر این، به صورت باز داده ها را از طریق نوار آدرس مرورگر منتقل می کند. برای انتقال داده های فرم به اسکریپت کنترلر، همچنان بهتر است از آن استفاده کنید روش POSTبه طور خاص برای انتقال پیام های متنی به صورت بسته طراحی شده است

بیایید بقیه برچسب هایی را در نظر بگیریم که به شما امکان ایجاد انواع فرم های وب را می دهد. همه کاره ترین آن است ورودی... در داخل آن باید ویژگی Type تجویز شود که مشخص می کند فرم HTML ایجاد شده با این تگ دقیقاً چه خواهد بود.

عناصر زیر را می توان با استفاده از Input و Type ایجاد کرد:

1. فیلدهای متنی تک خطی (نوع = "متن")
2. فیلدهای وارد کردن رمز عبور (نوع = "رمز عبور")
3. چک باکس ها (نوع = "چک باکس")
4. دکمه های رادیویی (نوع = "رادیو")
5. فیلدهای پنهان (نوع = "پنهان")
6. دکمه های معمولی (نوع = "دکمه")
7. دکمه های ارسال داده ها به کنترل کننده (نوع = "ارسال")
8. دکمه هایی برای آوردن فرم وب به حالت اولیه (نوع = "بازنشانی")
9. فیلدهایی برای آپلود فایل ها در سرور (نوع = "فایل)
10. دکمه های دارای تصویر (نوع = "تصویر")

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

نمونه هایی از فرم های ایجاد شده در Input با مقادیر مختلف برای Type

سایر ویژگی های تگ Input و نمونه هایی از استفاده از آنها

بیایید ببینیم بقیه ویژگی ها برای چیست:

1. Name - اگر قرار است داده ها به اسکریپت برنامه کنترل کننده ارسال شوند، باید پارامتر ویژگی Name را مشخص کنید. تحت این نام، داده های ارسالی از فرم در برنامه کنترل کننده اطلاعات ظاهر می شود.
2. اندازه - برای تنظیم اندازه فیلد فرم وب ایجاد شده استفاده می شود. مقدار در تعداد کاراکترهایی که می توانند در این قسمت قرار بگیرند نشان داده می شود. اگر Size مشخص نشده باشد، عرض پیش فرض 24 کاراکتر خواهد بود
3. Maxlength - به طور پیش فرض تعداد کاراکترهایی که می توان در فرم Html وارد کرد محدود نیست، اما با استفاده از Maxlength می توانید این محدودیت را تعیین کنید. شما نمی توانید بیش از نویسه هایی که در فیلد نشان داده شده است وارد کنید.
4. مقدار - با استفاده از آن می توانید تعیین کنید که دقیقاً چه چیزی به طور پیش فرض در فیلد یا روی دکمه ارسال داده نوشته شود
5. علامت زده شده یک ویژگی پرچم است که می تواند برای دکمه های رادیویی (رادیو) یا برای چک باکس ها (چک باکس) در ورودی وارد شود. در این حالت، این دکمه رادیویی یا چک باکس هنگام بارگیری یک صفحه با یک فرم وب فعال خواهد بود (آنها قبلاً یک علامت دارند)

حالا بیایید همه چیز را مرور کنیم نمونه هایی از فرم با ورودی... شکل ظاهری فیلد متنی مشابه ظاهر فیلد برای وارد کردن رمز عبور است، بنابراین ما فقط گزینه ایجاد Text را در نظر می گیریم، به عنوان مثال برای وارد کردن آدرس ایمیل:

(! LANG: اکنون بیایید به ایجاد یک فرم وب با دکمه های رادیویی (رادیو) نگاه کنیم:

توجه داشته باشید که این فرم دو بار از تگ ورودی استفاده می کند - یک بار برای ایجاد هر یک از دو دکمه رادیویی. علاوه بر این، هر یک از آنها دارای ویژگی Name با مقدار یکسان (rezultat) و مقدار Value متفاوت است (بله و نه).

یعنی در هنگام پردازش آن، در صورت انتخاب هر یک از دکمه های رادیویی، متغیری ارسال می شود که نام آن در Name نوشته شده است، اما مقدار این متغیر بستگی به این دارد که کدام دکمه رادیویی انتخاب شده است.

بیایید نمونه ای از ایجاد یک فرم وب با چک باکس ها را در نظر بگیریم (Checkbox):

چک باکس ها با قابلیت انتخاب چندین گزینه به طور همزمان با دکمه های رادیویی متفاوت هستند. از نام برای تعیین اینکه چک باکس ها در کدام چک باکس قرار دارند در فایل handler استفاده می شود، و Value مقداری را که برای کنترل کننده ارسال می شود تعیین می کند (اگر Value مشخص نشده باشد، متنی که در کنار این چک باکس قرار دارد برای کنترل کننده ارسال می شود) .

Select، Option، Textarea، Label، Fieldset، Legend - لیست های کشویی، مناطق متنی و سایر عناصر فرم های وب

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

همه کاربران بدون هیچ توضیح اضافی متوجه هدف این عناصر می شوند و در صورت مشاهده دکمه Html فرم متوجه می شوند که باید روی آن کلیک کنند.

علاوه بر این، تمام عناصر تشکیل دهنده آن (مانند Select، Option، Textarea، Label، Fieldset، Legend) قبلاً قطعات کار تمام شده (ظروف) هستند، برای درج آنها فقط استفاده از برچسب مورد نیاز با ویژگی ها و پارامترهای لازم کافی است.

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

که به نظر می رسد که فرم های وب در Html تلاشی برای انتقال کلید هستند عناصر مورد استفاده در هر سیستم عامل، به صفحات وب سایت. اما چرا ممکن است آنها در صفحات سایت مورد نیاز باشند؟

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

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

در این مورد، تگ فرم باز باید چیزی شبیه به این باشد:

تگ های کشویی را انتخاب کنید و گزینه - گزینه

تمام عناصر فرم وب که فیلدهایی را با لیست های کشویی ایجاد می کنند به همین ترتیب تشکیل می شوند. ابتدا، محفظه جعبه ترکیبی با استفاده از تگ Html Select باز و بسته می شود. و سپس در داخل این کانتینر کانتینرهای جداگانه ای با آیتم ها (عناصر) این لیست ایجاد می شود. این کار با استفاده از تگ های باز و بسته کردن گزینه انجام می شود.

چیزی شبیه به این معلوم می شود:

اما این یک ساخت و ساز ساده است، زیرا Select و Option دارای تعدادی ویژگی هستندکه خصوصیات و ظاهر کادر لیست کشویی ایجاد شده را مشخص می کند.

1. نام - شما باید یک نام منحصر به فرد برای این عنصر فرم وب ایجاد شده با استفاده از Select تعیین کنید. این نام در برنامه مدیریت داده به عنوان نام متغیر به سرور منتقل می شود. مقدار ویژگی Value (تنظیم شده در Option برای هر آیتم) از آیتم لیست کشویی که کاربر انتخاب می کند به عنوان مقدار این متغیر ارسال می شود.
2. اندازه - با استفاده از آن می توانید تعداد موارد نمایش داده شده را تنظیم کنید. به عبارت دیگر، با کمک Size می توانید ارتفاع لیست را با تعداد خطوط نمایش داده شده اندازه گیری کنید. اگر به صراحت مقدار Size را در تگ Select مشخص نکنید، از مقدار پیش‌فرض ارتفاع لیست کشویی استفاده می‌شود و در صورت عدم وجود یا عدم وجود ویژگی Multiple در Select متفاوت خواهد بود:
   1. اگر Multiple در Select وجود داشته باشد، ارتفاع فهرست کشویی در فرم وب به طور پیش فرض برابر با تعداد عناصر آن خواهد بود. آن ها همه موارد در منوی کشویی چند گزینه ای نشان داده خواهند شد. نمونه ای از جمع را در زیر ببینید. اگر مشخصه Size در Select روی کمتر از تعداد موارد تنظیم شده باشد، نوار اسکرول در سمت راست ظاهر می شود.
   2. اگر Multiple در Select وجود نداشته باشد، ارتفاع فهرست کشویی در فرم وب به طور پیش فرض برابر با یک خط خواهد بود. آن ها فقط یک خط قابل مشاهده خواهد بود و بقیه موارد فقط با فشار دادن دکمه آسانسور (در سمت راست) در دسترس خواهند بود. مثال زیر را ببینید
3. چندگانه - اختصاص دادن این ویژگی در تگ Select به شما این امکان را می دهد که یک لیست کشویی با قابلیت انتخاب چندین مورد به طور همزمان ایجاد کنید. در زیر در مورد این ویژگی بیشتر بخوانید.

فرم های کشویی را می توان به دو گزینه تقسیم کرد. در گزینه اول می توانید تنها یک عنصر (خط) از فیلد را با لیست کشویی انتخاب کنید، در گزینه دوم با نگه داشتن Ctrl یا Shift می توانید همزمان چند مورد از موارد موجود را انتخاب کنید.

در این صورت در گزینه دوم اطلاعات تمامی آیتم های انتخاب شده به سرور ارسال می شود. اینکه کدام لیست کشویی ایجاد خواهد شد با وجود یا عدم وجود ویژگی Multiple در تگ Select تعیین می شود.

چندگانه در Select بدون پارامتر مشخص شده است، زیرا به سادگی Multiple نوشته شده است و بس. در صورت وجود، فرم وب لیست کشویی با امکان انتخاب چندگانه (نگه داشتن Ctrl یا Shift) ایجاد می شود.

گونه ای از فیلد با لیست کشویی که در آن وجود خواهد داشت امکان انتخاب چندگانه، چیزی شبیه به این خواهد بود:

در سمت راست نمونه ای از فرم وب برای یک لیست کشویی چند انتخابی است که بر اساس کد بالا است. همانطور که می بینید با نگه داشتن Ctrl یا Shift می توانید چندین نقطه را همزمان انتخاب کنید.

اگر ویژگی Multiple در تگ Select وجود نداشته باشد، تنها یک مورد از این لیست کشویی (ردیف) قابل انتخاب است.

نمونه ای که در آن فقط یک مورد می تواند انتخاب شود را می توان در اینجا مشاهده کرد:

برچسب وب سایت SelectED Legend را انتخاب کنید

ویژگی های برچسب گزینه

در لیست کشویی ایجاد شده (با استفاده از Select و Option)، می توانید چیزی مانند جداکننده ها را با عنوان گروه ها اضافه کنید که از نظر سبک قلم با بقیه آیتم های منو متفاوت است.

برای ایجاد یک گروه از آیتم های موجود در لیست کشویی، باید آنها را در تگ های باز و بسته شدن فرم Optgroup قرار دهید و در تگ افتتاحیه Optgroup، ویژگی Label را بنویسید که به عنوان پارامتر آن را خواهید دید. باید نام گروه مورد نظر را وارد کنید.

به عنوان مثال مانند این:

برچسب را انتخاب کنید
وب سایت SelectED Legend

Textarea - ایجاد یک فیلد متنی در یک فرم

یک عنصر دیگر از فرم های وب وجود دارد که ما آن را در نظر نگرفته ایم - Textarea (فیلدی با قابلیت وارد کردن متن چند خطی). با استفاده از تگ Html جفت شده Textarea ایجاد شده است. علاوه بر این، در آن می توانید متن را به یک خط جدید منتقل کنید و با در نظر گرفتن انتقال های انجام شده به سرور منتقل می شود.

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

ویژگی های زیر را می توان با Textarea استفاده کرد:

1. نام - شما یک نام برای این عنصر فرم وب تعیین می کنید. این به سرور به برنامه مدیریت داده ارسال می شود
2. Cols - می توانید از آن برای تنظیم عرض فیلد چند خطی ایجاد شده به کاراکتر استفاده کنید.
3. ردیف - ارتفاع فیلد چند خطی ایجاد شده (در ردیف) را تنظیم کنید. اگر متن وارد شده توسط کاربر دارای خطوط بیشتر از ارتفاع فیلد متن چند خطی باشد، یک نوار اسکرول در سمت راست فیلد در فرم وب ظاهر می شود.
4. فقط خواندنی - کاربران را از تغییر یا افزودن متن خود به این قسمت (فقط خواندنی) منع می کند.
5. غیرفعال - کاربر، مانند ویژگی Readonly، نمی تواند محتوای فیلد متنی را در فرم وب تغییر دهد، اما رنگ آن را به خاکستری تغییر می دهد که نشان دهنده غیرفعال بودن آن است.

برچسب - این تگ Html در فرم برای چیست؟

تگ html Label به شما امکان می دهد یک ویژگی بسیار جالب را در فرم هایی که در سیستم عامل ها موجود است پیاده سازی کنید. در آنجا، اگر به یاد داشته باشید، برای فعال کردن هر عنصر، لازم نیست روی آن کلیک کنید، می توانید روی نام این عنصر کلیک کنید - همچنان فعال خواهد شد.

در فرم های وب، این به طور پیش فرض اتفاق نمی افتد - برای فعال کردن آن باید روی عنصر فرم Html کلیک کنید. به عنوان مثال، باید روی یک چک باکس کلیک کنید تا یک علامت در آن قرار دهید. کلیک بر روی متن کنار چک باکس هیچ تاثیری نخواهد داشت. خودتان انرا آزمایش کنید:

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

اما چگونه می توان عنصر Html فرم و متن را پیوند داد؟ برای انجام این کار، یک شناسه با یک پارامتر منحصر به فرد به ویژگی اضافه کنید و متن را با باز و بسته شدن برچسب Label احاطه کنید. و این تمام نیست. در تگ Label باز شده باید ویژگی For را ثبت کنید که پارامتر آن باید دقیقاً با ویژگی ID در تگ Html عنصر فرم یکی باشد. چیزی شبیه به این معلوم می شود:

همانطور که می بینید، اکنون به لطف استفاده از Label، عناصر فرم وب را می توان نه تنها با کلیک بر روی آن، بلکه با کلیک بر روی متن واقع در کنار آن فعال کرد.

Fieldset و Legend - شکستن شکل به قطعات

احتمالاً بارها دیده اید که فرم های بزرگ در Html به گروه هایی (Fieldset) تقسیم می شوند که توسط یک فریم احاطه شده اند و هر یک از این گروه ها عنوان خاص خود را دارند (Legend). این فقط با دو برچسب انجام می شود: Fieldset و Legend. آنها جفت هستند، یعنی. آنها باید بدون نقص باز و بسته شوند.

بنابراین، برای ایجاد گروهی از اجزای سازنده، باید تمام این قسمت ها را در تگ های باز و بسته Fieldset قرار دهید. و برای تعیین عنوان (Legend) برای این گروه، باید بلافاصله پس از باز شدن Fieldset ساختاری را از Legend باز و بسته بنویسید که بین آن باید متن عنوان گروه را درج کنید.

در اینجا نمونه ای از ایجاد گروه ها با استفاده از Fieldset و Legend آورده شده است:

موفق باشی! به زودی شما را در صفحات سایت وبلاگ می بینیم

با رفتن به اینجا می توانید ویدیوهای بیشتری را تماشا کنید

ممکن است علاقه مند باشید

انتخاب، Option، Textarea، Label، Fieldset، Legend - تگ های Html از فرم کشویی و جعبه متنی
لیست در کد Html - برچسب های UL، OL، LI و DL
MailTo - چیست و چگونه می توان یک پیوند در Html برای ارسال ایمیل ایجاد کرد
نحوه تنظیم رنگ ها در کد Html و CSS، انتخاب سایه های RGB در جداول، Yandex و سایر برنامه ها

فرم های HTML عناصر رابط پیچیده ای هستند. آنها شامل عناصر عملکردی مختلفی هستند: فیلدهای ورودی و ، لیست ها <select>، نکات و غیره تمام کدهای فرم در یک عنصر محصور شده است <form> .</p> <p>بیشتر اطلاعات در فرم های وب با استفاده از عنصر ارسال می شود <input>... عنصر برای وارد کردن یک خط متن استفاده می شود. <input type="text">، برای چندین خط - عنصر <textarea>... عنصر <select>یک لیست کشویی ایجاد می کند.</p> <p>عنصر <label>برچسب هایی را برای فیلدهای فرم ایجاد می کند. دو راه برای گروه بندی برچسب و حاشیه وجود دارد. اگر فیلد داخل عنصر باشد <label>، پس ویژگی for نیازی به تعیین نیست.</p><p> <label for="lastname">نام خانوادگی</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">نام خانوادگی</label> <label>نام خانوادگی <input type="text" name="lastname"></label> </p><p>فیلدهای فرم را می توان با استفاده از عنصر به بلوک های منطقی تقسیم کرد <fieldset>... هر بخش را می توان با استفاده از عنصر نامگذاری کرد <legend> .</p><p> <fieldset> <legend>اطلاعات تماس</legend> <label>نام <input type="text" required></label> <label>پست الکترونیک <input type="email" required></label> </fieldset> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>برنج. 1. گروه بندی فیلدهای فرم</p><p>برای خوانایی بیشتر فرم برای کاربران، متنی به فیلدهای فرم که حاوی نمونه ای از داده های ورودی است اضافه می شود. چنین متنی متن مکان یاب نامیده می شود و با استفاده از ویژگی مکان نگهدار ایجاد می شود.</p> <p>فیلدهای مورد نیاز نیز باید برجسته شوند. قبل از HTML5، علامت ستاره * در کنار نام فیلد استفاده می شد. مشخصات جدید دارای ویژگی مورد نیاز ویژه ای است که به شما امکان می دهد یک فیلد مورد نیاز را در سطح نشانه گذاری علامت گذاری کنید. این ویژگی به مرورگر دستور می دهد (با فرض اینکه از HTML5 پشتیبانی می کند) پس از کلیک کاربر روی دکمه ارسال تا زمانی که فیلدهای مشخص شده پر نشود، داده ارسال نکند.</p><p> <input type="text" required placeholder="اسم شما"> </p><p>برای تغییر ظاهر کادر متنی هنگام دریافت فوکوس، از کلاس شبه فوکوس استفاده کنید. برای مثال، می‌توانید پس‌زمینه فیلد فعلی را تیره‌تر کنید یا یک حاشیه رنگی اضافه کنید تا آن را از بقیه متمایز کنید:</p><p>ورودی: فوکوس (پس‌زمینه: #eaeaea;)</p><p>یکی دیگر از ویژگی های مفید html5 ویژگی فوکوس خودکار است. این به شما امکان می دهد فوکوس را به طور خودکار روی حاشیه شروع دلخواه برای عناصر تنظیم کنید <input>و <textarea>(فقط یک عنصر از هر فرم).</p> <h2>نمونه ای از ایجاد فرم ثبت نام</h2> <p><b>نشانه گذاری HTML</b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i2.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>ثبت</h1> </div> <form method="post" action="form.php"> <div> <label for="name">نام</label> <input type="text" name="name" required> </div> <div class="radio">کف <label> <input type="radio" name="sex" value="نر">نر <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="زن">زن <div class="radio-control female"></div> </label> </div> <div> <label for="email">پست الکترونیک</label> <input type="email" name="email" required> </div> <div> <label for="country">کشور</label> <select name="country"> <option>کشور محل اقامت خود را انتخاب کنید</option> <option value="روسیه">روسیه</option> <option value="اوکراین">اوکراین</option> <option value="بلاروس">بلاروس</option> </select> <div class="select-arrow"></div> </div> <button type="submit">ارسال</button> </form> </div> </p><p><b>توجه داشته باشید</b><br>action = "form.php" - پیوند به فایل کنترل کننده فرم. یک فایل با رمزگذاری UTF-8 ایجاد کنید، آن را در سرور آپلود کنید و مسیر فایل روی سرور خود را جایگزین action = "form.php" کنید.</p> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>برنج. 2. ظاهر فرم پیش فرض <p>همانطور که در شکل مشاهده می کنید، هر عنصر فرم دارای سبک های پیش فرض مرورگر است. بیایید استایل ها را تمیز کنیم و عناصر فرم را استایل دهیم.</p><p> Form-wrap (عرض: 550 پیکسل؛ پس‌زمینه: # ffd500؛ شعاع حاشیه: 20 پیکسل؛) : 30 پیکسل؛) فرم (پس‌زمینه: سفید؛ شناور: سمت چپ؛ عرض: کالک (100٪ - 240 پیکسل)؛ لایه‌بندی: 30 پیکسل؛ شعاع حاشیه: 0 20 پیکسل 20 پیکسل 0؛ رنگ: # 7b7b7b؛) .فرم-پوش: بعد، فرم div: بعد (محتوا: ""؛ نمایش: جدول؛ واضح: هر دو؛) فرم div (حاشیه پایین: 15 پیکسل؛ موقعیت: نسبی؛) h1 (اندازه قلم: 24 پیکسل؛ وزن قلم: 400؛ موقعیت: نسبی ؛ حاشیه بالا: 50 پیکسل؛) h1: بعد (محتوا: "\ f138"؛ اندازه قلم: 40 پیکسل؛ خانواده فونت: FontAwesome؛ موقعیت: مطلق؛ بالا: 50 پیکسل؛ سمت چپ: 50٪؛ تبدیل: translateX (-50) %)؛) / ********************** استایل دادن به عناصر فرم ******************** * ** / برچسب، دهانه (نمایش: بلوک؛ اندازه قلم: 14 پیکسل؛ حاشیه پایین: 8 پیکسل؛) ورودی، ورودی (عرض حاشیه: 0؛ طرح کلی: هیچ؛ حاشیه: 0؛ عرض: 100 درصد؛ بالشتک: 10px 15px؛ پس‌زمینه: # e6e6e6;) ورودی: فوکوس، ورودی: فوکوس (box-sha) dow: inset 0 0 0 2px rgba (0,0,0, 0.2); ) برچسب رادیویی (موقعیت: نسبی؛ بالشتک چپ: 50 پیکسل؛ مکان نما: نشانگر؛ عرض: 50 درصد؛ شناور: چپ؛ ارتفاع خط: 40 پیکسل؛) ورودی رادیویی (موقعیت: مطلق؛ کدورت: 0؛) رادیو. -کنترل (موقعیت: مطلق؛ بالا: 0؛ سمت چپ: 0؛ ارتفاع: 40 پیکسل؛ عرض: 40 پیکسل؛ پس‌زمینه: # e6e6e6؛ شعاع حاشیه: 50%؛ تراز متن: مرکز؛) .male: قبل (محتوا: " \ f222 "؛ font-family: FontAwesome؛ font-weight: bold;) .female: before (محتوا:" \ f221 "؛ font-family: FontAwesome؛ وزن فونت: bold;) برچسب رادیویی: ورودی شناور ~. رادیو کنترل، ورودی رادیول .: فوکوس ~ .رادیو کنترل (جعبه-سایه: درونی 0 0 0 2px rgba (0,0,0, .2)؛) ورودی رادیویی: بررسی شده ~ .radio-control (رنگ: قرمز؛) انتخاب (عرض: 100%؛ مکان نما: اشاره گر؛ بالشتک: 10px 15px؛ طرح کلی: 0؛ حاشیه: 0؛ پس زمینه: # e6e6e6؛ رنگ: # 7b7b7b؛ -webkit-appearance: هیچ؛ / * علامت وب کیت را بردارید - مرورگرها * / -moz-appearance: هیچ؛ / * علامت کادر را در موزیلا فایرفاکس بردارید * /) انتخاب کنید:: - ms-expand (نمایش: هیچ؛ / * علامت کادر در IE * /) .select-arrow (موقعیت: مطلق; بالا: 38 پیکسل; سمت راست: 15 پیکسل؛ عرض: 0; ارتفاع: 0; اشاره گر رویدادها: هیچکدام. / * نمایش لیست را با کلیک بر روی فلش فعال کنید * / border-style: solid; عرض حاشیه: 8px 5px 0 5px; حاشیه رنگ: # 7b7b7b شفاف شفاف شفاف; ) دکمه (بالشتک: 10 پیکسل 0؛ پهنای حاشیه: 0؛ نمایشگر: بلوک؛ عرض: 120 پیکسل؛ حاشیه: 25 پیکسل خودکار 0؛ پس زمینه: # 60e6c5؛ رنگ: سفید؛ اندازه قلم: 14 پیکسل؛ طرح کلی: هیچ؛ تبدیل متن : حروف بزرگ؛) / ********************** سازگاری را به فرم اضافه کنید ****************** ** ** / @media (حداکثر عرض: 600 پیکسل) (.form-wrap (حاشیه: 20 پیکسل خودکار؛ حداکثر عرض: 550 پیکسل؛ عرض: 100 درصد؛) نمایه، فرم (شناور: هیچ، عرض: 100 درصد ;) h1 (حاشیه بالا: خودکار؛ بالشتک پایین: 50 پیکسل؛) فرم (شعاع حاشیه: 0 0 20 پیکسل 20 پیکسل؛))</p><p><b>فایل form.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>"." \ r \ n "; $ headers. =" Bcc: your_email "." \ r \ n "; if (! خالی ($ name) &&! خالی ($ جنسیت) &&! خالی ($ ایمیل) &&! خالی ($ کشور) && filter_var ($ ایمیل، FILTER_VALIDATE_EMAIL)) (ایمیل ($ ایمیل، $ موضوع، $ msg، $ headers)؛ بازتاب "متشکرم! شما با موفقیت ثبت نام کردید.";)؟></p><p><b>توجه داشته باشید</b><br>در متغیر $subject متنی را که به عنوان موضوع ایمیل نمایش داده می شود را مشخص کنید. <br>Your_name - در اینجا می توانید نامی را که در قسمت "حرف از چه کسی" نمایش داده می شود را مشخص کنید. <br>url_your_site، آدرس سایت را با فرم ثبت نام جایگزین کنید. <br>your_email را با آدرس ایمیل خود جایگزین کنید. <br>$ headers = "Bcc: your_email". "\ r \ n"؛ یک کپی کربن کور به آدرس ایمیل شما ارسال می کند.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">مقالات مرتبط برتر</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/linuks-i-drugoi-linuks---vybiraem-distributiv-dlya-pobega-iz-vindy.html"> <div class="img_container"><img src="/uploads/1b955a539ef437ebe1a69afe5ccde1c2.jpg" border="0" alt="انتخاب یک توزیع لینوکس: توصیه هایی برای یک تازه کار کدام نسخه لینوکس بهترین است" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">انتخاب یک توزیع لینوکس: توصیه هایی برای یک تازه کار کدام نسخه لینوکس بهترین است</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/kak-naiti-fail-na-kompyutere-s-windows-kak-naiti-fail-na-kompyutere-s-windows.html"> <div class="img_container"><img src="/uploads/af126856ca82c389d0d0971002310a3e.jpg" border="0" alt="نحوه پیدا کردن فایل در رایانه ویندوز پیکربندی گزینه های جستجو در ویندوز 7" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">نحوه پیدا کردن فایل در رایانه ویندوز پیکربندی گزینه های جستجو در ویندوز 7</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/kak-upravlyat-myshkoi-bez-myshki-kak-bez-myshki-upravlyat.html"> <div class="img_container"><img src="/uploads/342e3a3e344f2b55e7bd2ca2a1857e47.jpg" border="0" alt="چگونه کامپیوتر را بدون ماوس کنترل کنیم؟" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">چگونه کامپیوتر را بدون ماوس کنترل کنیم؟</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">دسته بندی ها:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/fa/category/programs/">برنامه ها</a></li> <li class=""><a href="https://bumotors.ru/fa/category/safety/">ایمنی</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-10/">ویندوز 10</a></li> <li class=""><a href="https://bumotors.ru/fa/category/iron/">اهن</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-8/">ویندوز 8</a></li> <li class=""><a href="https://bumotors.ru/fa/category/vkontakte/">در تماس با</a></li> <li class=""><a href="https://bumotors.ru/fa/category/errors/">خطاها</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2021 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی پرتال اطلاعاتی</span> </div> </div> </div> </div> </body> </html>