Html - Parte 3 - Final

Transcript

Desenvolvimento Web 3 – HTML – Tabelas, frames e formulário Vinicius A. de Souza [email protected] São José dos Campos, 2011. 1 Desenvolvimento Web Sumário Tabelas..................................................................................................................................................3 Principais atributos das tabelas........................................................................................................4 Principais atributos de uma célula. .................................................................................................7 Frames................................................................................................................................................10 Principais atributos do marcador ........................................................................11 Principais atributos do marcador ................................................................................12 Frames Aninhados .........................................................................................................................14 Atividade 1: Controlando a área de destino das páginas exibidas em um FRAMESET ...................15 Iframes................................................................................................................................................17 Formulários.........................................................................................................................................18 Principais atributos do marcador

..................................................................................18 Controles de formulário.................................................................................................................19 Exercicios...........................................................................................................................................27 São José dos Campos, 2011. 2 Desenvolvimento Web Tabelas As tabelas são muito importantes para o designer de uma home-page. Com elas pode-se fazer alinhamentos que dificilmente seriam possíveis com simples comandos. A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor posicionados na home-page. A tag para se inserir uma tabela é . Para iniciar uma linha devemos introduzir a tag e para uma célula (ou coluna) usamos a tag

. Todos estes comandos são encerrados como

