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

Tamanho: px

Começar a partir da página:

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

David Bandeira de Almeida
6 Há anos
Visualizações:

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

2 Um Formulário é uma área com entrada de dados disponível para o usuário. A ideia básica do formulário é apresentar campos de entrada de dados, para que o usuário possa digitar sua informação. Aciona Envia Usuário Visualiza Browser Página Servidor Manipula Informação Script Resposta HTML 2/23

3 O tag <form> delimita um formulário e contém uma seqüência de entradas e de formatações do documento. <form action="url_script" method="método">...</form> Onde: action - Especifica o URL do script ao qual serão enviados os dados do formulário. method - Indica a forma de transferência do browser para o servidor: get - Envia a informação logo após a URL. post - Envia a informação em um bloco separado. 3/23

4 Text - Inserção de Texto Habilita o usuário a digitar texto a partir do teclado. <input type="text" name="nome" size="n" maxlength="n" value="valor" /> Onde: name - Nome do campo. size - Número de caracteres do campo (default="20"). maxlength - Número máximo de caracteres permitido no campo. Se maxlength > size, o texto rola. value - Valor default do campo. 4/23

5 <html> <head> <title>formulários</title> </head> <body> <h1>formulários XHTML</h1> <form method="post"> Nome: <input type="text" name="txtnome" size="50" maxlength="50" /> </form> </body> </html> 5/23

6 Text - Inserção de Texto Protegido - Password Semelhante ao tipo Text, a diferença está nos caracteres digitados que aparecerão como asteriscos. <input type="password" name="nome" size="n" maxlength="n" value="valor" /> Onde: name - Nome do campo. size - Número de caracteres do campo (default="20"). maxlength - Número máximo de caracteres permitido no campo. Se maxlength > size, o texto rola. value - Valor default do campo. 6/23

7 <html> <head> <title>formulários</title> </head> <body> <h1>formulários XHTML</h1> <form method="post"> Formulários Nome: <input type="text" name="txtnome" size="50" maxlength="50" /> <br /> Senha: <input type="password" name="senha" size="8" maxlength="8" value="1234" /> </form> </body> </html> 7/23

8 Inserção de Campos Ocultos - Hidden O campo Hidden (oculto) não é apresentado ao usuário, mas seu conteúdo será enviado junto com os demais campos do formulário. <input type="hidden" name="nome" value="valor" /> Onde: name - Nome do campo. value - Valor default do campo. 8/23

9 <html> <head> <title>formulários</title> </head> <body> <h1>formulários XHTML</h1> <form method="post"> Formulários Nome: <input type="text" name="txtnome" size="50" maxlength="50" /> <br /> Senha: <input type="password" name="senha" size="8" maxlength="8" value="1234" /> <input type="hidden" name="mail" /> </form> </body> </html> 9/23

10 Textarea - Inserção de Memorando Formulários Exibe um campo em que o usuário pode entrar com múltiplas linhas de texto. <textarea name="nome" rows="n" cols="n"> : </textarea> Onde: name - Nome do campo. rows - Número de linhas da área. cols - Número de colunas (caracteres) da área. 10/23

11 (...) <form method="post"> Formulários Nome: <input type="text" name="txtnome" size="50" maxlength="50" /> <br /> Senha: <input type="password" name="senha" size="8" maxlength="8" value="1234" /> <input type="hidden" name="mail" /> <br /> Dê a sua opinião: <br /> <textarea name="opiniao" rows="4" cols="40"></textarea> (...) 11/23

12 Listbox Formulários É um campo de seleção em que uma lista é exibida para a escolha das opções. <select name="nome" size="n" multiple> <option value="val1">valor1</option> <option value="val2" selected>valor2</option> </select> Onde: name - Nome do campo. size - Especifica quantas linhas da lista ficarão visível. multiple - Permite selecionar mais de uma opção (cntrl). selected - Especifica que o campo está selecionado. 12/23

13 (...) Estado de origem: <select name="cmbestado" size="1"> <option value="sp">são Paulo</option> <option value="pr">paraná</option> <option value="rj">rio de Janeiro</option> <option value="mg" selected>minas Gerais</option> </select> (...) 13/23

14 Checkbox Formulários São campos de seleção em que o usuário pode escolher mais de uma alternativa. <input type="checkbox" name="nome" value="valor" checked/> Onde: name - Nome do campo. value - Valor que será enviado para o servidor. checked - Especifica que o campo está inicialmente selecionado. 14/23

15 (...) Formulários Escolha em quais linguagens você programa: <br /> <input type="checkbox" name="asp" />ASP <input type="checkbox" name="php" />PHP <input type="checkbox" name="c" />C <input type="checkbox" name="csharp" checked />C# <input type="checkbox" name="java" />JAVA (...) 15/23

16 Radio Button Formulários São campos de seleção em que o usuário pode escolher apenas uma alternativa. <input type="radio" name="nome" value="valor" checked /> Onde: name - Nome do campo. value - Valor que será enviado para o servidor. checked - Especifica que o campo está inicialmente selecionado 16/23

17 (...) Escolha qual linguagem você mais gosta: <br /> <input type="radio" name="ling" value="asp" />ASP <input type="radio" name="ling" value="php" />PHP <input type="radio" name="ling" value="c" checked />C <input type="radio" name="ling" value="csharp" />C# <input type="radio" name="ling" value="java" />JAVA (...) 17/23

18 Botão Reset Retorna os campos aos seus valores iniciais (default). <input type="reset" value="rótulo"> Onde: value - Rótulo (label) que aparecerá no botão no lugar da palavra reset. 18/23

19 (...) <input type="reset" value="limpar" /> (...) 19/23

20 Botão Submit Envia os dados para o servidor ao script definido no atributo action. <input type="submit" value="rótulo"> Onde: value - Rótulo (label) que aparecerá no botão no lugar da palavra submit. 20/23

21 (...) <input type="submit" value="enviar" /> (...) 21/23

22 1. Criar o seguinte formulário Exercícios 22/23

23 Referências Notas de aula Prof. José Marcos Barbosa da Silveira. Disponível em Acessado em 25/01/2010. Notas de aula Prof. Paulo Roberto Travassos. Tópicos Avançados em Sistemas. Lemay, Laura. Aprenda a Criar Páginas Web com Html e Xhtml, em 21 dias. Makron Books, Cavalcante, Victor. Web Standards, notas de aula. Zeldman, Jeffrey. Projetando Web Sites Compatíveis, Campus. Valentine, Chelsea. Xhtml, Campus. Silva, Osmar J. HTML 4.0 e XHTML Domínio e Transição, Érica. Macedo, Marcelo da Silva. Construindo Sites Adotando Padrões Web, Ciência Moderna. 23/23

Documentos relacionados

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados