Rss Feed
    Mostrando postagens com marcador PPSI1. Mostrar todas as postagens
    Mostrando postagens com marcador PPSI1. Mostrar todas as postagens

  1. Site pessoal

    segunda-feira, 10 de junho de 2013

    http://btl.vv.si/torres-web/

    Postado por Unknown às 19:51 | Marcadores: , , | 0 comentários | |

  2. Tutorial CSS

    segunda-feira, 3 de junho de 2013

    As "Media Types" foram criadas para o CSS com o objetivo de aumentar a acessibilidade do site por diversos meios, sejam eles: celulares, tablets, computadores e até mesmo telas de televisores.
    Entretanto, as páginas muitas vezes não são necessárias apenas para visualização, como também para impressão, nesse caso  utilizamos os "media types" para facilitar ao navegador a identificação de qual dispositivo está acessando aquele site no momento.
    Tipos de medias que podem ser aplicadas:

    all: Com a definição do media, esse é o tipo padrão;
    aural: Para sintetizadores de som;
    braille: Para dispositivos táteis;
    embossed: Para impressoras em braille;
    handheld: Estilos para celulares de baixos recursos visuais;
    print: Para impressão;
    projection: Para projeções de slides, por exemplo.
    Screen: Para qualquer dispositivo de telas coloridas;
    tv: Para televisores.

    Os dois "media types" mais utilizados são:
    Screen: Para telas de dispositivos, sejam eles móveis ou não;
    Print: Para impressoras, geralmente para dar uma boa qualidade para a página que pode ser impressa. 

    Exemplo de sintaxe do screen:
    <!DOCTYPE>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" a href="estilo.css" media="screen">
    <title>Exemplo de utilização do screen</title>
    </head>
    <body>
                                    <section>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.
                                    </section>
    </body>
    </html>

    Exemplo de sintaxe voltado aos dispositivos de impressão:
    <!DOCTYPE>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" a href="estilo.css" media="print">
    <title>Exemplo de utilização do screen</title>
    </head>
    <body>
                                    <section>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.
                                    </section>
    </body>
    </html>

    Segundo o InfoWester, seguem umas dicas para páginas de impressão:

    * Definir todas as cores em tons de cinza;
    * Sublinhar os links, e de preferência imprimir seus endereços;
    * Escolher uma fonte serifada para os textos, que é mais fácil de ser lida no papel, já que foi criada para isso;
    * Definir as unidades de texto em pontos, e não em pixels;
    * Remover elementos não essenciais, como menus, barras laterais e, dependendo do caso, anúncios publicitários;

    * Quando aplicável, destacar o endereço do site e o autor do texto.

    Postado por Unknown às 20:26 | Marcadores: , | 0 comentários | |

  3. Efeito Cascata e Herança:

    “O Efeito Cascata do CSS é controlado pela especificidade e pela herança das propriedades.” (EIS, Diego) http://tableless.com.br

    O CSS (Cascading Style Sheet), já nos sugere através de seu nome, que o código e suas folhas são no estilo cascata, mas o que isso significa?
    O Estilo Cascata é uma forma de organização de todo o código CSS, uma parte importante do Estilo Cascata é a Herança de seus elementos. Essa forma de organização divide os elementos em dois tipos: ‘elementos pai’ e ‘elementos filhos’, de forma que, ao dar determinada característica para algum elemento, outros elementos que dependem deste primeiro herdarão essa característica, dessa forma você poupa tempo e não tem a necessidade de ficar procurando vários elementos espalhados pelo código quando quiser fazer alguma alteração específica no estilo do seu site.

    Exemplo:
    div{
    color: red;
    }

    /*Foi criada uma div e lhe atribuí a cor vermelha, no HTML eu incluí um texto dentro de uma tag <p> que foi inserida dentro da <div>. Automaticamente esse texto adquiriu a cor vermelha, este fato decorreu da herança de propriedade do CSS.*/

    Exemplo prático:

    Veja no html:










    Veja no CSS:











    Resultado na tela do navegador:









    Mas existem também propriedades que não são herdadas pelos filhos, geralmente são propriedades que estão relacionadas a formatação de caixa, por exemplo: height, width, margin, padding e por aí vai.


    Especificidade:

    A especificidade define os detalhes dos elementos, por exemplo, ao definir no body as propriedades font-family, font-size e font-color, essas propriedades são herdadas por todos os elementos do arquivo. Com isso o texto ficará padronizado, entretanto, suponhamos que você queira diferenciar em algum aspecto algumas palavras que estão em ênfase no seu texto, a especificidade entra aí.


    Exemplo:
    No documento html eu adicionei uma passagem do grande texto “Lorem Ipsum”, decidi enfatizar algumas palavras que são cognatas do nosso português.
    Utilizando somente o <em>, as palavras que estiverem dentro dele aparecerão em itálico.











    Usei então o CSS para especificar que as palavras que estiverem entre a tag <em> terão o background amarelo.










    Resultado: Além de ter ficado em itálico, as palavras ainda ficaram com um efeito de marca-texto, algo mais detalhado que o convencional. A especificidade está aqui pra adicionar detalhes singelos, mas que gerem boas alterações visuais na página, em muitos casos isso facilitem a leitura.

    Link e @import:

    A tag link e o @import são duas formas distintas que tem o mesmo objetivo: carregar um estilo css para uma ou mais páginas de um site.
    Esses dois métodos, embora tenham a mesma finalidade, não têm as mesmas vantagens.
    Link: A tag link do HTML vai dentro da tag <head> e é melhor interpretada pelos browsers e isso gera maior um desempenho.

    Exemplo de sintaxe:
    <head>
    <link rel=”stylesheet” type=”text/css” a href=”estilo.css”>
    </head>

    @import: Diferente do link, é um código CSS e deve ser colocado entre as tags <style> que vão dentro do <head> do seu documento HTML, dessa forma, o CSS é inserido de forma embutida, embora esteja em um arquivo externo, para cada página é necessário criar um @import.

    Exemplo de sintaxe:
    <head>
    <style>
                @import url(estilo.css);
    </style>
    </head>

    Fonte de pesquisa: http://www.tableless.com.br

    Postado por Unknown às 19:29 | Marcadores: , | 0 comentários | |

  4. Propriedades CSS

    domingo, 5 de maio de 2013


    No post de introdução ao CSS falei bastante sobre suas propriedades, mas não dei nenhuma como exemplo, esse post é especial para a explicação de muitas delas que são bastante importantes.

    Bordas:
    border-top-width: /* Define a largura da borda superior. */
    border-right-width: /* Define a largura da borda direita. */
    border-bottom-width: /* Define a largura da borda inferior. */
    border-left-width: /* Define a largura da borda esquerda. */
    border-width: /* Define a largura de todos os lados da borda. */
    border-top-color: /* Define a cor da borda superior. */
    border-right-color: /* Define a cor da borda direita. */
    border-bottom-color: /* Define a cor da borda inferior.  */
    border-left-color: /* Define a cor da borda esquerda. */
    border-color: /* Definição da cor geral de todos os lados da borda. */
    border-top-style: /* Estilo da borda superior. */
    border-right-style: /* Estilo da borda direita. */
    border-bottom-style: /* Estilo da borda inferior. */
    border-left-style: /* Estilo da borda esquerda. */
    border-style: /* Estilo geral da borda. */
    border-top: /* Aplica o estilo somente à borda superior. */
    border-right: /* Aplica o estilo somente à borda direita. */
    border-bottom: /* Aplica o estilo somente à borda inferior. */
    border-left: /* Aplica o estilo somente à borda esquerda. */
    border: /* Define uma borda que abrangerá todos os lados do elemento. */

    Margens:
    margin-top: /* Margem superior. */
    margin-right: /* Margem direita. */
    margin-bottom: /* Margem inferior. */
    margin-left: /* Margem esquerda. */
    margin: /* Margem aplicada a todos os lados. */
    padding-top: /* Margem interna aplicada à parte superior do elemento. */
    padding-right: /* Margem interna aplicada à parte direita do elemento. */
    padding-bottom: /* Margem interna aplicada à parte inferior do elemento. */
    padding-left: /* Margem interna aplicada à parte esquerda do elemento. */
    padding: /* Margem interna aplicada a todos os lados. */

    Cores e fundo:
    color: /* Cor. */
    background-color: /* Cor do plano de fundo.  */
    background-image: /* Imagem de plano de fundo.  */
    background-repeat: /* Repetição da img, opções: no-repeat | repeat | repeat-x | repeat-y */
    background-attachment: /* Especifica se o background rola ou não junto ao texto: fixed | scroll */
    background-position: /* Posicionamento do plano de fundo. */
    background: /* Elemento de plano de fundo. */

    Fontes tipográficas:
    font-family: /*  Especifica uma linha de várias fontes.  */
    font-style: /*Estilos da fonte: italic | normal */
    font-variant: /* Se terá ou não variação tipográfica, podendo ser: small-caps (capslook pequeno) | normal*/
    font-weight: /* Expessura (peso) da fonte: bold | normal */
    font-size: /* Tamanho da fonte. */
    font: /* Fonte. */

    Texto:
    text-indent: /* Identação, referente ao tab para a primeira letra do parágrafo */
    text-align: /* Alinhamento do texto: center | left | right | justify */
    text-decoration: /* Decoração do texto: underline | overline | nome */
    letter-spacing: /* Espaçamento entre os caracteres. */
    word-spacing: /* Espaçamento entre as palavras. */
    text-transform: /* Transformação do texto. Maiúsculas ou minúsculas. */

    Modelos de formatação visual:
    float: /* Flutua o elemento para uma direção específica. Podendo ser: left | right */
    clear: /* Ao flutuar um elemento, essa ação pode refletir em algum outro element, desalinhando-o. Para impedir isso, usamos o clear para ‘limpar’ esses efeitos e ele permanecer no lugar.*/
    width: /* Largura. */
    height: /* Altura. */
    line-height: /*Tamanho relativo à fonte (em), seria algo como a expessura do espaçamento da linha*/
    vertical-align: /* Alinhamento vertical. */

    Listas:
    list-style-type: /* Tipo dos ícones da lista. */
    list-style-image: /* Imagens como ícones da lista. */
    list-style-position: /* Onde o ícone será posicionado: outside | inside. */
    list-style: /* Definição de que a lista terá um estilo. */

    Postado por Unknown às 11:12 | Marcadores: , | 0 comentários | |

  5. CSS - VISÃO GERAL

    sábado, 4 de maio de 2013


    O que é CSS – Benefícios da utilização:

    As folhas CSS (cascading style sheet), também conhecidas como “folhas estilo cascata”, são responsáveis por dar características visuais às páginas web.
    Criada à parte do HTML, uma única folha CSS controla o estilo de todo um site, facilitando assim a sua manutenção e padronizando todas as suas páginas, em pouco tempo e o melhor de tudo é que como é separado do HTML você pode mexer no layout do seu site sem ter medo que isso interfira no conteúdo do mesmo.
    Antes da concepção do CSS, os estilos que definiam as características de um site, por exemplo, eram feitos diretamente nas páginas html, uma a uma e isso era extremamente desgastante para o desenvolvedor. Para atualizar o site inteiro, haveria de abrir página por página e alterar algum atributo de estilo que estivesse dentro de alguma tag específica, isso dava muito trabalho e as vezes era mais fácil começar um outro site do zero, pois as chances de se perder em meio aos códigos era grande.
    Felizmente temos o CSS que veio para modificar completamente o conceito de que páginas web poderiam ser apenas textos e imagens, a partir do momento em que o CSS passou a existir, os desenvolvedores web puderam se aventurar nos mares de sua criatividade e criar verdadeiras obras de arte (ou não) com essa ferramenta maravilhosa. O web design passava a ter suas raízes.
    Em suma, algumas das inúmeras facilidades que temos são:
    - Facilidade na manutenção do website, todas as páginas se alteram de uma só vez;
    - Liberdade para criar layouts mais inventivos;
    - O visual é alterado, mas o conteúdo permanece o mesmo.

      
    Formas de utilização:

    Existem 3 formas de se utilizar o CSS, as formas são as seguintes: inline, embutida e externa (esta última por sua vez é a mais recomendada) e eu explicarei cada uma delas.
    Forma inline: A forma inline é a utilização de regras de estilização aplicadas no próprio código HTML. Essa forma entrou em desuso desde a concepção do CSS, entretanto ainda pode ser utilizada para garantir uma rápida visualização do efeito desejado na página, após isso a maior recomendação é que essas regras sejam passadas para os controles CSS.

    Exemplo:
    <elemento style=”atributo CSS”>

    Forma embutida: Muito semelhante à forma inline, a única diferença é que ao invés de integrar atributos CSS dentro das tags html, a codificação no formato CSS fica dentro do <head> </head> da página. O lado negativo dessa forma é que para cada página feita precisa-se copiar o css e colá-lo no <head> e com isso, para alterar alguma coisa no layout seria necessário alterar página por página.

    Exemplo:
    <head>
                <style type=”text/css”>
                            Tag ou elemento a ser alterado{
                                       Propriedades:atributos;
    }
    </style>
    </head>
      

    Forma externa: A forma externa é a melhor opção a se utilizar. Todo o CSS é feito em um arquivo externo que é linkado à todas as páginas html do site. Dessa forma, ao atualizar esse arquivo, todos os arquivos que estão vinculados a ele, mudarão simultaneamente.

    Exemplo:
    <head>
                <link rel=”stylesheet” type=”text/css” href=”arquivo.css”>
    </head>


    Tipos de seletores: elemento html, id e class         

    Seletores:
    Existem 3 formas de se utilizar elementos do html como seletores css, isso significa que esses seletores serão usados como parâmetro para edições visuais em partes específicas do site.                                                  

    1- elemento HTML: A partir do elemento html, no caso a própria tag, podemos especificar seu estilo, modificando-o da forma que o mesmo se adeque ao layout do seu site. Lembrando que se altera a tag, todos os elementos que estiverem dentro dela se adequarão às regras que lhe foram aplicadas.

    Exemplo:
    body{
         background-color:#FFF;
    }

    2- id: Podemos modificar a padronização de determinado ID de algum elemento. Nesse caso, usamos o # antes do ID.

    Exemplo:
    #id_do_elemento{
    propriedade:atributo;
    }

    3- classe: as classes são muito usadas para criar vários padrões ao mesmo elemento, por exemplo, mais de um tipo de sessão. Quando se trata de classe, utilizamos um ‘.’ antes do seu nome.

    Exemplo:
    .elemento_da_classe{
        propriedade:atributo;
    }


    Sintaxe:

    Assim como qualquer linguagem de desenvolvimento, o CSS também tem sua própria sintaxe, para que os comandos funcionem, ela deve ser estritamente seguida.

    Comentários:
    Os comentários CSS são escritos de forma diferente do HTML, esses por sua vez são entre /* */

    Exemplo:
    /* Comentário */


    Regras CSS:
    As regras CSS são sempre escritas da seguinte forma:

    Seletor{
    Propriedade:atributo;
    }


    Unidades de medida:

    No CSS temos 3 tipos de unidades de medidas, que são:
     Relativas (px, em, ex):
               px = Tamanho em pixels (relativo à tela do dispositivo);
               em = Tamanho relativo à fonte utilizada em determinado elemento;
               ex = Corresponde à altura da fonte utilizada.

    Absolutas (in, cm, mm, pt, pc)
               in = Polegadas ( 1polegada = 2.54 cm);
               cm = Centímetros;
               mm = Milímetros;
               pt = Pontos (1 pt = 1/72 polegadas);
               pc = Paicas (1 paica = 12 pontos);

    Porcentagem
               % = Porcentagem (se adequa a uma porcentagem do tamanho da tela);  

    Postado por Unknown às 20:51 | Marcadores: , | 0 comentários | |

  6. FORMULÁRIOS HTML

    domingo, 7 de abril de 2013

    Os formulários são muito importantes em websites; geralmente utilizados para reunir informações de cadastro de clientes e usuários em uma base de dados, eles servem para facilitar o contato do cliente com a empresa em diversos sentidos, já que não é necessário um contato telefônico – por exemplo – para que possa dar seus dados cadastrais, fazer uma reclamação, dar uma sugestão ou enviar uma dúvida.

    Tag e atributos (para formulários):

    <form> </form>: Tag de abertura de um formulário.

    - Atributos da tag form:
    *id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
    *action: Indica onde os dados informados serão guardados após sua submissão (ou seja, o local onde as informações preenchidas serão guardadas [por ex: um banco de dados]).
    *method: Método de envio dos dados, existem apenas 2, que são:
                    - Get: Os dados são conduzidos através da URL do navegador. Esse método não é aconselhável, pois informações importantes (como de variáveis, por exemplo) aparecem na barra de endereço e a quantidade de caracteres é extremamente limitada.
                    - Post: O método de envio mais seguro, devido ao fato de os dados serem transmitidos diretamente no corpo da página. Outra vantagem é que não há uma quantidade definida de caracteres que possam ser enviados de uma única vez.
    *enctype: Determina a maneira como serão codificados os dados do formulário (geralmente o formato texto é o escolhido).

    <label>: Dá um rótulo para o campo. Sua importância semântica é facilitar a leitura por intermédio de sintetizadores de voz. A leitura da label é importante para sinalização dos campos em casos de pessoas que não enxergam.

    - Atributos da tag label:
    *accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.
    *for: Usa-se para criar uma ligação entre a label e o campo à qual se refere.

    <input>: Define um campo de entrada de dados no formulário.

    - Atributos da tag input:
    *type: O tipo de entrada de dado, que tem como principais valores:
                    - Text: Cria um campo que receberá texto (letras, números, caracteres especiais);
                    - Date: Cria um minicalendário, onde o usuário escolhe uma data;
                    - E-mail: Cria um campo validado para receber um endereço de e-mail (se preencher sem @ e . o endereço de e-mail não é aceito);
                    - Number: Cria um campo de tipo numérico;
                    - Range: Cria um controle numérico (uma espécie de regulador), onde o desenvolvedor define qual será o intervalo entre um número e outro (o intervalo sempre será o mesmo);
                    - Password: Campo de senha, aceita números, letras e alguns caracteres especiais. Sua máscara de entrada é a •;
                    - Hidden: Cria um elemento invisível ao usuário, entretanto ele contém informações que geralmente são importantes ao desenvolvedor (última vez que o usuário fez alteração dos seus dados, por exemplo);
                    - File: Cria um botão que, quando clicado abre uma caixa de seleção de arquivo na máquina do usuário;
                    - Checkbox: Cria uma caixinha que funciona como seletor de opções;
                    - Radio: Lembra um checkbox, entretanto sua forma é circular e somente uma opção pode ser selecionada no radio. Muito utilizado para questões onde a informação é fixa, por exemplo, sexo feminino ou masculino;
                    - Button: Simplesmente cria um botão. Deve-se inserir um script que especifique a utilidade do mesmo;
                    - Image: Inclui uma imagem como botão de envio “submit”;
                    - Submit: Botão de envio dos dados preenchidos no formulário para o local indicado no atributo action do form;
                    - Reset: Botão que devolve aos campos do formulário seus valores originais.
    Obs: Muito parecido com o botão ‘limpar’, já que aparentemente os campos ficam em branco quando clicamos sobre ele, a diferença está no caso de algum campo já ter algum valor específico e esse valor for alterado pelo usuário, quando resetado, o valor original torna a aparecer.
    *id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
    *name: Permite-nos dar um nome ao elemento.
    *accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.
    *alt: Texto alternativo somente para imagens.
    Motivos: se a imagem não carrega, ao passar o mouse acima do espaço onde ela ficaria, o texto - geralmente descritivo - aparece. Também utilizado por sintetizadores de voz;

    *checked: Determina que uma opção no radio ou checkbox estará pré-selecionada;
    *disabled: Desabilita a utilidade do campo;
    *maxlenght: Usado em campos tipo text e password, delimita uma quantidade máxima de caracteres permitidos;
    *readonly: Indica que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;
    *size: Especifica uma a largura (calculada por quantidade de caracteres) que um campo terá;
    *src: Usado sempre que o tipo for ‘img’ (imagem), indicará o caminho de onde a tal imagem está guardada;
    *tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;
    *value: Especifica o valor que será enviado ao banco de dados;

    --- Abaixo atributos que são utilizados exclusivamente para tipos number e range ---
    *max: Valor máximo;
    *min: Valor mínimo;
    *step: Define os intervalos entre os números.

    <select>: O select expõe uma série de opções que podem ser escolhidas, essas opções são apresentadas em forma de lista.

    *id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
    *multiple: Permite que mais de uma opção possa ser selecionada (por intermédio da tecla ctrl);
    *disabled: Desabilita a utilidade do campo;
    *size: Especifica uma a largura (calculada por quantidade de caracteres) que um campo terá;
    *tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;

    <option>: Define uma opção em algum tipo de lista de seleção.
    *value: Especifica o valor que será enviado ao banco de dados;
    *selected: Deixa uma das opções pré-selecionada;
    *label: Rotula a opção;
    *disabled: Desabilita a utilidade do campo;

    <optgroup>: Agrupa as opções relacionadas, dando assim uma maior organização ao select.

    <textarea>: É uma área onde textos maiores podem ser digitados, aceita qualquer tipo de caracter e quebras de linha também.
    *id: Agrupa elementos, mas sua mais importante função é a de dar uma identificação para eles (o Id é único, jamais deve haver 2 elementos com o mesmo).
    *tabindex: Apontará qual será a ordem dos campos do formulário que ficarão em foco conforme a tecla tab for pressionada;
    *accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida;
    *cols: Define a largura da área de texto;
    *rows: Define a altura da área de texto;
    *readonly: Indica que o campo é somente de leitura, ou seja, o usuário não consegue digitar nele;

    <button>: Essa tag define um botão, dependendo da utilidade que esse botão terá, um script precisa ser criado para dar ao botão tal competência. Também podemos adicionar uma imagem ao botão, adequando-o assim ao design do site.

    <fieldset>: Cria uma borda em volta dos elementos do formulário. Bastante útil para agrupar informações semelhantes dentro do formulário.

    <legend>: Define um título para o fieldset.
    *accesskey: Utilizado para a criação de alguma tecla de atalho, assim a navegação pelo teclado também é favorecida.
    Exemplo de utilização das tags:

     <!DOCTYPE>
    <html>
    <head>
        <title>Trabalhando com formulários</title>
            <meta charset="utf-8">
        </head>
     
        <body>
        <form id="cadastro" action="cadastrar.php" method="post">
         
            <fieldset>
                    <legend>Formulário de Contato</legend>
                 
                    <fieldset>
                    <legend>Dados Pessoais:</legend>
                 
                    <label for="nome">Nome:*</label>
                    <input id="nome" type="text" required><br>
                 
                    <label for="data">Data que iniciou as aulas:</label>
            <input type="date" id="data"><br>
                 
                    Sexo:
                    <label for="sexo">M</label>
                    <input type="radio" name="sexo" value="m">
                    <label for="sexo">F</label>
                    <input type="radio" name="sexo" value="f"><br>
                 
                    <label for="endereco">Endereço:*</label>
                    <input id="endereco" type="text" required>
                 
                    <label for="numero">Nº:*</label>
                    <input id="numero" type="text" required>
                 
                    <label for="complemento">Complemento</label>
                    <input id="complemento" type="text"><br>
                 
                    <label for="telefone">Telefone:</label>
                    (<input id="ddd" type="number">)
                    <input id="telefone" type="number"><br>
                 
                    <label for="email">Email:</label>
            <input type="email" id="email"><br>
                </fieldset>
             
                <fieldset>
                <legend>Dados do curso</legend>
                    <label for="unidade">Unidade:</label><br>
                               
                    <input list="list_unidade" id="unidade">
                    <datalist id="list_unidade">
                 
                        <option value="Carapicuíba">
                        <option value="Barueri">
                        <option value="Osasco">
                        <option value="Embu das Artes">
                        <option value="São Paulo">
                 
                    </datalist><br>
                 
                    <label for="esportes">Período:</label><br>
            &nbsp;<input type="checkbox" value="mn" name="esportes">Manhã
            &nbsp;<input type="checkbox" value="td" name="esportes">Tarde
            &nbsp;<input type="checkbox" value="nt" name="esportes">Noite<br>
                 
                    <label for="curso">Curso:</label>
                        <select id="curso">
                     
                        <option selected>--- Selecione um curso ---</option>
                        <optgroup label="Cursos de TI">
                        <option value="ADS">Análise de Sistemas</option>
                        <option value="JD">Jogos Digitais</option>
                        <option value="SI">Sistemas para Internet</option>
                        <optgroup label="Outros cursos">
                        <option value="LG">Logística</option>
                        <option value="SC">Secretariado</option>
                    </select><br>
                    <label for="pontos">Dê uma pontuação ao curso:</label>
            <input type="range" id="pontos" min="1" max="10" step="1"><br>
                 
                    <label for="mensagem">Mensagem:</label>
                    <textarea cols="45" rows="10" id="mensgem">Seu feedback é importante para nós!</textarea><br>
                 
                    <input type="submit" value="Enviar">
                    <input type="reset" value="Redefinir">
                </fieldset>
                </fieldset>
        </body>
    </html>
    Exemplo da formulário no navegador:



















    Postado por Unknown às 14:59 | Marcadores: , | 1 comentários | |