Desenvolvimento de Aplicações WEB (DAW) Prof. Julio Arakaki 1o. Semestre 2016
Utilizado para coletar dados de entrada do usuário. Sintaxe: <form name="form" action="http://www.site.br/teste.php" method="post"> <! Elementos de entrada: caixas de texto checkbox radio buttons submit buttons select... > Ou GET
TextArea: várias linhas de texto <form name= formulario > Área de texto <br/> <textarea cols="40" rows="5"></textarea>
Text: uma linha de texto <form name= formulario > <br/>forneça um texto <br/> <input type="text" size="15" value=" " maxlength="15" align="center" name="text">
Password: uma linha de texto <form name= formulario > <br/>forneça um texto <br/> <input type="password" size="15" maxlength="15" align="center" name="text">
Checkbox: seleção de uma ou mais opções <form name= formulario > <div align="left"><br> <br/>não é OO<br/> <input type="checkbox" name="option1" value="c" checked> Linguagem C<br> <input type="checkbox" name="option2" value="c++" > C plus plus<br> <input type="checkbox" name="option3" value="c#"> C sharp<br> <input type="checkbox" name="option3" value="java"> Java<br> </div>
Radio Button: seleção de uma opção entre várias <form name= formulario > <div align="left"><br> <br/>melhor Linguagem<br/> <input type="radio" name="grupo1" value="c" > C<br> <input type="radio" name="grupo1" value="c#"> C#<br> <input type="radio" name="grupo1" value="java" checked> Java <hr> <br/>melhor Bebida<br/> <input type="radio" name="grupo2" value="vinho" checked> Vinho<br> <input type="radio" name="grupo2" value="cerveja"> Cerveja<br> <input type="radio" name="grupo2" value="pinga" > Pinga<br> </div><br>
Select: cria um menu ( drop down list ) <form name= formulario > <div align="left"> <br/>selecione a disciplina<br/> <select name="disciplinas"> <option value="ed1" selected>estrutura de Dados</option> <option value="lp3">laboratório de Programação III</option> <option value="lr2">laboratório de Redes II</option> </select> </div>
Radio Button: seleção de uma opção entre várias <form name= formulario > <div align="left"> <b>forneça seu CPF</b> <input type="text" size="25" value=""><br><br> <input type="submit" value="enviar"> <input type="reset" value="limpar"><br> </div>
Código Fonte: Veja seminario.html
HTML e JavaScript Javascript: linguagem de programação interpretada. Originalmente implementada para navegadores web. Os scripts são executados no cliente e interagem com o usuário sem a necessidade do servidor. Principal linguagem para programação client side em navegadores web. (https://pt.wikipedia.org/wiki/javascript) SINTAXE <script type= text/javascript > // código javascript </script>
Exemplo HTML e JavaScript <h1>teste JavaScript</h1> <p id="demo"></p> <script > var x = 5; var y = 6; var z = x + y; document.getelementbyid("demo").innerhtml = z; alert("valor de z: " + z); </script>
HTML e JavaScript. <h1>validando Entrada</h1> <p>digite um número de 1 a 10</p> <input id="numero"> <button type="button" onclick="validar()">enviar</button> <p id="msg"></p> <script> function validar() { var x, texto; // Pega o valor do campo de texto id="numero" x = document.getelementbyid("numero").value;... // Verifica se eh um numero e esta entre 1 e 10 if (isnan(x) x < 1 x > 10) { texto = "Invalida Invalida: " + x; } else { texto = "Entrada Valida: " + x; } document.getelementbyid("msg").innerhtml = texto; } </script>
HTML e JavaScript TUTORIAL COMPLETO http://www.w3schools.com/js/default.asp
Atividade (individual) Utilizando como base o exemplo: 1) Criar um formulário para cadastro de aluno em disciplina Optativa. Características: dados pessoais (nome, cpf, rg, endereço...) dados do aluno (ra, disciplinas já cursadas,...) dados do perfil (login, password (com confirmação), imagem,...) incluir um campo com área de texto para sugestões. incluir validações (p. exemplo: idade, data de nascimento, senha (tem que ter números e letras)... entre outros. (usar a criatividade) Disponibilizar no inbox da disciplina. Entregar até a próxima aula