DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico

Transcrição

1 DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico HTML5 - Marcação de formulário E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis qual seja a boa, agradável e perfeita vontade de Deus? Romanos 12:2

2 Contatos HTML5 - Marcação de formulário Carlos José carlosjose.unibratec@gmail.com

3 Objetivo Apresentar a linguagem de marcação HTML5 com seus conceitos básicos, bem como a construção de documentos.

4 Agenda Lista de tag s e atributos para marcação de formulário. Exercícios.

5 Introdução

6 Introdução As tags apresentadas aqui formam uma compilação das definições oficiais da linguagem disponível em: Fonte: Silva, Maurício Samy., HTML 5: A linguagem de marcação do futuro, São Paulo, Novatec Brasil, julho 2011; ROBBINS, Jennifer Niederst. Aprendendo Web Design guia para iniciantes, 3ª Edição;

7 Introdução O formulário faz parte do conteúdo do site conforme estudamos Funcional/Transacional. É considerado conteúdo funcional/transacional todo e qualquer formulário utilizado no website, por exemplo: Formulário de login. Funcionalidade: permitir que usuários cadastrados tenham acesso a conteúdos exclusivos. Transação: verificar se o nome de usuário e senha digitados conferem com os cadastrados no website.

8 Introdução Um formulário pode conter elementos de entrada: input text, checkboxes, radio buttons, password Field O formulário também pode conter: select, textarea, fieldset, legend, Label

9 Estrutura The image cannot be displayed. Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.

10 <form> Definição e forma de uso O elemento <form></form> delimita um formulário, ou seja, tudo que estiver dentro desse conjunto de tag s serão os campos do formulário. name: Este atributo especifica o nome do formulário. action: Este atributo especifica para onde enviar os dados preenchidos no formulário através do arquivo de script no caso o login.php que roda no lado do servidor.

11 <form> Definição e forma de uso method: Este atributo especifica como enviar os dados preenchidos no formulário, os métodos podem ser: get: as informações enviadas são visíveis por todos os usuários e são passadas através da URL. O máximo caractere que podem ser enviados são 100. post: as informações enviadas são invisíveis aos usuários e não tem limite de caracteres.

12 Campos especiais Definição e forma de uso O elemento <label> define um rótulo para um elemento <input>. Definição e forma de uso O elemento <fieldset> é utilizado para agrupar elementos relacionados em um formulário. Definição e forma de uso O elemento <fieldset> desenha uma caixa em torno dos elementos relacionados. Definição e forma de uso O elemento <legend> define uma legenda para a o elemento <fieldset>.

13 <input> Definição e forma de uso O elemento <input> é usada para receber as informações do usuário. Um campo de entrada de texto pode variar de muitas formas, dependendo do tipo de atributo: button, checkbox, color, date, datetime, datetime-local, , file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url e week.

14 <textarea> Definição e forma de uso O elemento <textarea> define uma entrada de texto multi-linha. A área de texto pode conter um número ilimitado de caracteres, e torna o texto em uma fonte de largura fixa (geralmente Courier). O tamanho do elemento <textarea> pode ser alterado através dos atributos cols e rows especificando número de colunas e linhas respectivamente ou através do CSS.

15 <select> <option> <optgroup> Definição e forma de uso O elemento <select> é usado para criar uma lista de seleção (dropdown list). Definição e forma de uso O elemento <option> define uma opção no elemento <select>. Definição e forma de uso O elemento <optgroup> serve para criar grupos de opções, dentro de uma lista <select>, formando listas hierárquicas. O texto exibido pelo <optgroup> é apenas um rótulo (gerado pelo atributo label) e não pode ser selecionado, ou seja, não é uma opção válida da lista, serve apenas como rótulo do agrupamento.

16 exe13.html

17 exe13.html

18 exe13.html

19 exe1.html

20 exe1.html

21 exe15.html

22 exe15.html

23 exe15.html

24 exe16.html

25 exe16.html

26 exe17.html

27 exe17.html

28 exe17.html

29 exe17.html

30 Dúvidas?