Unidade IX

Programa¸c˜

ao para Web I

Unidade IX

Formul´

arios

Sistemas para Internet Faculdades Integradas Vianna J´unior

Sum´

ario

1 Relembrando

2 Formul´arios

3 Campos de Formul´arios

TAG <INPUT>

Atributo TYPE

4 Tabelas e Formul´arios

5 Exemplos

Relembrando

Relembrando

Tags: <TABLE>...</TABLE>

_<TR>...</TR>

<TH>...</TH>

_<TD>...</TD>

I

Atributos: ALIGN, BGCOLOR, WIDTH, HEIGTH;

F

Atributos de colunas: COLSPAN, ROWSPAN;

I

Outras Tags:

<COLGROUP>...</COLGROUP>

<COL />

<THEAD>...</THEAD>

<TBODY>...</TBODY>

<TFOOT>...</TFOOT>

Formul´

arios

Usados na intera¸c˜ao com o usu´ario; Usados na comunica¸c˜ao com o servidor; Envio de requisi¸c˜oes pela Web;

Troca de informa¸c˜oes entre requisitores e requisitados; Front-End para linguagens de desenvolvimento;

TAG

<FORM>...</FORM>

Todos os campos s˜ao delimitados entre essas tags; Atributos:

I

ACTION: especifica a URL ou e-Mail que ser˜

ao enviados a partir dos

campos do formul´

ario;

I

METHOD: m´

etodo de requisi¸

c˜

ao da URL;

F

GET: os dados fazem parte da URL, suportando at´

e 128 caracteres;

F

POST: os dados fazem parte do corpo da mensagem. Geralmente

usado para grandes volumes de informa¸

c˜

oes;

I

NAME: indica um nome para o formul´

ario;

I

TARGET: similar ao atributo para links;

Campos de Formul´

arios

Todos os campos (TAGS) devem se encontrar entre as marca¸c˜oes <FORM> e </FORM>;

Para gerar os campos, geralmente s˜ao usados as marca¸c˜oes: <INPUT>, <SELECT> e <TEXTAREA>;

Algumas outras Tags foram criadas para o HTML5, como: <KEYGEN>, <OUTPUT>, <DATALIST>;

TAG <INPUT>

A Tag <INPUT> ´e a respons´avel por designar campos para entrada de informa¸c˜oes no formul´ario.

Atributos Comuns

ID: campo importante no uso de valida¸c˜oes e processamento usando JScript; NAME: nome do campo para o envio de requisi¸c˜oes;

AUTOFOCUS: coloca o foco (marcador do mouse) no campo ao carregar o formul´ario; PLACEHOLDER: descri¸c˜ao momentˆanea do campo. Normalmente da uma ideia de seu conte´udo;

READONLY: coloca o campo como somente leitura; VALUE: coloca um valor inicial no campo;

SIZE: tamanho do campo a ser exibido no formul´ario;

PATTERN: faz m´ascaras no campo utilizando express˜oes regulares.

MAXLENGTH: respons´avel pela quantidade m´axima de caracteres em um campo; REQUIRED: informa ao formul´ario que ´e um campo obrigat´orio;

TYPE: (PRINCIPAL) campo respons´avel por definir qual ser´a o formato da entrada de informa¸c˜ao;

Atributo TYPE

O atributo TYPE ´e utilizado dentro da marca¸c˜ao <INPUT> dando forma a ela:

I

<INPUT TYPE=”X”>, onde X ´

e substitu´ıdo por alguma das op¸

c˜

oes a

seguir:

text

campos de entrada de texto;

password

campos de cria¸c˜ao de senhas;

hidden

Atributo TYPE

search

campos para busca;

tel

campos para telefones;

url

Atributo TYPE

email

campos para e-mail;

datetime

campos para datas e horas;

date

Atributo TYPE

month

campos para meses;

week

campos para semanas;

time

Atributo TYPE

datetime-local

campos para datas e tempos locais;

OBS: Estas entradas que est˜ao relacionadas a tempo, pode ter o uso conjunto do atributo STEP, o qual fornece progress˜oes (varia em segundos). Por exemplo, um tempo avan¸cando de 15 em 15 minutos:

Atributo TYPE

number

campos para n´umeros;

range

campos para barras ou r´eguas numeradas;

Campos num´ericos como ”number”e ”range”tem atributos como: STEP: progress˜ao de item para item;

MIN: valor m´ınimo; MAX: valor m´aximo;

Atributo TYPE

color

campos para cores;

checkbox

Atributo TYPE

radio

campos para sele¸c˜ao ´unica;

OBS: Os campos de sele¸c˜ao devem ter os atributos VALUE e CHECKED;

file

campos para importa¸c˜ao/envio de arquivos;

image

Atributo TYPE

submit

bot˜ao para envio do formul´ario;

OBS: Os campos de sele¸c˜ao devem ter os atributos VALUE e CHECKED;

reset

Bot˜ao para limpar o formul´ario;

button

TAG <TEXTAREA>

Usada para um grande volume de texto. Atributos:

I

ROWS: quantidade de linhas do campo;

I

COLS: quantidade de colunas do campo;

I

WRAP: quebra de linhas (soft ou hard);

I

REQUIRED: campo obrigat´

orio;

I

NAME: nome do campo para envio;

TAG <BUTTON>

Cria¸c˜ao de bot˜oes. Atributos:

I

NAME: nome do campo para envio;

TAG <SELECT>

Usada para a cria¸c˜ao de ComboBox;

<OPTGROUP>...</OPTGROUP>: Usada para agrupamento de op¸c˜oes. Para nome usa-se o atributo LABEL;

<OPTION>...</OPTION>: Itens de op¸c˜oes. Deve-se usar o atributo VALUE para valorar;

TAG <DATALIST>

Usada para a cria¸c˜ao de campo de sele¸c˜ao no formato textual

<OPTION>...</OPTION>: Itens de op¸c˜oes. Deve-se usar o atributo VALUE para valorar;

TAG <LABEL>

TAG <FIELDSET>

Agrupamento de campos do formul´ario;

TAG <KEYGEN>

TAG <OUTPUT>

Usada para exibir sa´ıdas de informa¸c˜oes Atributos:

I

NAME: nome da marca¸c˜

ao;

Conclus˜

ao

Formul´arios para intera¸c˜ao usu´ario; Diversos comandos para intera¸c˜ao;

Podem usar tags como <FIELDSET> para organiza¸c˜ao; Podem usar TABELAS para organiza¸c˜ao;

D´uvidas?

Fale agora ou silencie-se eternamente...

D´uvidas?

Fale agora ou silencie-se eternamente... Podemos prosseguir?

Programa¸c˜

ao para Web I

Unidade IX Formul´arios

Sistemas para Internet Faculdades Integradas Vianna J´unior

Prof. Tadeu Classe 2013-1