Finalidade dos formulários

Tamanho: px

Começar a partir da página:

Download "Finalidade dos formulários"

Lara Fagundes Madureira
6 Há anos
Visualizações:

1 ENTENDENDO O FORMULÁRIO Na opinião de muitos a criação de formulários na linguagem HTML é uma das áreas mais importantes no desenvolvimento web. Diferentemente de outras marcações HTML o formulário não permitem certos erros, sem prejudicar o resultado final, por isso em sua criação os erros são inadmissíveis por que afetam o funcionamento correto do formulário. Além de ser um assunto que merece o máximo da nossa atenção, ele é bem extenso e complexo. Por essa razão, achei por bem dividir essa aula em duas para que não te sobrecarregue com muita informação e possamos aprender de forma efetiva a criar formulários na linguagem HTML. Finalidade dos formulários Em desenvolvimento web é através dos formulários que os usuários (internautas) interagem de forma muita mais dinâmica com os sites. Simplificando ao máximo o conceito, podemos dizer que os formulários recebem os dados digitados pelo usuário e depois, com o auxílio de uma linguagem de programação, esse dados são utilizados e/ou armazenados em um banco de dados. Os formulários fazem então o papel de interface do nosso sistema, no qual sua única finalidade é receber os dados do usuário e repassá-los de forma organizada para outra página contendo uma linguagem de programação, podendo essa linguagem ser em php, java, asp, etc. Primeiro passo: inserir um formulário HTML na página. Tag <form>. Para inserir um formulário na página, deve ser usada a tag <form>, que possui os seguintes atributos: name: nome do formuário. id: identificação como de qualquer outro elemento HTML. action: define qual página será chamada quando o formulário for enviado. Geralmente, um script em uma linguagem server-side (PHP, JSP, entre outras). method: com o valor get, envia os dados do formulário pela URL; com o valor post, envia os dados "implicitamente" (forma não visível ao usuário). enctype: usado para fazer o upload de arquivos, quando é definido o valor multipart/form-data.

2 Exemplo O formulário abaixo enviar os dados para página <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>exemplo de formulário</title> </head> <body> <form name="formulario" id="formulario_cadastro" action="#" method="post"> Aqui são colocados os campos de entrada. Não fique bravo, o formulário é um container invisível. Só ficará visível quando houver campos de entrada. </form> </html> ] Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado. Vamos aos exemplos de campos de entrada Texto simples <input type="text" /> O exemplo abaixo cria um campo de entrada do tipo texto com o tamanho de 40 caracteres, comprimento máximo de 150 caracteres, nome = "endereco", com o texto padrão da caixa igual a "Digite o endereço". GET método que envia as variáveis digitadas pelo usuário pela URL, ou seja, podemos ver as variáveis sendo passadas pela URL da página de destino. Não é muito aconselhável o uso do método GET, pois ele expõe os nomes e os valores das variáveis. POST método que envia as variáveis digitadas pelo corpo da página, sendo completamente transparente para o usuário. É o método mais aconselhável. Depois de conhecermos um pouco sobre os atributos action e method, vamos observar um exemplo de como codificar a tag <form> com seus atributos obrigatórios. <form action="gravar_dados.php" method="post" > // campos do formulário </form> <label>endereço</label> <input type="text" name="endereco" value="digite o endereço" size="40" maxlength="150" /> Data <input type="date" /> O exemplo abaixo cria um campo de entrada do tipo data. <label>data de Nascimento</label> <input type="date" name="data_nascimento" />

