Desenvolvimento de Aplicações WEB (DAW) Prof. Julio Arakaki 1o. Semestre 2016

Transcrição

1 Desenvolvimento de Aplicações WEB (DAW) Prof. Julio Arakaki 1o. Semestre 2016

2 Utilizado para coletar dados de entrada do usuário. Sintaxe: <form name="form" action=" method="post"> <! Elementos de entrada: caixas de texto checkbox radio buttons submit buttons select... > Ou GET

3 TextArea: várias linhas de texto <form name= formulario > &Aacuterea de texto <br/> <textarea cols="40" rows="5"></textarea>

4 Text: uma linha de texto <form name= formulario > <br/>forne&ccedila um texto <br/> <input type="text" size="15" value=" " maxlength="15" align="center" name="text">

5 Password: uma linha de texto <form name= formulario > <br/>forne&ccedila um texto <br/> <input type="password" size="15" maxlength="15" align="center" name="text">

6 Checkbox: seleção de uma ou mais opções <form name= formulario > <div align="left"><br> <br/>n&atildeo &eacute 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>

7 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>

8 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&oacuterio de Programa&ccedil&atildeo III</option> <option value="lr2">laborat&oacuterio de Redes II</option> </select> </div>

9 Radio Button: seleção de uma opção entre várias <form name= formulario > <div align="left"> <b>forne&ccedila seu CPF</b> <input type="text" size="25" value=""><br><br> <input type="submit" value="enviar"> <input type="reset" value="limpar"><br> </div>

10 Código Fonte: Veja seminario.html

11 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. ( SINTAXE <script type= text/javascript > // código javascript </script>

12 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>

13 HTML e JavaScript. <h1>validando Entrada</h1> <p>digite um n&uacutemero 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>

14 HTML e JavaScript TUTORIAL COMPLETO

15 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