Your SlideShare is downloading. ×
Autoração web   aula 10 - prática 2 de xhtml - ticianne ribeiro
Autoração web   aula 10 - prática 2 de xhtml - ticianne ribeiro
Autoração web   aula 10 - prática 2 de xhtml - ticianne ribeiro
Autoração web   aula 10 - prática 2 de xhtml - ticianne ribeiro
Autoração web   aula 10 - prática 2 de xhtml - ticianne ribeiro
Autoração web   aula 10 - prática 2 de xhtml - ticianne ribeiro
Autoração web   aula 10 - prática 2 de xhtml - ticianne ribeiro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Autoração web aula 10 - prática 2 de xhtml - ticianne ribeiro

592

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
592
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Autoração Web Aula 10 Prática II de XHTML Profa. Ticianne Ribeiro
  • 2. Parte do material a seguir foi traduzido do W3Schools.Formulários HTML são utilizados para enviar dados para um servidor. Um formulário podeconter elementos de entrada de dados, tais quais campos de texto, checkboxes, radiobuttons, botões de submissão e mais. Um formulário pode ainda conter listas de seleção,áreas de texto, conjuntos de campos de texto, legendas e rótulos. A tag <form> é utilizadapara criar um formulário HTML.<form>.input elements.</form>Elementos de Entrada de Dados. O elemento mais importante em um formulário é oelemento de entrada de dados (<input>). O elemento input é utilizado para selecionarinformação do usuário. Um elemento input pode variar de muitas formas, dependendo dotipo de atributo que o acompanha, podendo ser: campo de texto, checkbox, password, radiobutton, submit button e mais. Os mais utilizados serão descritos a seguir.Campos de texto são elementos de entrada de dados com um atributo de tipo texto. Oelemento <input type=”text”/> define um campo de entrada de texto de uma linha, no qual ousuário pode digitar texto. <form> First name: <input type="text" id="firstname" /><br /> Last name: <input type="text" id="lastname" /> </form>O código acima seria visualizado no brow da seguinte forma: serNote que o elemento <form> em si não é visível. A largura padrão de um campo de texto éde 20 caracteres.
  • 3. Campos de senha são elementos de entrada de dados com um atributo de tipopassword. O elemento <input type=”password”/> define um campo de senha. <form> Password: <input type="password" id="pwd" /> </form>O código acima seria visualizado no brow da seguinte forma: serNote que os caracteres digitados em um campo de senha são mascarados por padrão(mostrados como asteriscos ou círculos).Radio Buttons são elementos de entrada de dados com um atributo de tipo radio. Oelemento <input type=”radio”/> define um radio button. Estes elementos são utilizados parapermitir que o usuário selecione apenas uma opção de um dado conjunto limitado deescolhas. <form> <input type="radio" id="sex-male" value="male" /> Male<br /> <input type="radio" id="sex-female" value="female" /> Female </form>O código acima seria visualizado no brow da seguinte forma: serCheckboxes são elementos de entrada de dados com um atributo de tipo checkbox. Oelemento <input type=”checkbox”/> define uma checkbox. Estes elementos são utilizadospara permitir que o usuário selecione uma ou mais opções de um dado conjunto limitadode escolhas. <form> <input type="checkbox" id="vehicle1" value="Bike"/> I have a bike<br/> <input type="checkbox" id="vehicle2" value="Car"/> I have a car </form>
  • 4. O código acima seria visualizado no brow da seguinte forma: serSubmit Button são elementos de entrada de dados com um atributo de tipo submit. Oelemento <input type=”submit”/> define um botão de submissão. Este elemento é utilizadopara enviar dados de um formulário para um servidor. Os dados são enviados para a páginaespecificada no atributo action do formulário. O arquivo definido no atributo action em geralexecuta alguma atividade com a entrada de dados recebida. <form id="input" action="html_form_action.asp" method="get"> Username: <input type="text" id="user" /> <input type="submit" value="Submit" /> </form>O código acima seria visualizado no brow da seguinte forma: serSe forem digitados caracteres no campo de texto do exemplo, ao clicar em “submit”, obrow enviará os caracteres digitados para uma página chamada “html_form_action.asp". serO código definido nesta página pode executar qualquer ação com relação à entrada dedados recebida. No caso, a página simplesmente exibirá a entrada recebida.Rótulos para elementos de entrada de dados. A tag <label> define um rótulo paraum elemento de entrada. O elemento label não é exibido como nada em especial para ousuário. No entanto, ele fornece uma melhoria de usabilidade para os usuários do mouse,pois se o usuário clicar sobre o texto dentro do elemento label, o elemento input associadoé selecionado.O atributo for da tag <label> deve ser igual ao atributo id do elemento a quese refere o rótulo, para relacionar os elementos. <form> <label for="male">Male</label> <input type="radio" value="male" id="male" /> <br /> <label for="female">Female</label> <input type="radio" value="female" id="female" /> </form>
  • 5. Agrupando conjuntos de campos de entrada de texto. A tag <fieldset> é utilizadapara agrupar logicamente elementos em um formulário. Esta tag desenha uma caixa emtorno dos elementos do formulário relacionado. A tag <legend> define uma legenda para oelemento fieldset. <form> <fieldset> <legend>Personalia:</legend> Name: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br /> Date of birth: <input type="text" size="10" /> </fieldset> </form>O código acima seria visualizado no brow da seguinte forma: ser
  • 6. Resumo dos elementos de formulário.Tag Description<form> Define um formulário HTML para entrada de dados do usuário.<input /> Define um elemento de entrada de dados.<textarea> Define a um elemento de entrada de texto de múltiplas linhas.<label> Define um rótulo para um elemento de entrada de texto.<fieldset> Define uma borda ao redor dos elementos de um formulário.<legend> Define uma legenda para o element fieldset.<select> Define uma lista de seleção drop-down.<optgroup> Define um grupo de opções relacionadas em uma lista de seleção.<option> Define uma opção em uma lista de seleção.<button> Define um botão.
  • 7. Atividade PráticaCrie uma página XHTML com um formulário de inscrição para candidatos a ingressar naMáfia.Requisitos da página:  A página deve ter um título utilizando uma tag de cabeçalho e pelo menos uma imagem.  Deve ainda informar, em uma lista, o que ele pode ganhar ao entrar na Máfia:1 par de óculos escuros, 1Kg de queijo mussarela e um par de sapatos de cimento.  O formulário de ingresso deverá solicitar do usuário as seguintes informações: nome, idade, nome desejado na máfia, sexo; se ele gosta ou não das seguintes comidas: alho, pizza, salame e pepperonni; Se ele sabe atirar; quais destes carros ele já dirigiu: Falcon GT, Charger, Fiat 500; uma opção de senha para reconhecimento;  Deve haver uma borda ao redor do formulário  Deve haver uma legenda nesta borda  Se um candidato clicar em um rótulo do formulário, o campo correspondente a este rótulo deverá ser selecionado.  Deve haver um botão de submissão do formulário.O término deste exercício em sala de aula contará como sua presença na aula de hoje(21/09).

×