21
HTML A alma da internet Prof. Mauro Duarte Prof. Mauro Duarte

4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Embed Size (px)

Citation preview

Page 1: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

HTMLA alma da internet

Prof. Mauro DuarteProf. Mauro Duarte

Page 2: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Formulários

Formulários em HTML tem uma estrutura básica a tag <form> inicia o formulário, <input> recebe informações do usuário, envia ou limpa o formulário de acordo o tipo.

Veja um exemplo

Page 3: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Formulários

<form><label>Primeiro nome: </label><input type="text" name="firstname">

<br><label>Segundo nome:</label><input type="text" name="lastname">

</form>

Page 4: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Formulários

<form action="acao.php" method="POST">

● A tag <form> recebe no mínimo 2 parâmetros, ● action que define quem tratará o formulário● method que define como será enviado as

informações.

Page 5: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Formulários

<label>Seu nome</label><input type="text" name="nome" >

● A tag <input> recebe no mínimo 2 parâmetros, ● type que define o tipo.● name que define como esta tag será lida.

Page 6: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “text”

<label>Seu nome</label><input type="text" name="nome" >

● Text é um campo de texto, aceita tudo.

Page 7: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “password”

<label>Senha</label><input type="password" name="pwd">

● Password é um campo de texto, aceita tudo, entretanto esconde a digitação.– html5

Page 8: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “radio”

<input type="radio" name="sexo" value="male">Macho<br><input type="radio" name="sexo" value="female">Fêmea

Radio cria botões de opção, o name deve ser o mesmo para todos os seletores iguais.– html5

Page 9: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “checkbox”

<input type="checkbox" name="vehicle" value="Bike">Eu tenho uma Bike<br><input type="checkbox" name="vehicle" value="Car">Eu tenho um carro

● Checkbox cria botões de marcação.– html5

Page 10: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “submit”

<input type="submit" value="Enviar">

submit cria um botão para enviar o formulário.

Value define o texto do botão.

Page 11: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “reset”

<input type="reset" value="Limpar">

Reset cria um botão para limpar o formulário.

Value define o texto do botão.

Page 12: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “textarea”

<textarea rows="4" cols="50">

</textarea>

Textarea cria um campo “grande” para escrever um parágrafo.

Page 13: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “textarea”

<select><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="wv">WV</option><option value="audi">Audi</option>

</select>

select cria um campo “menu” drop-down para escolher uma opção.

A tag option recebe value para criar as opções do menu.– html5

Page 14: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “email”

E-mail: <input type="email" name="email">

Filtra a entrada para e-mail solicitando “@” e “.”.– Html5

Page 15: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “range”

<input type="range" id="a" value="50">

Range cria um seletor numérico.– html5

Page 16: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “color”

Escolha sua cor favorita: <input type="color" name="favcolor">

Color cria um seletor de cores.– Html5

– Sem suporte completo

Page 17: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “date”

Aniversário: <input type="date" name="niver">

Filtra a entrada para datas– Html5

– Sem suporte completo.

Page 18: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “datetime-local”

Data e hora atual: <input type="datetime-local" name="time">

Filtra a entrada para data e hora atual– Html5

– Sem suporte completo.

Page 19: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “range”

<input type="range" name="points" min="1" max="10">

Filtra a entrada para número dentro de um limite máximo e mínimo.– Html5

– Sem suporte completo

Page 20: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “button”

<button type="button" onclick="alert('Olá Mundo!')">Me clique</button>

Button cria um botão clicavel que executa uma tarefa.– html5

Page 21: 4 - Introdução ao Desenvolvimento Web - Formulários (pt 1)

Tipos de input - “operadores”

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><input type="number" id="a" value="50">

+<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>

O HTML5 tem suporte lógico e matemático, sumulando uma linguagem de programação.– html5