آموزش کار با فرم ها یا Forms در HTML فرم فارسی html نمونه فرم html

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

مشخص می کند که از کدام متد HTTP (GET یا POST) برای ارسال داده ها استفاده شود. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید. سایر خصیصه‌های فرم که شامل name و کلاس بودند در ابتدای درس با آنها آشنا شدید. در جلسه بعدی درباره‌ی Inputها جزییات بیشتری را ارائه می‌دهیم و ساخت فرم را تکمیل خواهیم کرد. حالا به سراغ مهمترین خصیصه‌هایی که می‌توان در یک فرم استفاده کرد، می‌رویم. ما انواع فرم داریم که شاید تا الان اسمشون رو شنیده باشید، مثلا فرم تماس با ما، فرم سفارش گیری ، فرم ثبت نام و ورود و هرنوع فرم دیگه که در ذهن شما باشه.

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

گزینه‌های بیشتر

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

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

• فیلدهای رمزعبور نیز دقیقا مانند فیلدهای متنی می باشند با این تفاوت که متن تایپ شده در آن ها به صورت ستاره و یا دایره های توپر مشاهده می شود.
{
• همچنین می توانید یک چک باکس را به طور پیشفرض در حالت انتخاب قرار دهید.
|}
• برای مثال در زیر نمونه هایی از عناصر ورودی را در جدولی برایتان آورده ایم.
• فیلد فایل به کاربر اجازه انتخاب فایل از روی حافظه کامپیوتر و ارسال آن به عنوان ضمینه در داده فرم را می دهد.
{
• اکنون می پرسید چگونه نام پیشفرض دکمه submit و reset را تغیر دهیم؟ ما به وسیله صفت value این کار را هم می توانیم انجام دهیم.
|}{
• سعی دارد کاربران را به سمتی سوق دهد که خودشان بتوانند کلیه ی نیازهای خود را در زمینه طراحی یک سایت و نگهداری از آن برطرف کنند.
|}

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

فرم HTML بخشی از یک سند است که شامل کنترل هایی مانند فیلدهای متنی، فیلدهای رمز عبور، چک باکس ها،radio buttons، دکمه ارسال، منوها و غیره است. فرم HTML به کاربر کمک می کند تا داده هایی را که قرار است برای پردازش به سرور ارسال شود مانند نام، آدرس ایمیل، رمز عبور، شماره تلفن و غیره وارد کند. کاربرد دارد و متد get بیشتر برای ارسال اطلاعات کوتاه و با حساسیت کمتر به کار می رود.

مزایای استفاده از فرم های HTML

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

عنصر در تگ Form

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

دریافت اطلاعات با عنصر input

شاید به نظر برسد که توضیح مربوط به عنصر را می تواند توسط عناصر دیگر مثل پاراگراف نیز فراهم کرد اما باید بدانیم که عنصر از نظر معنایی مخصوص به همین کار می باشد. همینطور می توان این عنصر را با استفاده از ویژگی for با یک عنصر ورودی جفت کرد. توضیحات کامل کار با فرم ها یا Forms در html کد های بالا در ادمه آموزش . می توان توسط این مشخصه میزان پیشفرضی برای اطلاعات یک فرم تعریف کرد و برخی مشخصه های دیگر که بنا به کاربرد ذکر خواهد شد.

صفت Action فرم ها در HTML

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

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

ما همیشه در تلاشیم که بهترین آموزش ها, مقالات تخصصی، سورس کد, قالب ها و اپلیکیشن های وب و موبایل را تولید و در اختیار علاقه مندان و حرفه ای های این حوزه ها قرار بدیم. یک دکمه ریسیت (reset) نیز تمام مقادیر وارد شده توسط کاربر در فرم را به مقدار اولیه باز می گرداند. یک دکمه سابمیت (submit) برای ارسال داده های فرم به وب سرور استفاده می شود. از متد POST همیشه زمانی استفاده کنید که اطلاعات درون فرم شما خیلی محرمانه یا خصوصی هست. با اینحال، وقتی شما از متد GET استفاده می‌کنید، اطلاعات درون فرم شما در آدرس بار مرورگر شما نمایش داده می‌شود. معمولا ، داده‌های درون فرم بعد از کلیک بر روی کلید ثبت به یک صفحه در سرور ما ارسال می‌شود.

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

تگ ها و صفت های مخصوص فرم ها

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

صفت ها در HTML

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

نمونه فرم  که توسط کد های html ساخته شده است

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

خاصیت Method

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

تگ noscript در HTML

امیدوارم که از آموزش آموزش تگ form در html استفاده لازم را برده باشید. بطور کلی میشه گفت ما دو نمونه دکمه میتونیم داشته باشیم، یک نمونه دکمه هست که از نوع عناصر ورودی ( Input ) است و در درون فرم ها قرار میگیرند و با کلیک بروی آنها اطلاعات وارد شده در فرم به سرور ارسال می شود. کاربران معمولا یک فرم را با تغییر دادن کنترل ها مثل وارد کردن متن, انتخاب آیتم ها و غیره..

این مبحث بسیار کاربردی و مهم است چراکه در اغلب وب سایت‌ها در صفحات تماس با ما، در بخش نظرات، ثبت نام و ورود، جستجو و… از فرم‌ها استفاده می‌شود. الان اون MyName میشه نام اون اینپوت یا Input داخل فرم و در نهایت اون Sadegh هم میشه مقدارش که کاربر داخل فرم وارد کرده، پس همونطور که میبینید صفت method با مقدار Get داده های فرم رو در نوار آدرس مرورگر نشون میده. می خواهیم text box  هایی با قابلیت دریافت بیش از یک سطر اطلاعات را ایجاد کنیم.برای این منظور از تگ text area  استفاده می کینم .

تگ u و تگ ins در HTML

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

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

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

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

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

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

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

کاربر می تواند تاریخ را با فیلد متن یا رابط انتخابگر تاریخ وارد کند. Label همانطور که از نامش هم مشخص است، لیبل هر فیلد را نشان میدهد. ولی اگر آن را با صفت for ترکیب کنید، در صورتی که کاربر روی لیبل کلیک کند، فیلدی که در صفت for تعیین کرده اید، به صورت اتوماتیک انتخاب خواهد شد. مقدار id فیلد مورد نظر را برای صفت for در لیبل مورد نظر قرار داده ایم تا با کلیک روی هر لیبل، فیلد مربوط به آن انتخاب شود.

پس اگر نوع متد ارسال به صورت get بو د اطلاعات را در نوار آدرس می بینیم که مناسب فرم هایی که دارای پسورد می باشند نیست و استفاده از آن در این موارد توصیه نمی شود و امنیت را پایین می آورد. با target می توانید ارسال فرم را در صفحه جدید به کاربر نمایش دهید. زمانی که فرم شما برای اطلاعات محرمانه طراحی شده است از مقدار post استفاده کنید تا این اطلاعات در مرورگر نمایش داده نشود.

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

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

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

Form-handler معمولاً یک فایل روی سرور با یک اسکریپت برای پردازش داده های ورودی است. عنصر یک عنصر را می توان به روش های مختلفی، بسته به ویژگی type، نمایش داد. ساعت پاسخگویی 9 الی تماس با شماره زیر فقط برای محصولات غیر رایگان جواب داده خواهد شد. به این دلیل که عناصر ورودی به خودی خود روشن و واضح نیستند بهتر است از عنصر برای توصیف آنها استفاده کرد.

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

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

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