Resumo : neste tutorial, você aprenderá como criar um formulário com botões de opção e manipular grupos de opções em PHP.
Introdução aos botões de opção
Para criar um botão de opção, você usa o <input>
elemento com o tipo radio
. Por exemplo:
<input type="radio" name="contact" id="contact_email" value="email" />
Linguagem de código: HTML, XML ( xml )
Um botão de opção não possui um rótulo. Portanto, você deve sempre usar um botão de opção com um <label>
elemento como este:
<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Linguagem de código: HTML, XML ( xml )
Para associar um botão de opção a um <label>
elemento, o valor do for
atributo do rótulo precisa ser igual ao valor do id
botão de opção.
Um botão de opção possui dois estados: marcado e desmarcado.
Ao vincular um rótulo a um botão de opção, você pode verificar o botão de opção clicando no rótulo ou no próprio botão de opção. Conseqüentemente, o rótulo aumenta a usabilidade do botão de opção porque expande a área de seleção.
Alternativamente, você pode colocar o botão de opção dentro de um <label>
elemento como este:
<label>
<input type="radio" name="contact_email" value="email"> Email
</label>
Linguagem de código: HTML, XML ( xml )
Nesse caso, o rádio se vincula ao rótulo sem corresponder aos atributos for e id.
Para selecionar um botão de opção automaticamente quando a página for carregada pela primeira vez, você pode usar o checked
atributo booleano:
<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Linguagem de código: HTML, XML ( xml )
Definir um grupo de rádio
Na prática, você costuma usar os botões de opção em um grupo. Um grupo de botões de opção é chamado de grupo de opções. Um grupo de opções permite selecionar apenas um botão de opção por vez.
Se você selecionar qualquer botão de opção em um grupo, o botão de opção atualmente selecionado no mesmo grupo será automaticamente desmarcado.
Para definir um grupo de opções, atribua o mesmo nome a todos os botões de opções do mesmo grupo.
O exemplo a seguir define um grupo de opções que consiste em dois botões de opções.
<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>
<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Linguagem de código: HTML, XML ( xml )
Lidar com botões de opção em PHP
Quando um formulário possui um botão de opção com um nome, você pode obter o botão de opção verificado acessando $_POST
ou $_GET
array, dependendo do método de solicitação.
Se um botão de opção não estiver marcado, $_POST
ou $_GET
não contém a chave do botão de opção. Portanto, você precisa usar a isset()
função para verificar se um botão de opção está marcado ou não:
isset($_POST['radio_name'])
Linguagem de código: PHP ( php )
Alternativamente, você pode usar a filter_has_var()
função:
filter_has_var(INPUT_POST, 'radio_name')
Linguagem de código: JavaScript ( javascript )
O filer_has_var()
retorno true
se encontrar o nome do botão de opção no arquivo INPUT_POST
.
Se um botão de opção estiver marcado, você obterá o valor do botão de opção usando $_POST
o nome do botão de opção:
$_POST['radio_name']
Linguagem de código: PHP ( php )
Exemplo de botão de opção PHP
Criaremos um formulário simples com um grupo de rádio . Se você não selecionar nenhuma opção e enviar o formulário, será exibida uma mensagem de erro. Caso contrário, mostrará o valor do botão de opção selecionado.
Primeiro, crie o seguinte diretório e estrutura de arquivos:
.
├── css
| └── style.css
├── inc
| ├── footer.php
| ├── get.php
| ├── header.php
| └── post.php
└── index.php
Linguagem de código: texto simples ( texto simples )
Arquivo | Diretório | Descrição |
---|---|---|
index.php | . | Contém a lógica principal que carrega get.php ou post.php dependendo do método de solicitação HTTP |
cabeçalho.php | Inc. | Contém o cabeçalho HTML |
rodapé.php | Inc. | Contém o rodapé HTML |
obter.php | Inc. | Contém o código para mostrar um formulário com botões de opção quando a solicitação HTTP é GET. |
post.php | Inc. | Contém o código para lidar com a solicitação POST |
estilo.css | css | Contém o código CSS |
Segundo, adicione o seguinte código ao header.php
arquivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PHP Radio Button</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
Linguagem de código: HTML, XML ( xml )
Terceiro, adicione o seguinte código ao footer.php
arquivo:
</main>
</body>
</html>
Linguagem de código: HTML, XML ( xml )
Quarto, adicione o seguinte código ao index.php
arquivo:
<?php
require __DIR__ . '/inc/header.php';
$contacts = [
'email' => 'Email',
'phone' => 'Phone'
];
$errors = [];
$request_method = strtoupper($_SERVER['REQUEST_METHOD']);
if ($request_method === 'GET') {
require __DIR__ . '/inc/get.php';
} elseif ($request_method === 'POST') {
require __DIR__ . '/inc/post.php';
}
require __DIR__ . '/inc/footer.php';
Linguagem de código: PHP ( php )
Como funciona.
A $contacts
matriz é usada para gerar botões de opção dinamicamente. Em uma aplicação real, os dados podem vir de uma tabela de banco de dados ou resultado de uma chamada de API.
A $errors
matriz é usada para coletar as mensagens de erro.
Para obter o método de solicitação HTTP, você acessa a 'REQUEST_METHOD'
chave do $_SERVER
array. A strtoupper()
função converte o método de solicitação em letras maiúsculas.
$request_method = strtoupper($_SERVER['REQUEST_METHOD']);
Linguagem de código: PHP ( php )
O index.php
arquivo carrega do get.php
diretório inc
se a solicitação for GET. Quando o formulário é enviado com a solicitação POST, index.php
carrega o post.php
do inc
diretório:
if ($request_method === 'GET') {
require __DIR__ . '/inc/get.php';
} elseif ($request_method === 'POST') {
require __DIR__ . '/inc/post.php';
}
Linguagem de código: PHP ( php )
Quinto, crie um formulário no get.php
arquivo:
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post">
<div>Please choose your preferred method of contact:</div>
<?php foreach ($contacts as $key => $value) : ?>
<div>
<input type="radio" name="contact" id="contact_<?php echo $key ?>" value="<?php echo $key ?>" />
<label for="contact_<?php echo $key ?>"><?php echo $value ?></label>
</div>
<?php endforeach ?>
<div>
<small class="error"><?php echo $errors['contact'] ?? '' ?></small>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
Linguagem de código: PHP ( php )
O código a seguir usa uma foreach
instrução para gerar um grupo de rádio a partir do $contacts
array:
<?php foreach ($contacts as $key => $value) : ?>
<div>
<input type="radio" name="contact" id="contact_<?php echo $key ?>" value="<?php echo $key ?>" />
<label for="contact_<?php echo $key ?>">
<?php echo $value ?>
</label>
</div>
<?php endforeach ?>
Linguagem de código: PHP ( php )
O código a seguir mostra a mensagem de erro da $errors
matriz. Observe que usamos o operador de coalescência nulo (??) que está disponível no PHP 7+.
A expressão $errors['contact'] ?? ''
retorna $errors['contact']
se existir e não for nula ou ”caso contrário.
<small class="error"><?php echo $errors['contact'] ?? '' ?></small>
Linguagem de código: PHP ( php )
Por fim, adicione o código que trata a solicitação POST:
<?php
// sanitize the contact
$contact = filter_input(INPUT_POST, 'contact', FILTER_SANITIZE_STRING);
// check the selected value against the original values
if ($contact && array_key_exists($contact, $contacts)) {
$contact = htmlspecialchars($contact);
} else {
$errors['contact'] = 'Please select at least an option.';
}
if (count($errors)) {
require __DIR__ . '/get.php';
} else {
echo <<<html
You selected to be contacted via <strong> $contact</strong>.
<a href="index.php">Back to the form</a>
html;
}
Linguagem de código: PHP ( php )
Como post.php
funciona.
A filter_input()
função limpa o valor do botão de opção verificado. Para ter certeza de que o valor enviado é válido, nós o comparamos com as chaves do $contact
array usando a array_key_exists()
função.
Se o valor enviado corresponder a uma das chaves do array, mostraremos uma mensagem. Caso contrário, adicionamos uma mensagem de erro ao $errors
array.
Na última if...else
instrução, carregamos o formulário ( get.php
) que mostra uma mensagem de erro caso o $errors
array não esteja vazio. Caso contrário, mostramos uma mensagem de confirmação.
Resumo
- Use a entrada com
type="radio"
para criar um botão de opção. - Use o mesmo nome para vários botões de opção para definir um grupo de opções.
- Obtenha o valor de um rádio verificado através da variável
$_POST
(ou$_GET
), dependendo do método de solicitação.