07 html formulários
Transferir como PPTX, PDF•1 gostou•1,603 visualizações
O documento descreve os principais elementos de formulários em HTML, incluindo campos de texto, senha, botões de opção, caixas de seleção e áreas de texto, e fornece exemplos de código HTML para implementá-los.
07 html formulários
- 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
- 2. Formulários • Os Formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário.
- 3. Campos de texto • Este exemplo demonstra como criar campos de texto em uma página HTML. Um usuário pode escrever o texto em um campo de texto. <html> <body> <form> Primeiro nome: <input type="text" name="firstname"> <br> Último nome: <input type="text" name="lastname"> </form> </body> </html>
- 4. Campos de senha • Este exemplo demonstra como criar um campo de senha em uma página HTML. <html> <body> <form> Nome do Usuário: <input type="text" name="user"> <br> Senha: <input type="password" name="password"> </form> <p> Note que quando você digita caracteres num campo de senha, o navegador exibe Asteriscos. </p> </body> </html>
- 5. Formulários • Um formulário é uma área que pode conter elementos de formulário. • Os elementos de formulário são elementos que permitem o usuário entrar informação (como campos de texto, campos de área de texto, menus drop- down, botões radiais, caixas de seleção, etc.) em um formulário. • Um formulário é definido pela tag <form>. <form> .... ..... </form>
- 6. Entrada (Input) A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo type (tipo). Os tipos de input mais cumumente usados são explicados abaixo. Campos deTexto Os campos de texto são usados quando você quer que o usuário digite letras, números, etc. em um formulário. <form> Primeiro nome: <input type="text" name="firstname"> <br> Último nome: <input type="text" name="lastname"> </form>
- 7. Botões Radiais Botões Radiais são usados quando você quer que o usuário selecione uma entre uma quantidade limitada de escolhas. <form> <input type="radio" name="sex" value="male"> Masculino <br> <input type="radio" name="sex" value="female"> Feminino </form>
- 8. Caixas de Seleção • As Caixas de Seleção são usadas quando você quer que o usuário selecione uma ou mais opções de uma quantidade limitada de escolhas <form> <input type="checkbox" name="bike"> Eu tenho uma bicicleta <br> <input type="checkbox" name="car"> Eu tenho um carro </form>
- 9. O Atributo Ação do Formulário (Form's Action) e o Botão Enviar (Submit) • Quando o usuário clica no botão "Enviar", o conteúdo do formulário é enviado para outro arquivo. O atributo de ação do formulário define o nome do arquivo para o qual enviar o conteúdo. O arquivo definido no atributo action geralmente faz algo com a entrada recebida. <form name="input" action="html_form_action.asp“ method="get"> Nome do Usuário: <input type="text" name="user"> <input type="submit" value="Enviar"> </form>
- 10. Checkbox • Este exemplo demonstra como criar caixas de seleção numa página HTML.Um usuário pode selecionar ou de selecionar uma caixa de seleção. <html> <body> <form> Eu tenho uma bicicleta: <input type="checkbox" name="Bike"> <br> Eu tenho um carro: <input type="checkbox" name="Car"> </form> </body> </html>
- 11. Radiobutton • Este exemplo demonstra como criar botões radiais numa página HTML. <html> <body> <form> Masculino: <input type="radio" checked name="Sex" value="male"> <br> Feminino: <input type="radio“ name="Sex" value="female"> </form> <p> Quando um usuário clica num botão radial, o botão torna-se marcado, e todos os outros botãos com o mesmo nome tornam-se desmarcados. </p> </body> </html>
- 12. Caixa drop down Simples • Este exemplo demonstra como criar uma caixa drop down simples numa página HTML. A caixa drop-down é uma lista selecionável. <html> <body> <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi </select> </form> </body> </html>
- 13. Outra caixa drop down • Este exemplo demonstra como criar uma caixa drop down simples com um valor pré-selecionado. <html> <body> <form> <select name="cars"> <option value="volvo">Volvo <option value="saab">Saab <option value="fiat" selected>Fiat <option value="audi">Audi </select> </form> </body> </html>
- 14. Área deTexto • Este exemplo demonstra como criar uma área de texto (um controle de entrada de texto multi-linhas). Um usuário pode escrever texto na área de texto. Numa área de texto você pode escrever uma quantidade ilimitada de caracteres. <html> <body> <p> Este exemplo não pode ser editado porque nosso editor usa uma textarea para a entrada de dados, e o seu navegador não permite uma área de texto dentro de uma área de texto. </p> <textarea rows="10" cols="30"> O gato estava brincando no jardim.
- 15. Criar um botão • Este exemplo demonstra com criar um botão. No botão você pode definir o seu próprio texto. <html> <body> <form> <input type="button" value="Oi mundo!"> </form> </body> </html>
- 16. Conjunto de campo em torno dos dados • Este exemplo demonstra como desenhar uma borda com um título em torno dos seus dados. <html> <body> <fieldset> <legend> Informações de saúde: </legend> <form> Altura <input type="text" size="3"> Pêso <input type="text" size="3"> </form> </fieldset> <p> Se não houver borda em torno do formulário de entrada, o seu navegador é muito antigo. </p> </body> </html>
- 17. Formulário - Exemplo <html> <body> <form name="input“ action="html_form_action.asp“ method="get"> Digite o seu primeiro nome: <input type="text" name="FirstName“ value="Mickey" size="20"> <br>Digite o seu último nome: <input type="text" name="LastName“ value="Mouse" size="20"> <br> <input type="submit" value="Enviar"> <input type="reset" value="Limpar"> </form> <p> Se você clicar no botão "Enviar", você envirá sua entrada para uma nova página chamada html_form_action.asp. </p> </body> </html>
- 18. Formulário – Exemplo2 <HTML> <HEAD> <TITLE>EX10</TITLE> </HEAD> <FORM action="mailto:[email protected]" method="post" enctype="text/plain"> Nome <INPUT type="text" name="nome" size="30" maxlength="100"> <P> E-mail <INPUT type="text" name="email" size="25" maxlength="100" value="@"> <P> Cidade <INPUT type="text" name="cidade" size="20" maxlength="60"> <P> Sexo <BR> <INPUT type="radio" name="sexo" value="Masculino" checked> Homem <BR> <INPUT type="radio" name="sexo" value="Feminino"> Mulher <BR> <BR> Frequência das viagens <BR> <SELECT name="utilização"> <OPTION value="1">Várias vezes por dia <OPTION value="2">Uma vez por dia <OPTION value="3">Várias vezes por semana <OPTION value="4">várias vezes por mês </SELECT> <BR> <BR>Comentários sobre sua satisfação pessoal <BR> <TEXTAREA cols="30" rows="7" name="comentários"></TEXTAREA> <BR> <BR> <INPUT type="checkbox" name="receber_info" checked> Desejo receber notificação das novidades nas linhas de ônibus. <BR> <BR> <INPUT type="submit" value="Enviar formulário"> <BR> <BR> <INPUT type="Reset" value="Apagar tudo"> </FORM> </HTML>