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

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

DWEB

Design para Web

HTML5 - Marcação de formulário

4

HTML5 - Marcação de formulário

4

Carlos José

Contatos

4

Apresentar a linguagem de

marcação HTML5 com seus

conceitos básicos, bem

como a construção de

documentos.

4

Lista de tag’s e atributos

para marcação de

formulário.

Exercícios.

4

4

As tags apresentadas aqui formam uma

compilação das definições oficiais da

linguagem disponível em:

§

http://www.w3schools.com

§

http://www.w3.org/TR/html5/

Introdução

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; http://www.htmldog.com/; http://www.w3schools.com

4

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.

4

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

Introdução

4

Estrutura

4

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.

4

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.

4

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>.

4

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, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url e week.

4

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).

<textarea>

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.

4

Definição e forma de uso

O elemento <select> é usado para criar uma lista de seleção (drop-down 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.

<select> <option> <optgroup>

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.

4

4

4

4

4

4

4

4

4

4

4

4

4

4

4