3 Senha <input type="password" /> O exemplo abaixo cria um campo de senha. <label>senha</label> <input type="password" name="senha" /> Data/Hora <input type="datetime-local" /> O exemplo abaixo cria um campo de entrada do tipo data/hora. <label>data/hora de Entrada</label> <input type="datetime-local" name="datahora_entrada" /> Caixa de marcação única <input type="radio" /> O exemplo abaixo exibe 4 opções para o usuário selecionar apenas uma. Observe que o atributo name tem que ser igual para todas as caixas, mudando apenas os atributos value e id. <input type="radio" id="alternativa1" name="alternativa" value="a" /> <label for="alternativa1">alternativa A</label> <input type="radio" id="alternativa2" name="alternativa" value="b" /> <label for="alternativa2">alternativa B</label> <input type="radio" id="alternativa3" name="alternativa" value="c" /> <label for="alternativa3">alternativa C</label> <input type="radio" id="alternativa4" name="alternativa" value="d" /> <label for="alternativa4">alternativa D</label> Caixa de marcação múltipla <input type="checkbox" /> O exemplo abaixo exibe 4 opções para o usuário selecionar uma ou mais. Observe que o atributo name tem que ser igual para todas as caixas, mudando apenas os atributos value e id. <input type="checkbox" id="alternativa1" name="alternativa" value="a" /> <label for="alternativa1">alternativa A</label> <input type="checkbox" id="alternativa2" name="alternativa" value="b" /> <label for="alternativa2">alternativa B</label> <input type="checkbox" id="alternativa3" name="alternativa" value="c" /> <label for="alternativa3">alternativa C</label> <input type="checkbox" id="alternativa4" name="alternativa" value="d" /> <label for="alternativa4">alternativa D</label> Telefone, campo de Busca, ou URL <input type="..." /> Para alguns tipos de informações comuns em formulários, o HTML5 possui tipos específicos de input, que funcionam da mesma forma que o input do tipo text. Isso existe para dar semântica (significado) ao campo de entrada; caso contrário, usando apenas o tipo text, seria mais difícil diferentes telefone de , por exemplo. Campo de telefone <label>telefone</label> <input type="tel" name="telefone" size="20" maxlength="20" /> Campo de <label> </label> <input type=" " name=" " size="50" maxlength="80" />

4 Campo de busca <label>pesquise</label> <input type="search" name="busca" size="50" maxlength="80" /> Campo de URL <label>site</label> <input type="url" name="site" size="50" maxlength="100" /> Caixa de seleção <select> O exemplo abaixo exibe uma lista com 4 opções para o usuário selecionar uma. <label>estado</label> <select name="estado" id="estado"> <option value="ac">acre</option> <option value="al">alagoas</option> <option value="am">amazonas</option> <option value="ap">amapá</option> </select> Caixa de texto de múltiplas linhas <textarea> O exemplo abaixo exibe uma caixa de texto com 10 linhas e 60 colunas. <label>mensagem</label> <textarea name="" id="" rows="" cols=""></textarea> Botão para enviar o formulário <input type="submit" /> O exemplo abaixo cria um botão que envia os dados do formulário para a página definida no atributo action do formulário. <input type="submit" name="enviar" value="salvar" /> Botão para chamar ação em JavaScript <input type="button" /> O exemplo abaixo cria um botão que dispara uma ação em linguagem JavaScript. <input type="button" name="chamar" value="chamar" onclick="alert('uhuwww')" />

5 Vamos a um exemplo completo <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>exemplo de formulário</title> </head> <body> <form name="formulario" id="formulario_cadastro" action="salvar.jsp" method="post"> <label>nome</label> <input type="text" name="nome" size="40" maxlength="150" /><br /> <label>endereço</label> <input type="text" name="endereco" size="40" maxlength="150" /><br /> <label>cpf</label> <input type="text" name="cpf" size="20" maxlength="14" /><br /> <label>telefone</label> <input type="tel" name="telefone" size="20" maxlength="20" /><br /> <label> </label> <input type=" " name=" " size="40" maxlength="150" /><br /> Sexo <input type="radio" id="sexom" name="sexo" value="m" /> <label for="sexom">masculino</label> <input type="radio" id="sexof" name="sexo" value="f" /> <label for="sexof">feminino</label> </form> </html> <label>estado</label><select name="estado" id="estado"> <option value="ac">acre</option> <option value="al">alagoas</option> <option value="am">amazonas</option> <option value="ap">amapá</option> </select> <input type="submit" name="enviar" value="salvar" />

6 Exercício: Ficha de inscrição Utilizando-se do conteúdo estudado nessa aula, escreva um código HTML que reproduza um formulário de inscrição semelhante ao da imagem abaixo.

Documentos relacionados

Desenvolvimento em Ambiente Web. Prof. André Y. Kusumoto

Desenvolvimento em Ambiente Web Prof. André Y. Kusumoto andrekusumoto.unip@gmail.com Um Formulário é uma área com entrada de dados disponível para o usuário. A ideia básica do formulário é apresentar campos