Atributos do Elemento <font>
13. Formulários
13.6 Elementos para Formulários Elemento Descrição
número ilimitado de caracteres)
<label> Define um nome para um elemento
<fieldset> Agrupa elementos num formulário
<legend> Define uma legenda para um grupo de elementos do formulário <select> Define uma lista com várias opções selecionáveis
<optgroup> Define um grupo de opções
<option> Insere mais uma opção numa lista com várias opções selecionáveis <button> Define um botão que pode ser pressionado
Exemplos de Aplicação
Como criar campos para inserção de texto ou dados
<html> <head> <title>Exemplo</title> </head> <body> <form action="processar.php">
Escreva o seu primeiro nome: <input name="firstname"><br> Escreva o seu último o nome: <input name="lastname"><br> <input type="submit">
</form> </body> </html>
Campos para senhas ("password")
<html> <head> <title>Exemplo</title> </head> <body> <form action="processar.php">
Escreva o seu nome de usuário: <input name="user"><br>
Escreva a sua senha (segredo): <input type="password" value="" name="password"><br>
<input type="submit"> </form>
<p><b>Nota:</b> Quando se digita uma senha o browser mostra asteriscos ou bolinhas em vez dos caracteres que introduz. Deste modo se alguém estiver espionando por cima do seu ombro enquanto escreve não vai conseguir ler a sua senha.</p>
</body> </html>
Caixas de validação ("checkboxes") <html> <head> <title>Exemplo</title> </head> <body> <form action="processar.php">
Eu tenho uma bicicleta: <input type="checkbox" value="ON" name="bicicleta"><br>
Eu tenho patins em linha: <input type="checkbox" value="ON" name="patins"> <br> <input type="submit"> </form> </body> </html>
"Radiobuttons" (grupos de botões em que apenas um pode estar ativo)
<html> <head> <title>Exemplo</title> </head> <body> <form action="processar.php">
Masculino: <input type="radio" checked value="macho" name="Sexo"><br> Feminino: <input type="radio" value="fêmea" name="Sexo"><br>
<input type="submit"> </form>
restantes "radiobuttons" pertencentes ao mesmo grupo passam ao estado "unchecked".</p>
</body> </html>
Lista com vários itens para selecionar
<html> <head> <title>Exemplo</title> </head> <body> <h3>Times</h3> <form action="processar.php"> <select name="clubes">
<option value="Benfica" selected="selected">Benfica</option> <option value="FCP">F.C.P</option> <option value="Boavista">Boavista</option> <option value="Sporting">Sporting</option> </select><br> <input type="submit"> </form> </body> </html>
Lista com vários itens selecionáveis, mas com um valor pré-selecionado
<html> <head>
<title>Exemplo</title> </head>
<h3>Times</h3>
<form action="processar.php"> <select name="clubes">
<option value="Benfica" selected="selected">Benfica</option> <option value="FCP">F.C.P</option>
<option value="Boavista" selected>Boavista</option> <option value="Sporting">Sporting</option>
</select><br>
<input type="submit"> </form>
Repare que aqui temos um item pré-selecionado de forma explícita. </body>
</html>
Como criar um botão
<html> <head> <title>Exemplo</title> </head> <body> <form action="processar.php">
<input type="button" value="Carregue Aqui!"> </form>
</body> </html>
Formulário com um campo para inserir dados e um botão para submeter <html> <head> <title>Exemplo</title> </head> <body>
<form name="input" action="processar.php" method="get"> Escreva o seu primeiro nome: <input value="Robin" name="PrimeiroNome"><br>
Escreva o seu último o nome: <input value="dos Bosques" name="UltimoNome"><br>
<input type="submit"> </form>
<p>Se clicar sobre o botão "Submeter" os dados do formulário serão enviados para a página "processar.php".</p>
</body> </html>
Formulário com caixas de validação e um botão para submeter
<html> <head>
<title>Exemplo</title> </head>
<body>
<form name="input" action="processar.php" method="get">
Eu tenho uma bicicleta: <input type="checkbox" checked value="ON" name="Bike"><br>
Eu tenho patins em linha: <input type="checkbox" value="ON" name="Patins"><br>
<input type="submit"> </form>
<p>Se clicar sobre o botão "Submeter" os dados do formulário serão enviados para a página "processar.php".</p>
</body> </html>
Formulário com "radiobuttons" e um botão para submeter <html> <head> <title>Exemplo</title> </head> <body>
<form name="input" action="processar.php" method="get">
Masculino: <input type="radio" checked value="Masculino" name="Sexo"><br>
Feminino: <input type="radio" value="Feminino" name="Sexo"><br> <input type="submit">
</form>
<p>Se clicar sobre o botão "Submeter" os dados do formulário serão enviados para a página "processar.php".</p>
</body> </html>