{"id":964,"date":"2021-04-08T02:45:22","date_gmt":"2021-04-08T02:45:22","guid":{"rendered":"https:\/\/phptutorial.net\/?page_id=964"},"modified":"2025-04-07T14:33:59","modified_gmt":"2025-04-07T14:33:59","slug":"php-radio-button","status":"publish","type":"page","link":"https:\/\/www.phptutorial.net\/php-tutorial\/php-radio-button\/","title":{"rendered":"PHP Radio Button"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to create a form with radio buttons and handle radio groups in PHP.<\/p>\n\n\n\n

Introduction to radio buttons #<\/a><\/h2>\n\n\n\n

To create a radio button, you use the <input><\/code> element with the type radio<\/code>. For example:<\/p>\n\n\n

<input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"contact\"<\/span> id<\/span>=\"contact_email\"<\/span> value<\/span>=\"email\"<\/span> \/><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
A radio button doesn’t have a label. Therefore, you should always use a radio button with a <label><\/code> element like this:<\/p>\n\n\n
<input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"contact\"<\/span> id<\/span>=\"contact_email\"<\/span> value<\/span>=\"email\"<\/span>\/><\/span>\n<label<\/span> for<\/span>=\"contact_email\"<\/span>><\/span>Email<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
To associate a radio button with a <label><\/code> element, the value of the for<\/code> attribute of the label needs to be the same as the value of the id<\/code> of the radio button.<\/p>\n\n\n\n
A radio button has two states: checked and unchecked. <\/p>\n\n\n\n
When you link a label with a radio button, you can check the radio button by clicking the label or the radio button itself. Hence, the label increases the usability of the radio button because it expands the selection area.<\/p>\n\n\n\n
Alternatively, you can place the radio button within a <label><\/code> element like this:<\/p>\n\n\n
<label<\/span>><\/span>\n    <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"contact_email\"<\/span> value<\/span>=\"email\"<\/span>><\/span> Email\n<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
In this case, the radio links to the label without matching the for and id attributes.<\/p>\n\n\n\n
To select a radio button automatically when the page loads for the first time, you can use the checked<\/code> Boolean attribute:<\/p>\n\n\n
<input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"contact\"<\/span> id<\/span>=\"contact_email\"<\/span> value<\/span>=\"email\"<\/span> checked<\/span> \/><\/span>\n<label<\/span> for<\/span>=\"contact_email\"<\/span>><\/span>Email<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Define a radio group #<\/a><\/h3>\n\n\n\n
In practice, you often use the radio buttons in a group. A group of radio buttons is called a radio group. A radio group allows you to select only one radio button at a time.<\/p>\n\n\n\n
If you select any radio button in a group, the currently-selected radio button in the same group is automatically deselected.<\/p>\n\n\n\n
To define a radio group, you assign the same name to all the radio buttons in the same group.<\/p>\n\n\n\n
The following example defines a radio group that consists of two radio buttons.<\/p>\n\n\n
<input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"contact\"<\/span> id<\/span>=\"contact_email\"<\/span> value<\/span>=\"email\"<\/span> \/><\/span>\n<label<\/span> for<\/span>=\"contact_email\"<\/span>><\/span>Email<\/label<\/span>><\/span>\n\n<input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"contact\"<\/span> id<\/span>=\"contact_phone\"<\/span> value<\/span>=\"phone\"<\/span> \/><\/span>\n<label<\/span> for<\/span>=\"contact_phone\"<\/span>><\/span>Phone<\/label<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Handle radio buttons in PHP #<\/a><\/h2>\n\n\n\n
When a form has a radio button with a name, you can get the checked radio button by accessing either $_POST<\/code> or $_GET<\/code> array, depending on the request method.<\/p>\n\n\n\n
If a radio button is not checked, the $_POST<\/code> or $_GET<\/code> does not contain the key of the radio button. Therefore, you need to use the isset()<\/code> function to check whether a radio button is checked or not:<\/p>\n\n\n
isset<\/span>($_POST['radio_name'<\/span>])<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
filter_has_var(INPUT_POST, 'radio_name'<\/span>)<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The filer_has_var()<\/code> returns true<\/code> if it finds the radio button name in the INPUT_POST<\/code>.<\/p>\n\n\n\n
If a radio button is checked, you get the value of the radio button from the $_POST<\/code> using the radio button name:<\/p>\n\n\n
$_POST['radio_name'<\/span>]<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
PHP radio button example #<\/a><\/h2>\n\n\n\n
We’ll create a simple form with a radio group<\/a>. If you do not select any option and submit the form, it’ll show an error message. Otherwise, it’ll show the value of the selected radio button.<\/p>\n\n\n
\n
\"PHP<\/a><\/figure>\n<\/div>\n\n\n
First, create the following directory and file structure:<\/p>\n\n\n
.\n\u251c\u2500\u2500 css\n|  \u2514\u2500\u2500 style.css\n\u251c\u2500\u2500 inc\n|  \u251c\u2500\u2500 footer.php\n|  \u251c\u2500\u2500 get.php\n|  \u251c\u2500\u2500 header.php\n|  \u2514\u2500\u2500 post.php\n\u2514\u2500\u2500 index.php<\/code><\/span>Code language:<\/span> plaintext<\/span> (<\/span>plaintext<\/span>)<\/span><\/small><\/pre>\n\n\n
File<\/th>Directory<\/th>Description<\/th><\/tr><\/thead>
index.php<\/td>.<\/td>Contain the main logic that loads get.php or post.php depending on the HTTP request method<\/td><\/tr>
header.php<\/td>inc<\/td>Contain the HTML header<\/td><\/tr>
footer.php<\/td>inc<\/td>Contain the HTML footer<\/td><\/tr>
get.php<\/td>inc<\/td>Contain the code for showing a form with radio buttons when the HTTP request is GET.<\/td><\/tr>
post.php<\/td>inc<\/td>Contain the code for handling POST request<\/td><\/tr>
style.css<\/td>css<\/td>Contain the CSS code<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Second, add the following code to the header.php<\/code> file:<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n\n<head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span> \/><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span> \/><\/span>\n    <title<\/span>><\/span>PHP Radio Button<\/title<\/span>><\/span>\n    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"css\/style.css\"<\/span>><\/span>\n<\/head<\/span>><\/span>\n\n<body<\/span>><\/span>\n    <main<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, add the following code to the footer.php<\/code> file:<\/p>\n\n\n
    <\/main<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Fourth, add the following code to the index.php<\/code> file:<\/p>\n\n\n
<?php<\/span>\n\nrequire<\/span> __DIR__<\/span> . '\/inc\/header.php'<\/span>;\n\n$contacts = [\n\t'email'<\/span> => 'Email'<\/span>,\n\t'phone'<\/span> => 'Phone'<\/span>\n];\n\n$errors = [];\n\n$request_method = strtoupper($_SERVER['REQUEST_METHOD'<\/span>]);\n\nif<\/span> ($request_method === 'GET'<\/span>) {\n\trequire<\/span> __DIR__<\/span> . '\/inc\/get.php'<\/span>;\n} elseif<\/span> ($request_method === 'POST'<\/span>) {\n\trequire<\/span> __DIR__<\/span> . '\/inc\/post.php'<\/span>;\n}\n\nrequire<\/span> __DIR__<\/span> . '\/inc\/footer.php'<\/span>;\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
How it works.<\/p>\n\n\n\n
The $contacts<\/code> array is used to generate radio buttons dynamically. In a real application, the data may come from a database table or a result of an API call.<\/p>\n\n\n\n
The $errors<\/code> array is used to collect the error messages.<\/p>\n\n\n\n
To get the HTTP request method, you access the 'REQUEST_METHOD'<\/code> key of the $_SERVER<\/code> array. The strtoupper()<\/code> function converts the request method to uppercase.<\/p>\n\n\n
$request_method = strtoupper($_SERVER['REQUEST_METHOD'<\/span>]);<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The index.php<\/code> file loads the get.php<\/code> from the inc<\/code> directory if the request is GET. When the form is submitted with the POST request, the index.php<\/code> loads the post.php<\/code> from the inc<\/code> directory:<\/p>\n\n\n
if<\/span> ($request_method === 'GET'<\/span>) {\n\trequire<\/span> __DIR__<\/span> . '\/inc\/get.php'<\/span>;\n} elseif<\/span> ($request_method === 'POST'<\/span>) {\n\trequire<\/span> __DIR__<\/span> . '\/inc\/post.php'<\/span>;\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Fifth, create a form in the get.php<\/code> file:<\/p>\n\n\n
<form action=\"<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>\"<\/span> method=\"post\"<\/span>>\n    <div>Please choose your preferred method of contact:<\/div>\n    <?php<\/span> foreach<\/span> ($contacts as<\/span> $key => $value) : ?><\/span>\n        <div>\n            <input type=\"radio\"<\/span> name=\"contact\"<\/span> id=\"contact_<?php echo $key ?>\"<\/span> value=\"<?php echo $key ?>\"<\/span> \/>\n            <label for<\/span>=\"contact_<?php echo $key ?>\"<\/span>><?php<\/span> echo<\/span> $value ?><\/span><\/label>\n        <\/div>\n    <?php<\/span> endforeach<\/span> ?><\/span>\n    <div>\n        <small class<\/span>=\"error<\/span>\"><?php<\/span> echo<\/span> $errors<\/span>['contact<\/span>'] ?? '' ?><\/small<\/span>>\n    <\/div<\/span>>\n    <div<\/span>>\n        <button<\/span> type<\/span>=\"submit<\/span>\">Submit<\/span><\/button<\/span>>\n    <\/div<\/span>>\n<\/form<\/span>><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The following code uses a foreach<\/a><\/code> statement to generate a radio group from the $contacts<\/code> array:<\/p>\n\n\n
<?php<\/span> foreach<\/span> ($contacts as<\/span> $key => $value) : ?><\/span>\n<div>\n    <input type=\"radio\"<\/span> name=\"contact\"<\/span> id=\"contact_<?php echo $key ?>\"<\/span> value=\"<?php echo $key ?>\"<\/span> \/>\n    <label for<\/span>=\"contact_<?php echo $key ?>\"<\/span>>\n        <?php<\/span> echo<\/span> $value ?><\/span>\n    <\/label>\n<\/div>\n<?php<\/span> endforeach<\/span> ?><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
The expression $errors['contact'] ?? ''<\/code> returns $errors['contact']<\/code> if it exists and is not null or ” otherwise.<\/p>\n\n\n
<small class<\/span>=\"error<\/span>\"><?php<\/span> echo<\/span> $errors<\/span>['contact<\/span>'] ?? '' ?><\/small<\/span>><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, add the code that handles the POST request:<\/p>\n\n\n
<?php<\/span>\n\nif<\/span>(filter_has_var(INPUT_POST, 'contact'<\/span>)) {\n\t\n\t$contact = trim($_POST['contact'<\/span>]);\n\n\t\/\/ check the selected value against the original values<\/span>\n\tif<\/span> ($contact && array_key_exists($contact, $contacts)) {\n\t\t$contact = htmlspecialchars($contact);\n\t} else<\/span> {\n\t\t$errors['contact'<\/span>] = 'Please select at least an option.'<\/span>;\n\t}\n\n\tif<\/span> (count($errors)) {\n\t\trequire<\/span> __DIR__<\/span> .  '\/get.php'<\/span>;\n\t} else<\/span> {\n\t\techo<\/span> <<<html\n\t\tYou selected to be contacted via <strong> $contact<\/span><\/strong>.\n\t\t<a href=\"index.php\">Back to the form<\/a>\n\t\thtml;\n\t}\n} <\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
How the post.php<\/code> works.<\/p>\n\n\n\n
If the submitted value matches with one of the array keys, we show a message. Otherwise, we add an error message to the $errors<\/code> array.<\/p>\n\n\n\n
In the last if...else<\/a><\/code> statement, we load the form (get.php<\/code>) that shows an error message if the $errors<\/code> array is not empty. Otherwise, we show a confirmation message.<\/p>\n\n\n\n
Summary #<\/a><\/h2>\n\n\n\n
    \n
  • Use the input with type=\"radio\"<\/code> to create a radio button. <\/li>\n\n\n\n
  • Use the same name for multiple radio buttons to define a radio group.<\/li>\n\n\n\n
  • Get the value of a checked radio via the $_POST<\/code> (or $_GET<\/code>) variable, depending on the request method.<\/li>\n<\/ul>\n
    \n\t
    \n\t\t
    Did you find this tutorial useful?<\/div>\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
    \n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t\n\t\t\t
The filter_input()<\/code> function sanitizes the value of the checked radio button. To make sure the submitted value is valid, we check it against the keys of the $contact<\/code> array using the array_key_exists()<\/a><\/code> function.<\/p>\n\n\n\n
The following code shows the error message from the $errors<\/code> array. Note that we use the null coalescing operator<\/a> (??) which is available in PHP 7+. <\/p>\n\n\n\n
Alternatively, you can use the filter_has_var()<\/a><\/code> function:<\/p>\n\n\n