Autoria Web

Formulários

Prof. Silvano Oliveira / 15

Formulários
● Um formulário em uma página HTML permite a entrada de dados, que
serão processados
●<form> </form>

Prof. Silvano Oliveira Autoria WEB 2 / 15

Formulários
● Tags básicas
● form
● input
● textarea
● select
● option
Type Descrição
<input type="text"> Define um campo de entrada de linha-texto

<input type="radio"> Define um botão (para seleção de uma opção)

<input type="submit"> Define um botão para submeter os itens do

formulário

Prof. Silvano Oliveira Autoria WEB 3 / 15

Entrada text: form.html
●<form>
Primeiro Nome:<br />
<input type="text" name=“primeironome”><br />
Sobrenome:<br />
<input type="text" name=“sobrenome”>
</form>

Prof. Silvano Oliveira Autoria WEB 4 / 15

Entrada de opções
● <form>
<input
type=“radio” name=“sexo” value=“masc” checked> Masculino<br />

<input
type=“radio” name=“sexo” value=“fem”> Feminino<br />

<input
type=“radio” name=“sexo” value=“outro”> Outro
● </form>

Prof. Silvano Oliveira Autoria WEB 5 / 15

Submeter
●<form name=“form_cadastro">
Primeiro Nome:<br />
<input type="text" name=“primeironome" value=“Pedro"><br />
Sobrenome:<br />
<input type="text" name=“sobrenome" value=“Lima"><br /><br />
<input type="submit" value=“Incluir">
</form>

Prof. Silvano Oliveira Autoria WEB 6 / 15

Entrada de opções múltiplas
● <form>
<input
type=“checkbox” name=“sexo” value=“masc”> Masculino<br />

<input
type=“checkbox” name=“sexo” value=“fem”> Feminino<br />

<input
type=“checkbox” name=“sexo” value=“outro”> Outro
● </form>

Prof. Silvano Oliveira Autoria WEB 7 / 15

Entrada de opções suspensas
● <form>
●<select name=“menusexo">
<option value="item_1"> item_1 da lista</option>
<option value="item_2"> item_2 da lista</option>
<option value="item_3"> item_3 da lista</option>
<option value="item_4"> item_4 da lista</option>
●</select>
● </form>

Prof. Silvano Oliveira Autoria WEB 8 / 15

Caixa de Texto Maior
●<form>
<textarea name=“msg” rows=“10” cols=“30”>O curso de
Desenvolvedor de Aplicativo Web está
acabando.</textarea><br />
<input type="submit">
●</form>

Prof. Silvano Oliveira Autoria WEB 9 / 15

Exemplo
●<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
●</form>

Prof. Silvano Oliveira Autoria WEB 10 / 15

Form de Login com senha
● <form name=“login” method="post" action="#">
● <label>Usuário:
●<input name="user" type="text" tabindex="1"
size="15">
● </label>
● <label>Senha:
●<input name=“senha” type="password" tabindex="2"
size="15"/>
●<input type="submit" name="Submit" value="OK"
tabindex="3">
● </label>
● </form>

Prof. Silvano Oliveira Autoria WEB 11 / 15

Exercício
●Criar o formulário
(contato.html) ao lado usando
as tags e objetos já vistos: text,
textarea, submit

Prof. Silvano Oliveira Autoria WEB 12 / 15

● <form name=“contato">
● <table>
● <tr> <th colspan="2">Formulário de contato</th> </tr>
● <tr> <td><label>Nome</label></td> <td><input name="nome"
type="text" size="33" maxlength="1000"></td></tr>
● <tr> <td><label>*e-mail</label></td> <td><input name="email"
type="text" size="33" maxlength="1000"></td> </tr>
● <tr> <td><label>Assunto</label></td> <td><input name=“assunto”
type="text" size="33" maxlength="1000"></td> </tr>
● <tr> <td><label>*Comentários</label> </td> <td><textarea
name="comentario" cols="25" rows="7" > </textarea> </td> </tr>
● <tr> <td><input name="submit" type="submit" value="Enviar"
class="botao"> </td> <td>*Campos de preenchimento obrigatório</td>
</tr>
● </table>
● </form>

Prof. Silvano Oliveira Autoria WEB 13 / 15

Perguntas???

Prof. Silvano Oliveira Autoria WEB 14 / 15

Referências
●http://diveintohtml5.com.br/forms.html
●http://www.html5rocks.com/pt/tutorials/forms/html5forms/

Prof. Silvano Oliveira Autoria WEB 15 / 15