09/05/2022

PADRÕES PARA CONTEÚDOS WEB

*** Links e Formulários ***

HTML e CSS

Professora: Cristiane Maciel Rizo

cris@unoeste.br

3º Módulo: até 16/05

 Trabalhando com links e formulários
 IDE é o Ambiente de Desenvolvimento Integrado
*** Komodo Edit***
https://www.activestate.com/products/komodo-ide/downloads/edit/#

Atividade Avaliativa: Envio de Arquivo - até 23/05

1
 09/05/2022

A tag <a> … </a> é utilizada para criar links ou para assinalar uma âncora.
Entre estas tags pode colocar-se texto, imagens, cabeçalhos e outras tags.
Atributos:
 href=“recurso" - especifica o recurso a que se pretende fazer a ligação:
arquivos, URLs, e-mail, etc.
 target: define a janela de abertura do link. Seus possíveis valores são:
_blank e _tab.

Exemplo:
<a href="http://www.unoeste.br”>UNOESTE</a>
<a href=“Pagina.html”><img src=“Figura.gif” alt=“imagem”/> </a>

Continuação <a> … </a>:

Uma âncora é um ponto de referência dentro do documento HTML.
O atributo name da tag <a> marca qual é ponto de referência:
<a name=“nome”> Texto </a>
O nome da âncora é escolhido por você.

Depois basta fazer um link para o ponto de referência:

<a href=“#nome”> Clique Aqui</a>
O caractere # (+ nome da âncora) indica que o link é uma âncora.

2
 09/05/2022

Permitem a associação de áreas de uma figura com links para diferentes URLs.
<map>...</map> Tag para Mapas
name=“nome que identifica o mapa”
<area> Define uma região da imagem
Exemplo:
shape = formato da área
rect - retângulo COORDS xi,yi ,xf,yf
circle - círculo COORDS x, y e raio
poly - polígono COORDS x1,y1,x2,y2,x3,y3,...
href =URL associada
target = “_blank” – Abre em uma nova página
alt = “Mensagem na imagem” – Hint
<img> imagem
usemap = # associa a imagem ao mapa

<area shape="poly” coords="50,250,100,100,150,250"

0x0 href="http://www.unoeste.br/fipp">
y

100

200

250

300 300 x 300

50 100 150 x

3
 09/05/2022

O Consórcio W3C criou algumas classes pré-definidas (pseudoclasses) que permite

