Opção de seleção de PHP

Resumo : neste tutorial, você aprenderá como usar o <select>elemento para criar uma lista suspensa e uma caixa de listagem e como obter os valores selecionados do <select>elemento em PHP.

Uma rápida introdução ao elemento <select>

O <select>é um elemento HTML que fornece uma lista de opções. O seguinte mostra como definir um <select>elemento em HTML:

<label for="color">Background Color:</label>
<select name="color" id="color">
	<option value="">--- Choose a color ---</option>
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>Linguagem de código:  HTML, XML  ( xml )

O <select>elemento tem dois atributos importantes:

  • id– idassocia o <select>elemento a um <label>elemento
  • name– o nameatributo associado ao valor para o envio de um formulário.

O <option>elemento aninhado dentro do <select>elemento define uma opção no menu. Cada opção possui um valueatributo. O valueatributo armazena dados enviados ao servidor quando é selecionado.

Se uma opção não tiver o valueatributo, o valuepadrão do atributo será o texto dentro do <option>elemento.

Para selecionar uma opção quando a página for carregada pela primeira vez, você pode adicionar o selectedatributo ao <option>elemento.

O exemplo a seguir seleciona a Greenopção quando a página é carregada pela primeira vez:

<label for="color">Background Color:</label>
<select name="color" id="color">
	<option value="">--- Choose a color ---</option>
	<option value="red">Red</option>
	<option value="green" selected>Green</option>
	<option value="blue">Blue</option>
</select>Linguagem de código:  HTML, XML  ( xml )

Obtendo o valor selecionado de um elemento <select>

Criaremos um formulário que usa um <select>elemento.

Primeiro, crie as seguintes pastas e arquivos:

├── css
|  └── style.css
├── inc
|  ├── footer.php
|  ├── get.php
|  ├── header.php
|  └── post.php
└── index.php
Linguagem de código:  JavaScript  ( javascript )

Segundo, coloque o seguinte código no arquivo header.php:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>PHP select option</title>
</head>

<body class="center">
    <main>Linguagem de código:  HTML, XML  ( xml )

Terceiro, coloque o seguinte código no arquivo footer.php:

</main>
</body>

</html>Linguagem de código:  HTML, XML  ( xml )

Quarto, adicione o seguinte código ao arquivo get.php para criar um formulário que possui um <select>elemento com um botão de envio:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post">
    <div>
        <label for="color">Background Color:</label>
        <select name="color" id="color">
            <option value="">--- Choose a color ---</option>
            <option value="red">Red</option>
            <option value="green" selected>Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div>
        <button type="submit">Select</button>
    </div>
</form>Linguagem de código:  HTML, XML  ( xml )

O formulário usa o POSTmétodo para enviar dados ao servidor web.

Por fim, adicione o seguinte código ao arquivo post.php:

<?php

$color = filter_input(INPUT_POST, 'color', FILTER_SANITIZE_STRING);

?>

<?php if ($color) : ?>
    <p>You selected <span style="color:<?php echo $color ?>"><?php echo $color ?></span></p>
    <p><a href="index.php">Back to the form</a></p>
<?php else : ?>
    <p>You did not select any color</p>
<?php endif ?>Linguagem de código:  HTML, XML  ( xml )

Para obter o valor selecionado do <select>elemento, você usa a $_POSTvariável superglobal se o método do formulário for POSTe $_GETse o método do formulário for GET.

Alternativamente, você pode usar a função filter_input() para limpar o valor selecionado.

Se você selecionar a primeira opção do <select>elemento, o valor selecionado ficará vazio. Caso contrário, o valor selecionado será vermelho, verde ou azul.

Selecione com várias opções

Para ativar múltiplas seleções, adicione o multipleatributo ao <select>elemento:

<select name="colors[]" id="colors" multiple>
...
</select>Linguagem de código:  HTML, XML  ( xml )

Quando você seleciona várias opções de um <select>elemento e envia o formulário, o nome conterá vários valores em vez de um único valor. Para obter vários valores selecionados, você adiciona os colchetes ( [])após o nome do <select>elemento.

Vamos dar uma olhada em um exemplo de uso de um <select>elemento com múltiplas seleções .

Primeiro, crie as seguintes pastas e arquivos:

.
├── css
|  └── style.css
├── inc
|  ├── footer.php
|  ├── get.php
|  ├── header.php
|  └── post.php
└── index.phpLinguagem de código:  JavaScript  ( javascript )

Segundo, coloque o seguinte código no arquivo header.php:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHP Listbox</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="center">
    <main>Linguagem de código:  HTML, XML  ( xml )

Terceiro, adicione o seguinte código ao arquivo footer.php:

</main>
</body>

</html>Linguagem de código:  HTML, XML  ( xml )

Quarto, inclua os arquivos header.phpe footer.phpem index.php:

<?php

require __DIR__ . '/inc/header.php';

$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:  HTML, XML  ( xml )

Se a solicitação HTTP for GET, o arquivo index.php mostrará um formulário do arquivo get.php. Quando o formulário for enviado, o arquivo post.php cuidará do envio do formulário.

Quinto, crie um formulário que contenha um <select>elemento com o multipleatributo no get.phparquivo. O nome do <select>elemento possui colchetes de abertura e fechamento []para que o PHP possa criar um array que contenha os valores selecionados.

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']) ?>" method="post">
    <div>
        <label for="colors">Background Color:</label>
        <select name="colors[]" id="colors" multiple>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
            <option value="purple">Purple</option>
            <option value="magenta">Magenta</option>
            <option value="cyan">Cyan</option>
        </select>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>Linguagem de código:  HTML, XML  ( xml )

Por fim, lide com o envio do formulário no post.phparquivo:

<?php

$selected_colors = filter_input(
	INPUT_POST,
	'colors',
	FILTER_SANITIZE_STRING,
	FILTER_REQUIRE_ARRAY
);
?>

<?php if ($selected_colors) : ?>
	<p>You selected the following colors:</p>
	<ul>
		<?php foreach ($selected_colors as $color) : ?>
			<li style="color:<?php echo $color ?>"><?php echo $color ?></li>
		<?php endforeach ?>
	</ul>
	<p>

	</p>

<?php else : ?>
	<p>You did not select any color.</p>
<?php endif ?>
<a href="index.php">Back to the form</a>Linguagem de código:  HTML, XML  ( xml )

O arquivo post.php usa a filter_input()função para obter as cores selecionadas como um array. Se você selecionar uma ou mais cores, o arquivo post.php irá exibi-las.

Resumo

  • Use o <select>elemento para criar uma lista suspensa.
  • Use o multipleatributo para criar uma lista que permite seleções múltiplas.
  • Use $_POSTpara obter o valor selecionado do elemento select se o método do formulário for POST(ou $_GETse o método do formulário for GET).
  • Adicione colchetes ( []) após o nome do <select>elemento para obter vários valores selecionados.
Botão de opção PHP
Anterior
Botão de opção PHP

Próximo
PHPCSRF

PHPCSRF

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *