Curso de HTML5, CSS e JavaScript

Aqui, você irá aprender 3 linguagens essenciais para criar páginas Web: HTML5, CSS e JavaScript.

Se você está começando, vou explicar de uma maneira bem grosseira: HTML5 é para colocar as coisas na página, CSS é para deixar bonito.
Ou seja, HTML5 separa os elementos da interface em seções, tabelas, formulários, parágrafos, etc., enquanto a linguagem CSS formata esses elementos com cores, bordas, espaçamento, etc.
A linguagem JavaScript detecta a interação do usuário e permite manipular os elementos da interface, aprimorando a experiência do usuário.

HTML5 - formulários

Formulários são usados para permitir a entrada de dados pelos usuários. Em HTML5, há diferentes tipos de campos de entrada, tais como: campo de texto simples, campo de texto longo (múltiplas linhas), data, caixa de seleção, caixa de marcação, etc.

Vamos aprender como usar cada tipo de campo.

Primeiro passo: inserir um formulário HTML na página. Tag <form>.

Para inserir um formulário na página, deve ser usada a tag <form>, que possui os seguintes atributos:

  • name: nome do formuário.
  • id: identificação como de qualquer outro elemento HTML.
  • action: define qual página será chamada quando o formulário for enviado. Geralmente, um script em uma linguagem server-side (PHP, JSP, entre outras).
  • method: com o valor get, envia os dados do formulário pela URL; com o valor post, envia os dados "implicitamente" (forma não visível ao usuário).
  • enctype: usado para fazer o upload de arquivos, quando é definido o valor multipart/form-data.

Exemplo

O formulário abaixo enviar os dados para página salvar.jsp através do método post.


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Exemplo de formulário</title>        
    </head>
    <body>

    <form name="formulario" id="formulario_cadastro" action="salvar.jsp" method="post">
        Aqui são colocados os campos de entrada.
        Não fique bravo, o formulário é um container invisível.
        Só ficará visível quando houver campos de entrada.
    </form>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

Vamos aos exemplos de campos de entrada

Texto simples <input type="text" />

O exemplo abaixo cria um campo de entrada do tipo texto com o tamanho de 40 caracteres, comprimento máximo de 150 caracteres, nome = "endereco", com o texto padrão da caixa igual a "Digite o endereço".

<label>Endereço</label> <input type="text" name="endereco" value="Digite o endereço" size="40" maxlength="150" />

Data <input type="date" />

O exemplo abaixo cria um campo de entrada do tipo data.

<label>Data de Nascimento</label> <input type="date" name="data_nascimento" />

Senha <input type="password" />

O exemplo abaixo cria um campo de senha.

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

Data/Hora <input type="datetime-local" />

O exemplo abaixo cria um campo de entrada do tipo data/hora.

<label>Data/Hora de Entrada</label> <input type="datetime-local" name="datahora_entrada" />

Caixa de marcação única <input type="radio" />

O exemplo abaixo exibe 4 opções para o usuário selecionar apenas uma. Observe que o atributo name tem que ser igual para todas as caixas, mudando apenas os atributos value e id.


<input type="radio" id="alternativa1" name="alternativa" value="A" /> <label for="alternativa1">Alternativa A</label>
<input type="radio" id="alternativa2" name="alternativa" value="B" /> <label for="alternativa2">Alternativa B</label>
<input type="radio" id="alternativa3" name="alternativa" value="C" /> <label for="alternativa3">Alternativa C</label>
<input type="radio" id="alternativa4" name="alternativa" value="D" /> <label for="alternativa4">Alternativa D</label>

Caixa de marcação múltipla <input type="checkbox" />

O exemplo abaixo exibe 4 opções para o usuário selecionar uma ou mais. Observe que o atributo name tem que ser igual para todas as caixas, mudando apenas os atributos value e id.


<input type="checkbox" id="alternativa1" name="alternativa" value="A" /> <label for="alternativa1">Alternativa A</label>
<input type="checkbox" id="alternativa2" name="alternativa" value="B" /> <label for="alternativa2">Alternativa B</label>
<input type="checkbox" id="alternativa3" name="alternativa" value="C" /> <label for="alternativa3">Alternativa C</label>
<input type="checkbox" id="alternativa4" name="alternativa" value="D" /> <label for="alternativa4">Alternativa D</label>

Telefone, campo de Busca, e-mail ou URL <input type="..." />

Para alguns tipos de informações comuns em formulários, o HTML5 possui tipos específicos de input, que funcionam da mesma forma que o input do tipo text.
Isso existe para dar semântica (significado) ao campo de entrada; caso contrário, usando apenas o tipo text, seria mais difícil diferentes telefone de e-mail, por exemplo.

Campo de telefone
<label>Telefone</label> <input type="tel" name="telefone" size="20" maxlength="20" />
Campo de e-mail
<label>E-mail</label> <input type="email" name="email" size="50" maxlength="80" />
Campo de busca
<label>Pesquise</label> <input type="search" name="busca" size="50" maxlength="80" />
Campo de URL
<label>Site</label> <input type="url" name="site" size="50" maxlength="100" />

Caixa de seleção <select>

O exemplo abaixo exibe uma lista com 4 opções para o usuário selecionar uma.

<label>Estado</label><select name="estado" id="estado">
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AM">Amazonas</option>
    <option value="AP">Amapá</option>
</select>

Caixa de texto de múltiplas linhas <textarea>

O exemplo abaixo exibe uma caixa de texto com 10 linhas e 60 colunas.

<label>Mensagem</label> <textarea name="" id="" rows="" cols=""></textarea>

Botão para enviar o formulário <input type="submit" />

O exemplo abaixo cria um botão que envia os dados do formulário para a página definida no atributo action do formulário.

<input type="submit" name="enviar" value="Salvar" />

Botão para chamar ação em JavaScript <input type="button" />

O exemplo abaixo cria um botão que dispara uma ação em linguagem JavaScript.

<input type="button" name="chamar" value="Chamar" onclick="alert('uhuwww')" />

Vamos a um exemplo completo


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Exemplo de formulário</title>        
    </head>
    <body>

    <form name="formulario" id="formulario_cadastro" action="salvar.jsp" method="post">
        <label>Nome</label> <input type="text" name="nome" size="40" maxlength="150" /><br />
	<label>Endereço</label> <input type="text" name="endereco" size="40" maxlength="150" /><br />
	<label>CPF</label> <input type="text" name="cpf" size="20" maxlength="14" /><br />
	<label>Telefone</label> <input type="tel" name="telefone" size="20" maxlength="20" /><br />
	<label>E-mail</label> <input type="email" name="email" size="40" maxlength="150" /><br />
	Sexo 
	<input type="radio" id="sexoM" name="sexo" value="M" /> <label for="sexoM">Masculino</label>
	<input type="radio" id="sexoF" name="sexo" value="F" /> <label for="sexoF">Feminino</label>
	
	<label>Estado</label><select name="estado" id="estado">
		<option value="AC">Acre</option>
		<option value="AL">Alagoas</option>
		<option value="AM">Amazonas</option>
		<option value="AP">Amapá</option>
	</select>
	
	<input type="submit" name="enviar" value="Salvar" />
	
    </form>
</html>

Copie o código acima, salve-o em um novo arquivo HTML, abra-o no browser e veja o resultado.

Voltar ao Índice