INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT

Transcrição

1 v1.1 06/04/2017

2 INTRODUÇÃO AO DESENVOLVIMENTO FRONT-END COM HTML, CSS E JAVASCRIPT AULA 3 TRABALHANDO COM FORMULÁRIOS Eder FPF Tech

3 Agenda 1. Introdução 2. A tag form e seu atributos 3. As tags fieldset e legend 4. Tipos de campos 5. Elementos especiais e botões 6. Criando um formulário 7. Referências

4 Introdução Formulários Formulários são seções de uma página web com controles interativos que permitem ao usuário submeter informações a determinado servidor web.

5 A tag form e seus atributos A tag form: Destina-se a ser o container geral de um formulário. Principais atributos: action aponta para uma URL que contém um script que receberá os dados do formulário (uma página PHP, por exemplo). method define o método HTTP de envio do formulário (get ou post).

6 As tags fieldset e legend A tags filedset e legend: A tag fieldset serve como container para o agrupamento de campos (por assunto, por exemplo). A tag legend serve para criar uma descrição para o agrupamento contido no fieldset.

7 A tags filedset e legend: As tags fieldset e legend

8 Tipos de campos A tag label: A tag label serve como um rótulo para os campos de controle:

9 Tipos de campos A tag input: A maioria dos campos de um formulário poderá ser representada pela tag input. Destina-se a coletar dados textuais, marcar preferências (caixas de seleção), enviar dados, coletar data, hora, , etc. O comportamento da tag input (bem como a exibição do seu conteúdo) mudará de acordo com o atributo type.

10 Tipos de campos A tag input: Os valores do atributo type: text Define um campo para coleta de textos. É o campo padrão. hidden Define um campo de texto que não é renderizado. search Define um campo para busca. tel Define um campo para coleta de telefones.

11 Tipos de campos A tag input: Os valores do atributo type: url Define um campo para coleta de URLs. Define um campo para coleta de s. color Define um campo para coleta de cores. checkbox Define um campo para seleções múltiplas.

12 Tipos de campos A tag input: Os valores do atributo type: number Define um campo para coleta de números. range Define um campo para coleta de números em um intervalo. date Define um para coleta de datas. password Define um campo para coleta de senhas.

13 Tipos de campos A tag input: Os valores do atributo type: radio Define um campo para seleção única. file Define um campo para seleção de arquivos; A tag form precisará do atributo enctype com o valor multipart/form-data. image Transforma uma imagem em um botão. reset Botão para limpar campos de formulário. button Cria um botão.

14 Tipos de campos A tag input: Outros atributos importantes: name serve como referência para recebimento dos dados no script de destino. maxlength Define o número máximo de caracteres. minlength Define o número mínimo de caracteres. value Define um valor incial padrão para o campo.

15 Tipos de campos A tag input: Outros atributos importantes: readonly Torna o campo somente leitura, não preenchível. disabled Desabilita totalmente o campo. autofocus Define o foco no campo quando a página carrega. required Define um campo obrigatório.

16 Tipos de campos A tag input: Outros atributos importantes: pattern Permite definir uma expressão regular para validar o campo. min e max Define valores máximos e mínimo para inputs do tipo range, number, date e time. step Define o incremento de um campo numérico. placeholder Cria um valor inicial temporário na forma de uma dica.

17 Elementos especiais e botões A tag button: Cria um botão no formulário. Possui dois tipos (atributo type): button um botão simples, de uso geral. submit um botão que envia o formulário ao ser clicado.

18 Elementos especiais e botões A tags select e option: Destinam-se a criar uma caixa (dropdown) contendo opções para seleção.

19 Elementos especiais e botões A tags select e option: É possível adicionar um valor específico para cada opção utilizando o atributo value:

20 Elementos especiais e botões A tags select e option: Também é possível transformar o select em um campo de seleção de múltipla escolha (atributo multiple):

21 Elementos especiais e botões A tag optgroup: Permite agrupar as opções de acordo com um label:

22 Elementos especiais e botões A tag textarea: É um campo de controle de texto com múltiplas linhas.

23 Elementos especiais e botões A tag textarea: É possível definir a largura e a quantidade de linhas visíveis utilizando os atributos cols e rows.

24 Criando um formulário Mãos à obra! 20 minutos: Crie um formulário para entrevistar um candidato a uma vaga de emprego, contendo: Nome, , RG, CPF, telefone, data de nascimento, nome do pai, nome da mãe; Formação, Experiências profissionais; Vaga pleiteada, objetivos, um campo para falar um pouco sobre ele mesmo.

25 Referências 1. SILVA, Maurício Sammy. Fundamentos de HTML5 e CSS3. Capítulos 9. 1ª ed. São Paulo: Novatec, p. 205 a 2014.

26 Para saber mais 1. NERDCAST. NerdTech 13 Os Navegadores de Internet. Áudio, 54 minutos. Disponível em < Acesso em 06/04/2017.

27 Eder Martins Franco facebook.com/edermartinsfranco linkedin.com/in/efranco23/ moodle.franco.eti.br