Upload
mauro-duarte
View
463
Download
3
Embed Size (px)
Citation preview
HTMLA alma da internet
Prof. Mauro DuarteProf. Mauro Duarte
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
Formulários
<form><label>Primeiro nome: </label><input type="text" name="firstname">
<br><label>Segundo nome:</label><input type="text" name="lastname">
</form>
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.
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.
Tipos de input - “text”
<label>Seu nome</label><input type="text" name="nome" >
● Text é um campo de texto, aceita tudo.
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
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
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
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.
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.
Tipos de input - “textarea”
<textarea rows="4" cols="50">
</textarea>
Textarea cria um campo “grande” para escrever um parágrafo.
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
Tipos de input - “email”
E-mail: <input type="email" name="email">
Filtra a entrada para e-mail solicitando “@” e “.”.– Html5
Tipos de input - “range”
<input type="range" id="a" value="50">
Range cria um seletor numérico.– html5
Tipos de input - “color”
Escolha sua cor favorita: <input type="color" name="favcolor">
Color cria um seletor de cores.– Html5
– Sem suporte completo
Tipos de input - “date”
Aniversário: <input type="date" name="niver">
Filtra a entrada para datas– Html5
– Sem suporte completo.
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.
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
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
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