No artigo passado, Aula 33, vimos como validar e sanitizar as informações recebidas pelo PHP do formulário HTML.
Hoje iremos expandir nosso conhecimento sobre campos, botões e outros elementos que fazem parte de um formulário HTML.
Um formulário pode conter um ou mais dos seguintes elementos:
<label><input><select>com<option>e<optgroup><textarea><button><fieldset>e<legend><datalist><output>- botão de rádio(radio button)
- caixa de seleção(checkbox)
O elemento mais usado em umm form é o input.
Iremos focar esse estudo na linguagem PHP, como ele pega os valores retornados dum formulário.
Obs.: O nome da página dos exemplos abaixo é index.php e o formulário envia, usando action=“index.php”, os dados para a própria página. Não para outra!
<label>
pronunciá-se “leibel”.
Label é apenas um rótulo, uma identificação para um outro elemento. Ele não retorna nenhum valor.
<html>
<body>
<form action="index.php" method="post" >
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome">
</form>
</body>
<?php
echo $_POST['nome'];
?>
</html>
Temos que colocar dentro de “for=…” o valor de “id=…“, em nosso caso o valor é nome. Assim o vinculamos o label ao campo de texto com id=nome.
Resultado:
Acima, digitei “maria” e teclei Enter.
Abaixo é outra forma de usar um <label>. Abaixo usamos com um checkbox que veremos mais adiante:
<label>
<input type="checkbox" name="concordo"> Eu Concordo
</label>Nesse caso, não precisamos usar o id para a caixa de seleção e o atributo for para o <label>.
<Input type=”text”>
Já usamos bastante esse elemento. Inclusive acabamos de usá-lo no exemplo acima.
Abaixo está a explicação e o nosso código:
- primeiramente, colocamos em action=” ” o nome da página para onde queremos enviá-las. Nesse caso envio as informações para a própria página, isto é, index.php.
- Veja qual o método de envio do formulário, se POST ou GET. Em nosso caso é POST então usamos $_POST[ ] para receber o valor no PHP. Se fosse GET usaríamos $_GET[ ].
- o nome do elemento <input type=”text” …> acima é “nome”(name=”nome”), então usamos
<html>
<body>
<form action="index.php" method="post" >
<label for="nome">Nome</label>
<input type="text" id="nome" name="nome">
</form>
</body>
<?php
echo $_POST['nome'];
?>
</html>Além de type=”text”, podemos ter:
- <input type=”radio”> Exibe um botão de rádio
- <input type=”checkbox”> Exibe uma caixa de seleção
- <input type=”submit”> Exibe um botão de envio
- <input type=”button”> Exibe um botão clicável
Seleção <select…></select>
O elemento <select> cria uma lista suspensa.
Para pegar o valor de uma caixa de seleção também usamos o valor de name: name=”frutas”
<html>
<body>
<form action="index.php" method="post" >
<label for="frutas">Escolha uma Fruta:</label>
<select id="frutas" name="frutas">
<option value="manga">Manga</option>
<option value="goiaba">Goiaba</option>
<option value="melacia">Melancia</option>
<option value="abacaxi">Abacaxi</option>
<option value="melao">Melão</option>
</select>
<button>Enviar</button>
</form>
</body>
<?php
echo "A fruta escolhida é: <mark>" . $_POST['frutas'] . "</mark>";
?>
</html>Veja o resultado:
DICAS:
Podemos usar size para deixar visível mais de uma opção e multiple para habilitar a escolha de mais de uma opção ao clicar segurando control.
<select id="frutas" name="frutas" size="4" multiple>
.....Veja o resultado:
<select> com <optgroup>
Tem a mesma função do select acima mas separa em grupos as opções
<html>
<body>
<form >
<label for="a">Valores: </label>
<select name="feira" id="feira">
<optgroup label="frutas">
<option value="manga">Manga</option>
<option value="goiaba">Goiaba</option>
<option value="melancia">Melancia</option>
<option value="mamao">Melão</option>
</optgroup>
<optgroup label="verduras">
<option value="coentro">Coentro</option>
<option value="alface">Alface</option>
<option value="cenoura">Cenoura</option>
<option value="tomate">Tomate</option>
</optgroup>
</select>
</form>
</body>
<html>
Resultado:
<textarea…></textarea>
O elemento <textarea> cria um campo de entrada de várias linhas, uma área de texto
Podemos definir o tamanho do textarea usando rows(linhas) e cols(colunas).
<form action="index.php" method="post" >
<textarea name="mensagem" rows="10" cols="30"></textarea>
<button>Enviar</button>
</form>Veja o resultado:
Para pegar texto acima usamos $_POST[‘mensagem‘].
<button>(Botão)
Abaixo criamos um botão com um alerta(onclick=”alert(‘Oi Mundo!’)”) em javascript, apenas para enfeitar um pouco
<html>
<body>
<form action="index.php" method="post" >
<button type="button" onclick="alert('Oi Mundo!')">Clique em mim!</button>
</form>
</body>
</html>
Clique no botão abaixo para ver o alerta javascript:
<fieldset> e <legend>
Esses campos não retornam valores para $_get[‘ ‘] e $_POST[‘ ‘] do PHP mas é bom citarmos.
<fieldset> é usado para agrupar em um formulário.
<legend> cria uma legenda/rótulo para o elemento <fieldset>.
Veja:
<html>
<body>
<form action="">
<fieldset>
<legend>Dados Pessoais</legend>
<label for="nome"> Nome: </label>
<input type="text" id="nome" name="nome">
<label for="idade"> Idade: </label>
<input type="text" id="idade" name="idade">
<input type="submit" name="enviar">
</fieldset>
</form>
</body>
<html>
Resultado:
<datalist>
Ao usar <datalist> os usuários verão uma lista suspensa de opções predefinidas à medida que inserem dados, ou seja, fornece um autocompletar.
Abaixo, o list=”navegador” tem que ter o mesmo valor que o id=”navegador”
<html>
<body>
<form action="/index.php">
<label for="navegadores"> Navegadores: </label>
<input list="navegador" id="navegadores" name="navegadores">
<datalist id="navegador">
<option value="Chrome">
<option value="Opera">
<option value="Firefox">
<option value="Edge">
</datalist>
</form>
</body>
<html>
Clique no botão abaixo e faça um teste:
<output></output>
A tag <output> é usada para representar o resultado de um cálculo (como um realizado por um script).
Abaixo usamos range para nosso input que nada mais é que uma bonita barrinha.
<html>
<body>
<form
<label for="a">Valores: </label>
<input type="range" value="0" id="a">
<output name="x" for="b" > </output>
</form>
</body>
<html>
Resultado:
Botões de Rádio(Radio Buttons) com <input type=”radio”>
O <input type=”radio”> cria um botão de opção.
botões de áudio permitem que um usuário selecione UMA de um número limitado de opções.
Abaixo o name=”ano” tem que ter o mesmo valor em todos os botões de rádio
<html>
<body>
<h2>Qual o ano atual?</h2>
<form >
<input type="radio" name="ano" id="ano2021" value="2021">
<label for="ano2021">2021</label>
<input type="radio" name="ano" id="ano2022" value="2022">
<label for="ano2022">2022</label>
<input type="radio" name="ano" id="ano2023" value="2023">
<label for="ano2024">2024</label>
<input type="radio" name="ano" id="ano2024" value="2024">
<label for="ano2025">2025</label>
<input type="radio" name="ano" id="ano2025" value="2025">
</form>
</body>
<html>
Resultado:
Qual o ano atual?
Caixa de Seleção(Check Box) <input type=”checkbox”>
As caixas de seleção permitem que um usuário selecione ZERO ou MAIS opções.
Podemos digitar os inputs com name=”” assim para pegarmos somente um valor
<html>
<body>
<h2>Quais os anos mais legais da sua vida?</h2>
<form action="index.php">
<input type="checkbox" name="ano" id="ano2021" value="2021">
<label for="ano2021">2021</label>
<input type="checkbox" name="ano" id="ano2022" value="2022">
<label for="ano2022">2022</label>
<input type="checkbox" name="ano" id="ano2023" value="2023">
<label for="ano2023">2023</label>
<input type="checkbox" name="ano" id="ano2024" value="2024">
<label for="ano2024">2024</label>
<input type="checkbox" name="ano" id="ano2025" value="2025">
<label for="ano2025">2025</label>
<input type="submit">
</form>
<?php
echo $_GET['ano'];
?>
</body>
<html>
Ou assim para pegarmos toda lista dos selecionados
<html>
<body>
<h2>Quais os anos mais legais da sua vida?</h2>
<form action="index.php">
<input type="checkbox" name="ano[]" id="ano2021" value="2021">
<label for="ano2021">2021</label>
<input type="checkbox" name="ano[]" id="ano2022" value="2022">
<label for="ano2022">2022</label>
<input type="checkbox" name="ano[]" id="ano2023" value="2023">
<label for="ano2023">2023</label>
<input type="checkbox" name="ano[]" id="ano2024" value="2024">
<label for="ano2024">2024</label>
<input type="checkbox" name="ano[]" id="ano2025" value="2025">
<label for="ano2025">2025</label>
<input type="submit">
</form>
<?php
echo $_GET['ano'];
?>
</body>
<html>
Usamos php desse modo para pegarmos os valores
<?php
echo var_dump($_GET['ano']);
?>
ou podemos usar o índice para pegar somente um item do array
<?php
foreach($_GET['ano'] as $a)
echo $a . "<br>" ;
?>
Caixa de Seleção(Check Box)
Caixa de Seleção(Check Box)
Caixa de Seleção(Check Box)
Conclusão
Há elementos em um formulário que não possuem um um “label” então devemos usar o elemento <label>
O valor do atributo for do elemento <label> é deve ser igual ao valor do atributo id da caixa do elemento que queremos associar. Ao associar um <label> a uma elemento, podemos clicar no rótulo do <label> para marcar ou desmarcar esse elemento.
Lembre-se também que colocamos dentro de $_GET[ ] ou $_POST[ ] o conteúdo de name=”…” dos elementos para pegar o valor retornado.