, e respectivamente. Exemplo: Vamos construir uma tabelas 2X3 simples, ou seja de 3 colunas por 2 linhas:            Primeira coluna   Segunda coluna  Terceira coluna  Primeira coluna   Segunda coluna  Terceira coluna     São José dos Campos, 2011. 3 Desenvolvimento Web Principais atributos das tabelas a) Borda   Especifica a espessura da borda da tabela. Se você quiser deixar a tabela sem bordas, não é necessário informar este atributo. b) Largura e altura   Estes atributos indicam o tamanho da tabela. Podemos configurar valores absolutos ou relativos, sendo que os valores relativos vão ocupar uma determinada porcentagem da página exibida. Veja o exemplo abaixo:            Primeira coluna   Segunda coluna  Terceira coluna  Primeira coluna   Segunda coluna  Terceira coluna     Atividade: Teste outros valores para os atributos BORDER, WIDTH e HEIGHT. São José dos Campos, 2011. 4 Desenvolvimento Web c) Alinhamento Assim como já estamos acostumados, o atributo ALIGN especifica a posição da tabela, que pode ser LEFT, RIGHT ou CENTER. d) Cores da borda e da tabela   As cores da borda e da tabela como um todo podem ser especificas, respectivamente, pelos atributos BORDERCOLOR e BGCOLOR. Como também já estamos acostumados, os atributos de cores podem ser informados utilizando o nome da cor em inglês ou o código hexadecimal da cor desejada. Veja o exemplo abaixo:            Primeira coluna   Segunda coluna  Terceira coluna  Primeira coluna   Segunda coluna  Terceira coluna     Atividade: Teste outros valores para os atributos ALIGN, BORDERCOLOR e BGCOLOR. São José dos Campos, 2011. 5 Desenvolvimento Web e) Deslocamentos É possível configurarmos o espaçamento do conteúdo da célula em relação às bordas e também o espaçamento entre as próprias células. Para isto, usamos os atributos: CELLPADDING   Especifica o deslocamento do conteúdo da célula em relação às bordas de cada uma. Exemplo: CELLSPACING   Especifica o espaçamento entre as células da tabela. Exemplo: Veja o exemplo abaixo:                Primeira coluna    Segunda coluna   Terceira coluna         Primeira coluna    Segunda coluna   Terceira coluna          São José dos Campos, 2011. 6 Desenvolvimento Web f) Imagem de fundo   Especifica a imagem de fundo da tabela. Principais atributos de uma célula. Com exceção dos atributos BORDER, CELLPACING e CELLPADDING que são exclusivos da tabela, cada célula possui os mesmos atributos da tabela como: BGCOLOR, BACKGROUND, WIDTH, HEIGHT, e outros. Além disso, cada célula pode ter seu conteúdo alinhado horizontalmente e verticalmente. Exemplos:         Veja o exemplo abaixo:                Primeira coluna    Segunda coluna   Terceira coluna         Primeira coluna   Segunda coluna   Terceira coluna          São José dos Campos, 2011. 7 Desenvolvimento Web Alinhamento Podemos configurar tanto o alinhamento vertical quanto horizontal do texto dentro da célula. Para isto, usamos, respectivamente, os atributos ALIGN e VALIGN:     Para o alinhamento horizontal, os valores podem ser LEFT, RIGHT ou CENTER. Para o alinhamento na vertical: Valores podem ser TOP (topo da célula), MIDDLE (região mediana da célula), BASELINE, (alinha a linha de base do texto da célula com o texto da linha) ou BOTTOM (alinha o conteúdo da célula com a região inferior da célula). Exemplo:               Primeira coluna    Segunda  coluna   Terceira coluna          Mesclagem de células Uma utilização bastante interessanta para as tabelas é na criação do layout da página. Neste caso, é possível que algumas células de uma tabela precisam ser unidas, ou quebradas ao meio. Para isso utiliza-se o atributo SPAN. Para unir linhas se usa ROWSPAN e para unir colunas utiliza-se COLSPAN.   São José dos Campos, 2011. 8 Desenvolvimento Web Exemplo 1: Criaremos uma tabela com o seguinte formato: Primeira coluna Primeira coluna Segunda coluna Terceira coluna               Primeira coluna          Primeira coluna    Segunda coluna   Terceira coluna          São José dos Campos, 2011. 9 Desenvolvimento Web Exemplo 2: Vamos criar uma tabela com o seguinte formato:                 Exemplo do uso do  ROWSPAN         Teste      Teste          Frames Os Frames são divisões da tela do browser. Com isso, torna-se possível apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos relacionados ao índice em outra parte. É muito fácil colocar Frames em páginas; porém, nem todos os usuários gostam deles, pois nem sempre a navegação é fácil, além de problemas para a impressão e a marcação dos documentos interiores aos Frames nos Bookmarks. A alternativa natural para os Frames são as tabelas. São José dos Campos, 2011. 10 Desenvolvimento Web A utilização de Frames na linguagem HTML é feita através dos marcadores . A página onde o FRAMESET é codificado não leva o marcador e tem a finalidade de definir o layout a ser apresentado pelos Frames. Em um FRAMESET os atributos ROWS e COLS definem, respectivamente, o número de subespaços horizontais e verticais que podem ser utilizados para criar efeitos de grade. Se o atributo ROWS não é utilizado, cada coluna ocupará todo o comprimento da página ao passo que se o atributo COLS não for utilizado, cada linha estende-se ocupando a largura total da página. Frames são criados da esquerda para direita, em se tratando de colunas, e de cima para baixo em se tratando de linhas. Quando os dois atributos são especificados, repartições são criadas da esquerda para direita na primeira linha, e da esquerda para direita na segunda linha. Exemplo: Vamos cria uma página com duas divisões igualitárias:                   Principais atributos do marcador a) ROWS   Especifica a disposição dos frames horizontais. Os valores são separados por vírgulas e podem ser dados em pixels ou porcentagem (%). O valor padrão é 100%, representando uma linha. b) COLS   Especifica a disposição dos frames verticais. Os valores são separados por vírgulas e podem ser dados em pixels ou porcentagem (%). O valor padrão é 100%, representando uma coluna. São José dos Campos, 2011. 11 Desenvolvimento Web c) FRAMESPACING   Especifica o espaçamento entre frames. O valor é dado em pixels e depende do browser utilizado. O valor 0 possibilita que não haja espaços entre os frames. Principais atributos do marcador a) SRC   Especifica a página a ser exibida pelo frame. b) NAME   Especifica o nome do frame. Este atributo tem grande importância pelo fato de toda navegação entre Frames ser baseada no nome de cada Frame. Exemplo:   c) ID Este atributo tem a mesma função do NAME. Geralmente mais usado para formatações via CSS. Exemplo:   d) NORESIZE   Quando utilizado, este atributo não permite que na janela do navegador a área do Frame seja redimensionada. Exemplo:   São José dos Campos, 2011. 12 Desenvolvimento Web e) SCROLLING   Determina a presença ou ausência de barras de rolagem junto àquela área do FRAMESET. Os valores podem ser: AUTO, YES, NO. Veja o significado de cada um. • • • AUTO: Oferece barras de rolagem caso sejam necessárias. Valor padrão. YES: Sempre oferece barras de rolagem para este frame mesmo que ele não precise. NO: Não oferece barras de rolagem para o frame mesmo que ele precise. Exemplo:   f) FRAMEBORDER   Desenha um separador entre o frame e cada frame junto. Os valores 0 ou NO não desenham nenhum separador entre estes frame. 1 ou YES desenha um separador. Exemplo:   g) MARGINWIDTH   Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens esquerda e direita. O valor precisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado. Exemplo:   h) MARGINHEIGHT   Especifica a quantidade de espaço a ser deixado entre o conteúdo do frame e suas margens superior e inferior. O valor precisa ser maior ou igual a 1 pixel e o padrão depende do browser utilizado. Exemplo:   São José dos Campos, 2011. 13 Desenvolvimento Web i) NOFRAMES    Existe alguns browsers que não reconhecem o marcador então, para estes casos, é necessário colocar o marcador . O marcador <NOFRAMES> determina qual conteúdo será exibido em caso de browsers que não suportem FRAMESETS ou que não estejam configurados para exibi-los. É utilizado dentro das delimitações do <FRAMESET> Exemplo: <HTML>  <HEAD>  <TITLE> Desenvolvimento  Web</TITLE>  </HEAD>  <FRAMESET ROWS="30%,40%,30%">  <FRAME SRC="pagina1.html">  <FRAME SRC="pagina2.html">  <FRAME SRC="pagina3.html">  <NOFRAMES>  <P> <a href="noframes.html">Clique aqui</a> para ver uma  versão do documento  que não utiliza Frames.</P>        Obs: Se seu browser reconhece o marcador você não conseguira ver o marcador entrando em ação! Pois para ver precisaria usar um browser que não reconheça o marcador. Frames Aninhados FRAMESETS podem encontrar-se aninhados em qualquer nível. O exemplo a seguir faz um FRAMESET que divide o espaço disponível em três colunas iguais. No espaço reservado à Segunda coluna a área é dividida em duas linhas de alturas diferentes. São José dos Campos, 2011. 14 Desenvolvimento Web Exemplo: <HTML>  <HEAD>  <TITLE> Desenvolvimento  Web</TITLE>  </HEAD>  <FRAMESET COLS="33%,33%,34%">  <FRAME SRC="pagina1.html">    <FRAMESET ROWS="20%,70%">  <FRAME SRC="pagina2.html">  <FRAME SRC="pagina3.html">  </FRAMESET>  <FRAME SRC="pagina4.html">  </FRAMESET>  </HTML>  Atividade 1: Controlando a área de destino das páginas exibidas em um FRAMESET Quando o usuário pressiona um link qualquer em um Frame, o link vai atualizar o seu próprio Frame com o documento contido em sua URL. Para que seja possível a atualização de outros Frames, foi introduzido o atributo TARGET no marcador <A>. Vamos criar um layout de página utilizando frames da seguinte forma: Espaço para o menu Espaço para conteúdo da página A ideia é fazer com que o menu permaneça fixo, ou seja, quando o internauta clicar em algum link do menu, o conteúdo desta página correspondente será exibido ao lado. São José dos Campos, 2011. 15 Desenvolvimento Web a) Criação da home-page Vamos criar a página principal do site. Salve-a com o nome home.html: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY>  <CENTER> <FONT color="blue">  <H1>Bem Vindo ao nosso Website!</H1> </FONT> <P>Esta página foi criada por Vinicius A. de  Souza.<BR></BR>      <I>Última atualização: 30/04/2001</I></P>  </CENTER>  </BODY>  </HTML>  b) Criação do menu Criaremos agora a página que conterá os links para as outras páginas do nosso site. Salve esta página com o nome menu.html: <HTML>  <HEAD>  <title>Desenvolvimento Web</TITLE>  </HEAD> <BODY>  <TABLE border="1" align="center">  <TR bgcolor="green">  <TD align="center"><B>Menu principal</B></TD>  </TR>  <TR>  <TD><A href="http://www.google.com"  TARGET="principal" > Google</A></TD>  </TR>  <TR>  <TD><A href="http://www.gmail.com"  TARGET="principal" > GMail</A></TD>  </TR>  <TR>  <TD><A href="home.html"  TARGET="principal" >Home</A></TD>  </TR>  </TABLE>  </BODY>  </HTML> São José dos Campos, 2011. 16 Desenvolvimento Web c) Criação da página com o frame Criaremos agora uma página com dois frames. Salve esta página com o nome index.html: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <FRAMESET COLS="20%,80%">  <FRAME SRC="menu.html">  <FRAME SRC="home.html" NAME="principal">  </FRAMESET>  </HTML>  Agora, abra a página index.html criada e verifique seu funcionamento. Iframes O iframe é um recurso que possibilita criar uma janela onde você quiser para colocar uma página HTML. Para isto, basta você colocar o seguinte código aonde deseja que a janela do Iframe apareça: <IFRAME name=”iframe0” src="pagina.html"  frameBorder=”0” width=”400”  height=”150” scrolling=”auto”></IFRAME>  onde: • • • • • NAME: é o nome da janela, ele será usado caso você queira criar links que abram dentro do iframe, é o valor do TARGET. SRC: é a página que será aberta dentro do iframe. FRAMEBORDER: borda do frame. WIDTH e HEIGHT: largura e altura do iframe, respectivamente. SCROLLING: barra de rolagem. São José dos Campos, 2011. 17 Desenvolvimento Web Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY>Página normal. Podemos escrever nosso texto normalmente.  Abaixo, criaremos um Iframe: <BR><BR> <IFRAME src="home.html"  frameBorder=”0” width=”400”  height=”150” scrolling=”auto”></IFRAME>  </BODY>  </HTML>  Formulários Formulários são mecanismos bastante úteis para possibilitar que os sites realizem cadastros, pesquisas, envio de comentários, etc., aumentando o poder de interação com os visitantes dos sites. Um formulário HTML é uma página Web que contém, além de texto, elementos especiais chamados controles, representados por caixas de checagem, botões, caixas de seleção, campos de textos, etc. Um formulário funciona assim: Os usuários preenchem os campos do formulário submetendo-o, em seguida, a algum agente de processamento. Neste momento, todas as informações fornecidas são enviadas a um programa escrito especialmente para processar esses dados de acordo com alguma necessidade e especificação. Em alguns casos os dados são gravados em um Banco de Dados, em outros casos uma nova página é construída, em outros ainda as informações são encaminhadas via e-mail. O marcador usado é o <FORM></FORM>. Principais atributos do marcador <FORM> Os principais atributos dos formulários são NAME, METHOD e ACTION. <FORM NAME=”nome do formulário” METHOD=”valor” ACTION=”tratador do formulário”>elementos do formulários</FORM> São José dos Campos, 2011. 18 Desenvolvimento Web • NAME: Especifica o nome do formulário. Útil em casos de validação dos campos, por exemplo, quando se utiliza uma linguagem de scripts como JavaScript. • METHOD: Método que define como os dados serão transmitidos para o programa que irá processa-los. Devem ter valores GET ou POST, sendo que a diferença entre estes dois valores está no modo como os dados são empacotados. Normalmente o programa queserá utilizado para processar o formulário já especifica o valor para o atributo METHOD. • ACTION: Indica o endereço do programa que receberá os dados do formulário. Por exemplo, poderemos utilizar a linguagem PHP para processar os dados. Exemplo: <FORM NAME=”dadospessoais” METHOD=”post” ACTION=”trata_form.php”> Controles de formulário Os campos de formulário são diferenciados pelo seu tipo. De maneira geral, nós podemos inserir um novo control através da tag: <INPUT   TYPE=”tipo”   NAME=”nome”   VALUE=”valor”   SIZE=”tamanho   em  pixels” MAXLENGHT=”tamanho maximo em pixels”> • • • • • • INPUT: Especifica um campo de entrada de dados. TYPE: Atributo mais importante do marcador por definir o tipo de elemento a serinserido no formulário. NAME: Nome do elemento, Útil em casos de validação de campos, por exemplo, quando se usa uma linguagem de scripts como JavaScript. VALUE: Valor que pode ser predefinido para o campo. MAXLENGHT: Comprimento máximo do campo. CHECKED: Em casos de caixas de checagem, predefine como checada. a) Caixa de texto O valor TEXT no atributo TYPE de um INPUT indica que o campo será de texto, ou seja, um campo onde o usuário poderá entrar com dados. O atributo VALUE, neste caso, pode ser usado para determinar um valor prévio para o campo, que será exibido quando a página for carregada. São José dos Campos, 2011. 19 Desenvolvimento Web <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formulario</H2> <FORM> <P>Entre com seu nome:<INPUT TYPE=”TEXT” NAME=”Nome”  VALUE=”Seu nome aqui”></P> </FORM>  </BODY>  </HTML>  O atributo SIZE configura o tamanho do campo e é baseado no número de caracteres. Este valor não limita o tamanho do campo, somente define o tamanho em que será mostrado na página. Quem define o número maximo de caracteres que podem ser digitados é o atributo MAXLENGHT, que é opcional. Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formulario</H2> <FORM> <P>Entre com seu nome:<INPUT TYPE=”TEXT” NAME=”Nome”   MAXLENGHT=5></P> </FORM>  </BODY>  </HTML>  b) Formulário com Senha <INPUT TYPE=”PASSWORD”> Para o valor PASSWORD (senha) no atributo TYPE aplicam-se todos os atributos do tipo TEXT exceto que todas as letras digitadas aparem com um asterisco. São José dos Campos, 2011. 20 Desenvolvimento Web Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formulario</H2> <FORM> <P>Username: <INPUT TYPE=”TEXT” NAME=”Nome”></P> <P>Senha: <INPUT TYPE=”PASSWORD” NAME=”Senha”></P> </FORM>  </BODY>  </HTML>  Atividade: Teste os atributos SIZE e MAXLENGHT para o password. c) Caixa de texto <TEXTAREA NAME=”nome” ROWS=”numero de linhas” COLS=”números de  colunas”></TEXTAREA> O marcador TEXTAREA permite definir um campo de texto com várias linhas. Temos os atributos abaixo: • • • ROWS: define o número de linhas da caixa de texto. COLS: define quantos caracteres (colunas) cada linha possui. NAME: define o nome da caixa de texto. Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formulario</H2> <FORM> <P>Nome: <INPUT TYPE=”TEXT” NAME=”Nome”></P> <p>Entre com seu comentário:</P> <P><TEXTAREA NAME=”comentario” ROWS=”7”  COLS=”40”></TEXTAREA></P> </FORM>  </BODY>  </HTML>  São José dos Campos, 2011. 21 Desenvolvimento Web d) Caixa de combinação <SELECT NAME=”nome” SIZE=”quantidade de opções visíveis”> <OPTION VALUE=”valor”>Texto a aparecer</OPTION> <OPTION VALUE=”valor”>Texto a aparecer</OPTION> </SELECT> O marcador SELECT permite a criação de uma lista de opções a serem escolhidas pelo usuário. OS atributos são: • • NAME: nome da lista SIZE: define o número de opções a serem exibidas simultaneamente na tela. Se o valor for omitido ou igual a 1 é exibida uma opção por vez. O marcador OPTION define cada opção a ser exibida pela lista. Este texto pode ter qualquer tamanho e deve vir entre os marcadores <OPTION></OPTION>. • O atributo VALUE irá determinar o valor de cada opção. Assim, se por exemplo o texto aparecer para o usuário for “Produtos destinados ao consumo imediato”, Não é isso que ficará armazenado quando o formulário for submetido e sim o VALUE associado a este texto, que pode ser uma abreviação como “PROD”. Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formul&aacute;rio</H2> <FORM> <SELECT NAME="interesses" SIZE=1> <OPTION VALUE="vazio">Escolha sua cidade</OPTION> <OPTION VALUE="sjc">S&atilde;o Jos&eacute;</OPTION> <OPTION VALUE="tb">Taubat&eacute;</OPTION> <OPTION VALUE="jc">Jacare&iacute;</OPTION> <OPTION VALUE="sp">S&atilde;o Paulo</OPTION> </SELECT> </FORM>  </BODY>  </HTML>  São José dos Campos, 2011. 22 Desenvolvimento Web e) Caixa de Listagem Permite que na tela apareça uma lista com mais de uma opção, embora o usuário possa escolher somente uma. A criação de caixas de listagem é idêntica a criação de caixas de combinação, com exceção do atributo SIZE que deve ter um valor maior que 1, determinando o número de opções a aparecerem na tela. Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formul&aacute;rio</H2> <FORM> <SELECT NAME=”interesses” SIZE=”4”> <OPTION VALUE=”bd”>Banco de dados</OPTION> <OPTION VALUE=”html”>HTML</OPTION> <OPTION VALUE=”php”>Linguagem PHP</OPTION> <OPTION VALUE=”pr”>Programação</OPTION> </SELECT> </FORM> </BODY>  </HTML>  Observação: Caixa de Listagem com múltipla seleção - Permite que na tela apareça uma lista com mais de uma opção, podendo o usuário escolher mais de uma. Para permitir tal operação, acrescente MULTIPLE à tag SELECT: Exemplo: <SELECT NAME=”interesses” SIZE=”4” MULTIPLE> <OPTION VALUE=”bd”>Banco de dados</OPTION> <OPTION VALUE=”html”>HTML</OPTION> <OPTION VALUE=”php”>Linguagem PHP</OPTION> <OPTION VALUE=”pr”>Programação</OPTION> </SELECT> São José dos Campos, 2011. 23 Desenvolvimento Web f) Caixas de Checagem <INPUT TYPE=”CHECKBOX” NAME=”nome” VALUE=”valor” CHECKED> O valor CHECKBOX no atributo TYPE define uma caixa de checagem. Na prática, as caixas de checagem aparecem em grupos e os usuários podem escolher uma ou mais opções. Os atributos são: • • • NAME: define o nome da caixa de checagem. No caso de várias caixas, cada uma deve ter um nome diferenciado. VALUE: contém o valor do campo, que será passado ao programa interpretador do formulário. CHECKED: atributo opcional que pode ser utilizado quando se deseja que a opção já apareça selecionada na página. Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formul&aacute;rio</H2> <P>Escolha a área de interesse</P> <FORM> <INPUT TYPE="CHECKBOX" NAME="caixa1" VALUE="ini" CHECKED>  Cursos para iniciantes<BR> <INPUT TYPE="CHECKBOX" NAME="caixa2" VALUE="form"> Cursos  de formação profissional<Br> <INPUT TYPE="CHECKBOX" NAME="caixa3" VALUE="inf"> Cursos  de Informatica </FORM> </BODY>  </HTML>  g) Botão de opção <INPUT TYPE=”RADIO” NAME=”nome” VALUE=”valor” CHECKED> O valor RADIO no atributo TYPE define um botão de escolha. Na prática, os botões de escolha aparecem em grupos e podem permitir que apenas uma opção seja escolhida dentre as existentes (exclusão mútua). Os atributos são: São José dos Campos, 2011. 24 Desenvolvimento Web • • • NAME: define o nome do botão de opção. No caso de botões de opção com exclusão mútua, cada botão do grupo deverá utilizar o mesmo nome. VALUE: contém o valor do campo, que será passado ao programa interpretador do formulário. CHECKED: atributo opcional que pode ser usado quando se deseja que a opção já apareça selecionada na página. Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formul&aacute;rio</H2> <P>Escolha a área de interesse</P> <FORM> <INPUT TYPE="RADIO" NAME=”radio1” VALUE="ini">  Cursos para iniciantes<BR> <INPUT TYPE="RADIO" NAME=”radio1” VALUE="form">  Cursos formação profissional<BR> <INPUT TYPE="RADIO" NAME=”radio1” VALUE="inf">  Cursos de informatica<Br> </FORM> </BODY>  </HTML>  Atividade: Experimente colocar diferentes valores para os atributos NAME e veja o que acontece. h) Botão LIMPA/CANCELA <INPUT TYPE=”RESET” VALUE=”texto que aparece no botão”> O valor RESET no atributo TYPE define um botão que limpa todos os campos, devolvendo os mesmos valores de quando a página foi carregada. No atributo VALUE, pode-se definir o que será escrito no botão. Caso nenhum valor seja definido, aparecerá somente RESET. São José dos Campos, 2011. 25 Desenvolvimento Web Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formul&aacute;rio</H2> <FORM> <P>Entre com seu nome: <INPUT TYPE="TEXT"></P> <INPUT TYPE="RESET" VALUE="Limpar"> </FORM> </BODY>  </HTML> i) Botão SUBMIT <INPUT TYPE=”SUBMIT” NAME=”nome” VALUE=”texto no botão”> O valor SUBMIT no atributo TYPE define um botão que aciona o envio das informações preenchidas no formulário ao programa interpretador. O atributo VALUE define o que será escrito no botão. Caso nenhum valor seja definido, aparecerá somente SUBMIT. Exemplo: <HTML>  <HEAD>  <TITLE>Desenvolvimento Web</TITLE>  </HEAD> <BODY> <H2>Formul&aacute;rio</H2> <FORM> <P>Entre com seu nome: <INPUT TYPE="TEXT"></P> <INPUT TYPE="SUBMIT" VALUE="Enviar"> </FORM> </BODY>  </HTML>  São José dos Campos, 2011. 26 Desenvolvimento Web j) Campos escondidos <INPUT TYPE=”HIDDEN” NAME=”nome” VALUE=”texto que aparece no  botão”> O valor HIDDEN no atributo TYPE define dados que devem ser passados ao programa interpretador, embora não estejam visíveis na página. • • NAME: identifica o dado. VALUE: define o valor que deve ser passado. Geralmente os valores destes campos são atribuídos no momento em que está sendo feita a consistência dos dados no formulário via uma linguagem de scripts, como JavaScript. Exemplo: <FORM> <p>Entre com seu nome: <INPUT TYPE=”TEXT”></p> <INPUT TYPE=”HIDDEN” NAME=”escolha” VALUE=””> <INPUT TYPE=”IMAGE” SRC=”img.gif” ALT=”Clique para enviar o  formulário”> </FORM> Observação: Perceba que podemos utilizar a marcação <INPUT TYPE=”IMAGE” SRC=”caminho da imagem”> para colocar uma imagem o lugar do botão de enviar. Exercicios 1 - Crie uma página com o seguinte formato: São José dos Campos, 2011. 27 Desenvolvimento Web 2 – Construa, utilizando frames, uma página web com o layout abaixo: Espaço para menu Espaço para conteúdo das páginas Faça com que o menu permaneça fixo e que todas as páginas sejam exibidas no espaço para conteúdo das páginas. 3 - Utilizando o recurso de Iframe e a tag MARQUEE, crie um sistema dinâmico de notícias. São José dos Campos, 2011. 28 </div> </div> </div> <!-- End Description Section --> </main> <!-- ========== END MAIN ========== --> <div id="embedModal" class="js-login-window u-modal-window u-modal-window--embed"> <button class="btn btn-xs u-btn--icon u-btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();"> <span class="fas fa-times"></span> </button> <form class="p-7"> <header class="text-center mb-7"> <h4 class="h4 mb-0">Embed!</h4> <p>Html - Parte 3 - Final</p> </header> <textarea class="form-control u-form__input" rows="5"></textarea> </form> </div> <script> function check_recatpcha(token) { document.getElementById("download-form").submit(); grecaptcha.reset(); } </script> <script src='https://www.google.com/recaptcha/api.js'></script> <!-- ========== FOOTER ========== --> <hr class="my-0"> <footer> <!-- Lists --> <div class="container u-space-2"> <div class="row justify-content-md-between"> <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0"> <h3 class="h6"> <strong>About us'</strong> </h3> <!-- List --> <ul class="list-unstyled mb-0"> <li><a class="u-list__link" href="https://azdoc.tips/about-us">About us</a> </li> <li><a class="u-list__link" href="https://azdoc.tips/terms-conditions">Terms and conditions</a> </li> <li><a class="u-list__link" href="https://azdoc.tips/privacy-policy">Privacy policy</a></li> <li><a class="u-list__link" href="https://azdoc.tips/sitemap">Sitemap</a></li> <li><a class="u-list__link" href="https://azdoc.tips/career">Career</a> </li> <li><a class="u-list__link" href="https://azdoc.tips/contact-us">Contact us</a></li> </ul> <!-- End List --> </div> <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0"> <h3 class="h6"> <strong>Support</strong> </h3> <!-- List --> <ul class="list-unstyled mb-0"> <li><a class="u-list__link" href="https://azdoc.tips/help">Help</a></li> <li><a class="u-list__link" href="https://azdoc.tips/ticket">Submit ticket</a></li> </ul> <!-- End List --> </div> <div class="col-sm-4 col-lg-2 mb-4 mb-lg-0"> <h3 class="h6"> <strong>Account</strong> </h3> <!-- List --> <ul class="list-unstyled mb-0"> <li><a class="u-list__link" href="https://azdoc.tips/profile">Profile</a> </li> <li><a class="u-list__link" href="https://azdoc.tips/login">Login</a> </li> <li><a class="u-list__link" href="https://azdoc.tips/register">Register</a> </li> <li><a class="u-list__link" href="https://azdoc.tips/recover-account">Forgot password</a> </li> </ul> <!-- End List --> </div> <div class="col-md-6 col-lg-4"> <h3 class="h6"> <strong>Connect with us</strong> </h3> <!-- Social Networks --> <ul class="list-inline mb-0"> <li class="list-inline-item mb-3"> <a class="u-icon u-icon--sm u-icon-primary--air rounded" href="https://facebook.com/azdoctipscom"> <span class="fab fa-facebook-f u-icon__inner"></span> </a> </li> <li class="list-inline-item mb-3"> <a class="u-icon u-icon--sm u-icon-primary--air rounded" href="https://plus.google.com/111647055250435329124"> <span class="fab fa-google u-icon__inner"></span> </a> </li> <li class="list-inline-item mb-3"> <a class="u-icon u-icon--sm u-icon-primary--air rounded" href="https://twitter.com/azdoctipscom"> <span class="fab fa-twitter u-icon__inner"></span> </a> </li> </ul> <!-- End Social Networks --> </div> </div> </div> <!-- End Lists --> <hr> <!-- Copyright --> <div class="container text-center u-space-1"> <!-- Logo --> <a class="d-inline-block mb-2" href="https://azdoc.tips/" aria-label="AZDOCTIPS"> <img src="https://azdoc.tips/assets/img/logo.png" alt="Logo" style="width: 120px;"> </a> <!-- End Logo --> <p class="small text-muted">Copyright &copy; 2012-2024.</p> </div> <!-- End Copyright --> </footer> <!-- ========== END FOOTER ========== --> <!-- ========== SECONDARY CONTENTS ========== --> <!-- Account Sidebar Navigation --> <aside id="sidebarContent" class="u-sidebar u-unfold--css-animation u-unfold--hidden" aria-labelledby="sidebarNavToggler"> <div class="u-sidebar__scroller"> <div class="u-sidebar__container"> <div class="u-header-sidebar__footer-offset"> <!-- Toggle Button --> <div class="d-flex align-items-center pt-4 px-7"> <button type="button" class="close ml-auto" aria-controls="sidebarContent" aria-haspopup="true" aria-expanded="false" data-unfold-event="click" data-unfold-hide-on-scroll="false" data-unfold-target="#sidebarContent" data-unfold-type="css-animation" data-unfold-animation-in="fadeInRight" data-unfold-animation-out="fadeOutRight" data-unfold-duration="500"> <span aria-hidden="true">&times;</span> </button> </div> <!-- End Toggle Button --> <!-- Content --> <div class="js-scrollbar u-sidebar__body"> <div class="u-sidebar__content u-header-sidebar__content"> <!-- Login --> <div id="login" data-target-group="idForm"> <form class="js-validate" action="https://azdoc.tips/login" method="post"> <!-- Title --> <header class="text-center mb-7"> <h2 class="h4 mb-0">Welcome back</h2> <p>Login to manage your account</p> </header> <!-- End Title --> <!-- Input --> <div class="js-form-message mb-4"> <div class="js-focus-state input-group u-form"> <div class="input-group-prepend u-form__prepend"> <span class="input-group-text u-form__text"> <span class="fa fa-user u-form__text-inner"></span> </span> </div> <input type="email" class="form-control u-form__input" name="email" required placeholder="Email address" aria-label="Email address" data-msg="Please enter a valid email address" data-error-class="u-has-error" data-success-class="u-has-success"> </div> </div> <!-- End Input --> <!-- Input --> <div class="js-form-message mb-2"> <div class="js-focus-state input-group u-form"> <div class="input-group-prepend u-form__prepend"> <span class="input-group-text u-form__text"> <span class="fa fa-lock u-form__text-inner"></span> </span> </div> <input type="password" class="form-control u-form__input" name="password" required placeholder="Password" aria-label="Password" data-msg="Your password is invalid please try again" data-error-class="u-has-error" data-success-class="u-has-success"> </div> </div> <!-- End Input --> <div class="clearfix mb-4"> <a class="js-animation-link float-right small u-link-muted" href="javascript:;" data-target="#forgotPassword" data-link-group="idForm" data-animation-in="slideInUp">Forgot password</a> </div> <div class="mb-2"> <button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Login </button> </div> <div class="text-center mb-4"> <span class="small text-muted">Do not have an account?</span> <a class="js-animation-link small" href="javascript:;" data-target="#signup" data-link-group="idForm" data-animation-in="slideInUp">Register </a> </div> <div class="text-center"> <span class="u-divider u-divider--xs u-divider--text mb-4">Or</span> </div> <!-- Login Buttons --> <div class="d-flex"> <a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="https://azdoc.tips/login/facebook"> <span class="fab fa-facebook-square mr-1"></span> Facebook </a> <!-- <a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0"--> <!-- href="--><!--">--> <!-- <span class="fab fa-google mr-1"></span>--> <!-- Google--> <!-- </a>--> </div> <!-- End Login Buttons --> </form> </div> <!-- Signup --> <div id="signup" style="display: none; opacity: 0;" data-target-group="idForm"> <form class="js-validate" action="https://azdoc.tips/register" method="post"> <!-- Title --> <header class="text-center mb-7"> <h2 class="h4 mb-0">Welcome to AZDOCTIPS.</h2> <p>Fill out the form to get started</p> </header> <!-- End Title --> <!-- Input --> <div class="js-form-message mb-4"> <div class="js-focus-state input-group u-form"> <div class="input-group-prepend u-form__prepend"> <span class="input-group-text u-form__text"> <span class="fa fa-user u-form__text-inner"></span> </span> </div> <input type="email" class="form-control u-form__input" name="email" required placeholder="Email address" aria-label="Email address" data-msg="Please enter a valid email address" data-error-class="u-has-error" data-success-class="u-has-success"> </div> </div> <!-- End Input --> <!-- Input --> <div class="js-form-message mb-4"> <div class="js-focus-state input-group u-form"> <div class="input-group-prepend u-form__prepend"> <span class="input-group-text u-form__text"> <span class="fa fa-user u-form__text-inner"></span> </span> </div> <input type="text" class="form-control u-form__input" name="username" required placeholder="Username" aria-label="Username" data-msg="Please enter a valid username" data-error-class="u-has-error" data-success-class="u-has-success"> </div> </div> <!-- End Input --> <!-- Input --> <div class="js-form-message mb-4"> <div class="js-focus-state input-group u-form"> <div class="input-group-prepend u-form__prepend"> <span class="input-group-text u-form__text"> <span class="fa fa-lock u-form__text-inner"></span> </span> </div> <input type="password" class="form-control u-form__input" name="password" required placeholder="Password" aria-label="Password" data-msg="Your password is invalid please try again" data-error-class="u-has-error" data-success-class="u-has-success"> </div> </div> <!-- End Input --> <!-- Input --> <div class="js-form-message mb-4"> <div class="js-focus-state input-group u-form"> <div class="input-group-prepend u-form__prepend"> <span class="input-group-text u-form__text"> <span class="fa fa-key u-form__text-inner"></span> </span> </div> <input type="password" class="form-control u-form__input" name="confirm_password" id="confirmPassword" required placeholder="Confirm password" aria-label="Confirm password" data-msg="Password does not match with confirm password" data-error-class="u-has-error" data-success-class="u-has-success"> </div> </div> <!-- End Input --> <!-- Checkbox --> <div class="js-form-message mb-5"> <div class="custom-control custom-checkbox d-flex align-items-center text-muted"> <input type="checkbox" class="custom-control-input" id="termsCheckbox" name="terms_confirm" value="1" required data-msg="Please accept our terms and conditions" data-error-class="u-has-error" data-success-class="u-has-success"> <label class="custom-control-label" for="termsCheckbox"> <small> I agree to the <a class="u-link-muted" href="https://azdoc.tips/terms-conditions">Terms and conditions</a> </small> </label> </div> </div> <!-- End Checkbox --> <div class="mb-2"> <button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Get started </button> </div> <div class="text-center mb-4"> <span class="small text-muted">Already have account?</span> <a class="js-animation-link small" href="javascript:;" data-target="#login" data-link-group="idForm" data-animation-in="slideInUp">Login </a> </div> <div class="text-center"> <span class="u-divider u-divider--xs u-divider--text mb-4">Or</span> </div> <!-- Login Buttons --> <div class="d-flex"> <a class="btn btn-block btn-sm u-btn-facebook--air transition-3d-hover mr-1" href="#"> <span class="fab fa-facebook-square mr-1"></span> Facebook </a> <a class="btn btn-block btn-sm u-btn-google--air transition-3d-hover ml-1 mt-0" href="#"> <span class="fab fa-google mr-1"></span> Google </a> </div> <!-- End Login Buttons --> </form> </div> <!-- End Signup --> <!-- Forgot Password --> <div id="forgotPassword" style="display: none; opacity: 0;" data-target-group="idForm"> <form class="js-validate" action="https://azdoc.tips/recover-account" method="post"> <!-- Title --> <header class="text-center mb-7"> <h2 class="h4 mb-0">Forgot your password?.</h2> <p>Enter your email address below and we will get you back on track</p> </header> <!-- End Title --> <!-- Input --> <div class="js-form-message mb-4"> <div class="js-focus-state input-group u-form"> <div class="input-group-prepend u-form__prepend"> <span class="input-group-text u-form__text"> <span class="fas fa-envelope u-inner-form__text"></span> </span> </div> <input type="email" class="form-control u-form__input" name="email" required placeholder="Email address" aria-label="Email address" data-msg="Please enter a valid email address" data-error-class="u-has-error" data-success-class="u-has-success"> </div> </div> <!-- End Input --> <div class="mb-2"> <button type="submit" class="btn btn-block btn-primary u-btn-primary transition-3d-hover">Request reset link </button> </div> <div class="text-center mb-4"> <span class="small text-muted">Remember your password?</span> <a class="js-animation-link small" href="javascript:;" data-target="#login" data-link-group="idForm" data-animation-in="slideInUp">Login </a> </div> </form> </div> <!-- End Forgot Password --> </div> </div> <!-- End Content --> </div> <!-- Footer --> <footer class="u-sidebar__footer u-sidebar__footer--account"> <ul class="list-inline mb-0"> <li class="list-inline-item pr-3"> <a class="u-sidebar__footer--account__text" href="https://azdoc.tips/terms-conditions">Terms and conditions</a> </li> <li class="list-inline-item"> <a class="u-sidebar__footer--account__text" href="https://azdoc.tips/help"> <i class="fa fa-info-circle"></i> Help </a> </li> </ul> <!-- SVG Background Shape --> <div class="position-absolute-bottom-0"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 126.5" style="margin-bottom: -5px; enable-background:new 0 0 300 126.5;" xml:space="preserve"> <path class="u-fill-primary" opacity=".6" d="M0,58.9c0-0.9,5.1-2,5.8-2.2c6-0.8,11.8,2.2,17.2,4.6c4.5,2.1,8.6,5.3,13.3,7.1C48.2,73.3,61,73.8,73,69 c43-16.9,40-7.9,84-2.2c44,5.7,83-31.5,143-10.1v69.8H0C0,126.5,0,59,0,58.9z"/> <path class="u-fill-primary" d="M300,68.5v58H0v-58c0,0,43-16.7,82,5.6c12.4,7.1,26.5,9.6,40.2,5.9c7.5-2.1,14.5-6.1,20.9-11 c6.2-4.7,12-10.4,18.8-13.8c7.3-3.8,15.6-5.2,23.6-5.2c16.1,0.1,30.7,8.2,45,16.1c13.4,7.4,28.1,12.2,43.3,11.2 C282.5,76.7,292.7,74.4,300,68.5z"/> <circle class="u-fill-danger" cx="259.5" cy="17" r="13"/> <circle class="u-fill-primary" cx="290" cy="35.5" r="8.5"/> <circle class="u-fill-success" cx="288" cy="5.5" r="5.5"/> <circle class="u-fill-warning" cx="232.5" cy="34" r="2"/> </svg> </div> <!-- End SVG Background Shape --> </footer> <!-- End Footer --> </div> </div> </aside> <!-- End Account Sidebar Navigation --> <!-- ========== END SECONDARY CONTENTS ========== --> <!-- Go to Top --> <a class="js-go-to u-go-to" href="#" data-position='{"bottom": 15, "right": 15 }' data-type="fixed" data-offset-top="400" data-compensation="#header" data-show-effect="slideInUp" data-hide-effect="slideOutDown"> <span class="fa fa-arrow-up u-go-to__inner"></span> </a> <!-- End Go to Top --> <!-- JS Global Compulsory --> <script src="https://azdoc.tips/assets/vendor/jquery/dist/jquery.min.js"></script> <script src="https://azdoc.tips/assets/vendor/jquery-migrate/dist/jquery-migrate.min.js"></script> <script src="https://azdoc.tips/assets/vendor/popper.js/dist/umd/popper.min.js"></script> <script src="https://azdoc.tips/assets/vendor/bootstrap/bootstrap.min.js"></script> <!-- JS Implementing Plugins --> <script src="https://azdoc.tips/assets/vendor/hs-megamenu/src/hs.megamenu.js"></script> <script src="https://azdoc.tips/assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script> <script src="https://azdoc.tips/assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script> <script src="https://azdoc.tips/assets/vendor/fancybox/jquery.fancybox.min.js"></script> <script src="https://azdoc.tips/assets/vendor/typed.js/lib/typed.min.js"></script> <script src="https://azdoc.tips/assets/vendor/slick-carousel/slick/slick.js"></script> <script src="https://azdoc.tips/assets/vendor/pdfobject/pdfobject.js"></script> <script src="https://azdoc.tips/assets/vendor/custombox/dist/custombox.min.js"></script> <script src="https://azdoc.tips/assets/vendor/appear.js/appear.js"></script> <script src="https://azdoc.tips/assets/vendor/dzsparallaxer/dzsparallaxer.js"></script> <script src="https://azdoc.tips/assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script> <!-- JS Template --> <script src="https://azdoc.tips/assets/js/hs.core.js"></script> <script src="https://azdoc.tips/assets/js/helpers/hs.focus-state.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.header.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.unfold.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.malihu-scrollbar.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.validation.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.fancybox.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.slick-carousel.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.show-animation.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.sticky-block.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.scroll-nav.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.go-to.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.modal-window.js"></script> <script src="https://azdoc.tips/assets/js/components/hs.cubeportfolio.js"></script> <script src="https://azdoc.tips/assets/js/azdoctips.js?v=2"></script> <script> // initialization of text animation (typing) if (jQuery('.u-text-animation.u-text-animation--typing').length > 0) { var typed = new Typed(".u-text-animation.u-text-animation--typing", { strings: ["Documents.", "Magazines.", "Articles.", "And more."], typeSpeed: 60, loop: true, backSpeed: 25, backDelay: 1500 }); } </script> </body> </html>