selecionar: um link, um link visitado, link não visitado, link ativo ou no estado hover
(quando você passa o mouse sobre ele)
Estas pseudoclasses se aplicam ao seletor a:
 a:link – link não visitado; Diferentes estilos de links em uma
 a:visited – link visitado; mesma página web
 a:hover – mouse posicionado sobre o link; a.classe:hover {color: #FF0000; }
 a:active – o link foi clicado.
Exemplo:
a:link {text-decoration:none}
a:visited {text-decoration:none}
a:hover {text-decoration:underline;color:#FF0000;}
a:active {text-decoration:none}

Formulários
Formulários são usados como forma de se obter informações dos
usuários de páginas web.

São mecanismos muito comuns e amplamente usados na coleta de

informações.

Um formulário é composto por vários

elementos de diferentes tipos que
permitem a entrada de dados.

4
 09/05/2022

Formulários
Para definirmos um formulário usamos a tag <form>.
A tag <form> apresenta três atributos:
name: nome do formulário
action: endereço web para onde serão enviados os dados do
formulário
method: o método HTTP (post ou get) que será usado no envio dos
dados

<form name=“Fcadastro” action=“pagina.jsp” method=“post”>

<!-- Elementos do Formulário -->
</form>

Formulários
Entrada de Dados

Podemos usar para a entrada de dados caixas de texto, botões, caixas

de seleção e até mesmo campos ocultos.

Para fazermos a entrada de dados em um formulário podemos usar as

tags:

 input

 select

 textarea

10

5
 09/05/2022

Formulários
Entrada de Dados - INPUT

• A tag <input> é a mais utilizada dentro de formulários. O tipo de entrada que a tag
representa depende do seu atributo type:

 text: dados do tipo caractere

 password: igual ao text, mas o texto digitado não é mostrado em tela

 checkbox: caixas de seleção, aceitam a seleção de várias opções

 radio: botão de opção, aceita apenas a seleção de uma opção

 hidden: cria um campo invisível

 button: botão simples que pode ser vinculado a eventos

 reset: botão que, após ser acionado, volta o formulário ao seu estado inicial

 submit: botão que, ao ser acionado, envia os dados do formulário para o endereço

11 definido no action do <form>

Formulários
Entrada de Dados - INPUT

Tipo TEXT

<input type=“text” name=“txtNome” size=“40”

maxlength=“30” value=“Digite seu nome” />

value: indica o valor atual do campo

name: indica o nome do campo para posterior processamento quando os valores
forem enviados
size: tamanho do campo a ser exibido no navegador
maxlength: quantidade máxima de caracteres que pode ser digitado no campo

12

6
 09/05/2022

Formulários
Entrada de Dados - Rótulos

O <label>elemento define um rótulo para vários elementos do formulário.

É muito útil para usuários de leitores de tela, porque o leitor de tela lerá em
voz alta o rótulo quando o usuário focar no elemento de entrada.

<label for="fname">Nome:</label>
<input type="text" id="fname" name="fname">

13

Formulários Formulários
Entrada de Dados - INPUT Entrada de Dados - INPUT
Tipo PASSWORD

<input type=“password” name=“txtSenha” size=“20” maxlength=“15”/>

Similar ao TEXT e possui os mesmos atributos

O diferencial é que qualquer caractere digitado nele será exibido como um asterisco (*)

Tipo HIDDEN

<input type=“hidden” name=“hCodigo” value=“1” />

Permite o armazenamento e envio de dados sem que eles fiquem visíveis no navegador do
usuário (ocultos)

14

7
 09/05/2022

Formulários
Entrada de Dados - INPUT
Tipo CHECKBOX
<input type=“checkbox” name=“iCampo” value=“10” checked=“checked”/> Opção 10

Este campo pode assumir dois estados: selecionado ou não

Quando deseja-se que o campo seja inicializado como selecionado devemos usar
o atributo checked na tag
O atributo value representa o valor associado à opção para futuro processamento

<form name="form1">
<input type=checkbox name="opcao1" value="1“ checked=“checked”/>Opção 1<br/>
<input type=checkbox name="opcao2" value="2“/>Opção 2<br/>
<input type=checkbox name="opcao3" value="3“ checked=“checked”/>Opção 3<br/>
<input type=checkbox name="opcao4" value="4“/>Opção 4
</form>

15

Formulários
Entrada de Dados - INPUT
Tipo RADIO

<input type=“radio” name=“iRadio” value=“1” checked=“checked”/> Opção 1

Similar ao checkbox, no entanto permite selecionar apenas uma opção de cada vez
Podemos adicionar vários campos do tipo radio, porém todos que pertençam ao mesmo
grupo deverão ter o atributo name iguais

<form name="form1">
<input type=”radio” name="opcao1" value="1“/>Opção 1<br/>
<input type=”radio” name="opcao1" value="2“/>Opção 2<br >
<input type=“radio” name="opcao1" value="3" checked=“checked”/>Opção 3<br/>
<input type=“radio” name="opcao1" value="4“/>Opção 4
</form>

16

8
 09/05/2022

Formulários
Entrada de Dados - SELECT

Caixa de Seleção
<select name=“selOpcao” >
<option value=“1” selected=“selected”> Opção1 </option>
<option value=“2”> Opção2 </option>
<option value=“3”> Opção3 </option>
</select>

Cada opção da lista é definida através de uma tag <option>

Quando desejamos que uma opção já esteja selecionada, usamos o atributo selected da
tag <option>
A propriedade size altera a apresentação do objeto na tela, e pode ser usada e conjunto
com a propriedade multiple para permitir a seleção de vários elementos

17

Formulários
Entrada de Dados - INPUT

Tipo BUTTON, SUBMIT e RESET

<input type=“button” name=“b1” value= “OK?”/>
<input type=“reset” name=“b2” value= “OK”/>
<input type=“submit” name=“b3” value= “OK!”/>

Exibe um botão no navegador

O atributo value indica o texto a ser exibido no botão
Os tipos reset e submit possuem as mesmas propriedades que o button, no entanto,
quando clicados, apresentam um comportamento diferente

submit: envia todo o conteúdo do formulário para o endereço definido no atributo action do <form>
reset: retorna os valores dos campos do formulário aos seus valores iniciais
button: pode ser vinculado a eventos de página (JavaScript)

18

9
 09/05/2022

Formulários
Entrada de Dados - TEXTAREA

<textarea rows="5" cols="20">

Testando um campo texto...
</textarea>

A tag <textarea> insere no formulário uma caixa de texto de múltiplas linhas,

denominada área de texto
O número de linhas é especificado pelo atributo rows e o número de colunas (caracteres
por linha) pelo atributo cols.
Para inicializar o conteúdo do textarea, colocamos o texto entre a tag de abertura e a de
fechamento

19

http://www.w3schools.com/tags/att_input_type.asp

search: Define um input para busca. O atributo value tem efeito placeholder.

<input type="search" id="pesq1" value="o que vai pesquisar?"/>

<br/>

<input type="search" id="pesq2"/>

20

10
 09/05/2022

tel: Define um input para telefone, e seu formato é independente de região. O atributo
pattern permite ao programador definir uma expressão para validação do telefone.

<input type="tel" id="telefone"

pattern="\(\d{2}\)\s\d{5}-\d{4}" title = “(99) 99999-9999” />
pattern: valida o valor do input text usando uma expressão regular:
<input type="text" pattern="\d{5}-?\d{3}" title="99999-999" />

Como utilizar/montar as expressões regulares.

http://www.devmedia.com.br/validando-formularios-usando-regular-expression/12042
http://www.regexr.com/

21

url: Define um input a entrada de URL absoluta.

<input type="url" id="urlSite"/>
email: Define um input entrada de e-mail.
<input type="email" id="email"/>

date, time, datetime e datetime-local: Define um input

customizado para entrada de data, hora, e data e hora.

<input type="date" id="data"/>

<input type="time" id="hora"/>
<input type="datetime" id="datahora"/>

22

11
 09/05/2022

month e week: Definem um input customizado para seleção de um mês e uma

semana respectivamente.
<input type="month" id="mes"/>
<input type="week" id="semana"/>

number: Define um input para entrada de número.

<input type="number" id="numero"/>

23

range: Define um input para entrada de número contido num intervalo. Os

atributos min e max determina o valor mínimo e máximo do intervalo, já o atributo
step indica de quanto será o incremento.

<input type="range" id="numero" min="5" max="20" step="1"/>

color: Define um input para receber um valor RGB.

<input type="color" id="cor"/>

24

12
 09/05/2022

placeholder: define um texto estilo marca-da-água em elementos inputs e textarea.

<input type="text" placeholder="Digite aqui seu nome"/>

autofocus: define qual elemento do formulário receberá o foco logo que a página
for carregada.
<input type="text" id="nome" autofocus="true"/>

required: define um elemento input, select ou textarea como requerido.

<input type="text" id="nome" required="required" />

25

list: define uma lista de sugestões para inputs (combinado com a tag <datalist>).

<input id="lanche" type="text" list="dlLanches" />

<datalist id="dlLanches">
<option value="X-Frango"></option>
<option value="X-Salada"></option>
<option value="X-Egg"></option>
<option value="BigMac Pirata"></option>
</datalist>

26

13
 09/05/2022

Apoio Bibliográfico

Fábio Flatschart HTML 5 Embarque Imediato. Porto Alegre: Kuarup. [Disponível na

BV Pearson]

Lemay, Laura; Colburn, Rafe; Tyler, Denise Aprenda a Criar Páginas Web com
HTML e XHTML em 21 Dias. Rio de Janeiro: Record. [Disponível na BV Pearson]

Deitel, Paul J.; Deitel, Harvey M. Ajax Rich Internet Applications e

Desenvolvimento Web para Programadores. São Paulo: Atlas. [Disponível na BV
Pearson]

Site - W3schools - http://www.w3schools.com

27

28

14