Os elementos HTML details e summary permitem que você crie uma interface interativa no estilo sanfona (“accordion“) que pode expandir ou recolher seu conteúdo, mostrando ou ocultando parte do texto ou mesmo outros elementos HTML.

Isso pode ser útil para exibir muitas informações em uma página sem sobrecarregar o usuário com muito texto de uma só vez.

O elemento details (“detalhes”) cria um contêiner para o conteúdo que você deseja expandir ou recolher. Já o elemento summary (“resumo”) é usado para criar o cabeçalho clicável para esse contêiner.

Quando o usuário clica no elemento de resumo, o conteúdo dentro do elemento details será expandido ou recolhido.

Vejamos um exemplo de como usar esses elementos em HTML:

<details>
  <summary>Clique aqui para expandir o conteúdo</summary>
    <p>Conteúdo que expandido ou colapsado ao clicar no texto do elemento summary.</p>
</details>

No exemplo acima, o elemento summary é usado como um cabeçalho clicável e o elemento de parágrafo dentro do elemento details é o conteúdo que será expandido ou recolhido:

Quando o usuário clica no texto do elemento summary, o elemento de parágrafo alterna entre ser exibido ou ocultado:

Podemos adicionar mais conteúdo dentro do elemento details, incluindo outros elementos HTML como cabeçalhos, listas ou imagens. Vejamos um exemplo de uso mais complexo desses elementos:

<details>
  <summary>Exibir lista de livros</summary>
    <h2>Livros</h2>
    <ul>
      <li>Cosmos</li>
      <li>Contato</li>
      <li>Pálido Ponto Azul</li>
      <li>Murmúrios da Terra</li>
    </ul>
    <img src="http://www.bosontreinamentos.com.br/wp-content/uploads/2023/02/cosmos-livro.jpg" alt="Imagem de exemplo">
</details>

Neste exemplo, há um cabeçalho de seção, uma lista e uma imagem dentro do elemento details. Quando o usuário clicar no elemento summary, todo esse conteúdo será expandido ou recolhido. A imagem a seguir mostra o conteúdo desse exemplo expandido:

Também podemos empregar CSS para estilizar os elementos details e summary, como por exemplo para alterar o tamanho da fonte, cor do texto ou cor de fundo. Abaixo temos um exemplo de como estilizar ambos os elementos:

<style>
  details {
    width: 250px;
    height: 250px;
  }
  summary {
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px;
  }
</style>

Neste exemplo, o elemento summary terá uma cor de fundo cinza e cantos arredondados, e o elemento details tem seu tamanho delimitado em 250 pixels:

No geral, os elementos details e summary são uma forma simples e eficaz de criar um bloco colapsável no estilo sanfona em HTML. Eles podem ajudar a tornar o site mais fácil de usar e organizado, permitindo que os usuários se concentrem em um conteúdo específico por vez.

O post Mostrar e ocultar conteúdo com os elementos details e summary em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

Nesta lição introduzimos a criação de tabelas em HTML. Usamos as tabelas para exibir dados tabulares em uma página, com por exemplo dados de uma planilha. Não devemos jamais usar tabelas para criar a estrutura da página HTML – o que era muito comum antigamente. Para isso, existem elementos muito mais apropriados, além do emprego de CSS (que estudaremos ao longo do curso).

Elementos da tabela HTML

• Uma tabela em HTML é definida com o emprego do elemento <table>.
• Cada linha da tabela é definida com a tag <tr>.
• Um cabeçalho da tabela é definido com a tag <th>. Por padrão, os cabeçalhos das tabelas aparecem em negrito e com o conteúdo centralizado.
• Um dado de tabela em uma coluna (dentro da célula) é definido com a tag <td>.

Estrutura básica de uma tabela HTML

A seguir temos a estrutura de elementos básicos que compõem uma tabela em HTML:

Exemplo de tabela HTML

<table>
  <tr>
    <th>Nome</th>
    <th>Sobrenome</th> 
    <th>Cidade</th>
  </tr>
  <tr>
    <td>Fábio</td>
    <td>dos Reis</td> 
    <td>São Paulo</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td>Paula</td> 
    <td>Rio de Janeiro</td>
  </tr>
  <tr>
    <td>Renata</td>
    <td>Mirelli</td> 
    <td>São Paulo</td>
  </tr>
</table>

Resultado:

Ainda há muito o que se trabalhar nesta tabela, porém sua estrutura básica já está presente – a organização dos dados em linhas e colunas, incluindo um cabeçalho na tabela.

 Veremos mais opções de estrutura e formatação da tabela na próxima lição.

O post Como criar Tabelas em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

Neste tutorial vamos abordar o conceito de Elementos em HTML, assim como introduzir as tags e seus atributos em HTML.

Tags

Tags são símbolos codificados que separam uma parte de conteúdo da outra, além de informar ao navegador com qual tipo de conteúdo ele está lidando.

Os navegadores Web interpretam as tags dentro do documento html e exibem a página de acordo com os tipos utilizados.

Em HTML as tags são envolvidas pelos símbolos < e > para distingui-las do texto comum do documento. Por exemplo, temos a seguir uma tag típica que determina o título de uma página, o qual aparece na barra de título do navegador:

<title>

Em HTML as tags não são case-sensitive, ou seja, não existe a diferenciação entre letras maiúsculas e minúsculas. Porém, é recomendável que se siga um estilo comum ao escrever tags em um documento, para efeitos de clareza de código, como por exemplo sempre escrever as tags em letras minúsculas – que é o padrão que adoto nestes tutoriais.

A maioria das tags vem em pares: uma tag inicia um item de conteúdo da página (tag de início), e outra tag marca o fim desse conteúdo (tag de fechamento). No exemplo anterior, a tag de fechamento é a seguinte:

</title>

O caractere / define a tag de fechamento. Desta forma, poderíamos definir o título de uma página web assim:

<title>Bóson Treinamentos em Tecnologia</title>

Elementos

O conjunto apresentado na seção anterior compõe um Elemento, que é o bloco básico de construção de documentos html.

Um elemento é composto pelas tags de início e fim, mais seu conteúdo, que é o texto contido entre as tags.

Alguns elementos não necessitam da tag de fechamento, e não possuem conteúdo, como por exemplo a tag <br>, que marca uma quebra de linha em um documento. Esse elemento também pode ser representado como <br />, sendo essa representação opcional atualmente. Damos a esse tipo de elemento o nome de Elemento Vazio.

Atributos

A tag de início de um elemento html pode possuir atributos que fornecem mais informações sobre o elemento, como propriedades específicas ou formatação a ser aplicada sobre ele.

Um atributo consiste em um nome de atributo seguido de um valor de atributo, ligados por um sinal de igual (=), como no exemplo:

<th class="cabeçalho">Produto</th>

Neste exemplo a tag <th>, que define um cabeçalho de uma tabela, possui um atributo class cujo valor é igual a “cabeçalho“, o que permite a aplicação de estilos de formatação diferenciados a esse elemento.

O valor de um atributo deve, preferencialmente, ser declarado entre aspas, mesmo que alguns atributos não o exijam.

Um elemento pode ter mais de um atributo, ou pode simplesmente não usar atributo algum.

A partir do próximo tutorial vamos iniciar o estudo dos elementos html individuais, incluindo seus principais atributos.

O post Elementos, Tags e Atributos em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

Um formulário web é uma página (ou parte de uma página) que contém elementos usados para coletar informações fornecidas pelo usuário, como caixas de texto, listas de seleção de opções, checkboxes e botões de ação.

Um formulário é delimitado pelos marcadores <form> e </form>. Abaixo temos a sintaxe básica para criação de um formulário HTML simples:

• name é o nome do formulário, que pode ser usado para referenciá-lo em una função, por exemplo.
• action indica o script que deverá efetuar o processamento dos dados inseridos no formulário. Em nosso caso, será um script em PHP.
• method é o método de envio dos dados para o servidor web onde está o script de processamento. Pode ser GET ou POST.
• enctype permite definir o formato com que os dados serão codificados antes de serem enviados ao servidor http. Somente é válido quando o método de envio for POST.

Métodos GET e POST

Há duas formas que o navegador do cliente pode usar para enviar os dados do formulário ao servidor: GET e POST. Ao enviar as informações, o navegador as codifica usando um esquema denominado Codificação de URL (URL Encoding). Nesse esquema, os dados a serem enviados são agrupados em pares contendo um nome e um valor, separados por um caractere &.

Por exemplo, ao enviar dados de nome, sobrenome e idade de um usuário coletados de um formulário, esses dados seriam agrupados assim:

nome=Fabio&sobrenome=dos+Reis&idade=38

Note que é usado um caractere “+” no lugar do espaço entre as palavras “dos” e “Reis”; outros caracteres especiais são substituídos por valores hexadecimais. Após essa codificação, a informação é então enviada ao servidor usando um dos métodos citados.

O método de envio GET é limitado a 1024 caracteres no envio de dados, e o método POST não possui limite. Além disso, o método GET envia os dados anexados ao nome do script que foi passado para o parâmetro ACTION, sendo que esses dados (campos e valores) são posicionados após um caractere ? na barra de endereços do navegador, seguindo o nome do script.

Claramente esse método não é muito seguro, pois pode expor dados dos usuários durante o envio – por exemplo, uma senha pode ficar claramente visível ao usar esse método. Já no método POST os dados são enviados cabeçalhos HTTP da mensagem e, portanto, é mais seguro e é o método recomendado.

O PHP fornece um array associativo de nome $_POST que permite acessar os dados enviados usando o método POST.

Controles de Formulários HTML

Seguindo a tag <form> indicamos os dados que o usuário deve fornecer e o tipo de cada informação. Os dados são inseridos em elementos do formulário (controles), com o uso da tag <input>. A sintaxe para uso da tag <input> é a seguinte:

<input type=“tipo” name=“nome” value=“valor_inicial” size=“tamanho” maxlength=“caracteres” checked>

Os parâmetros da tag input são os seguintes:

• name: Identificação do campo.
• value: valor iniccial do campo; é opcional, exceto para os tipos CHECKBOX e RADIO
• size: tamanho do controle; para os tipos TEXT e PASSWORD indica o n° de caracteres que aparecem no campo
• maxlength: número máximo de caracteres que podem ser digitados no campo; válido somente para TEXT e PASSWORD.
• checked: define se um campo deve estar marcado inicialmente, sendo válido para os tipos CHECKBOX e RADIO.
• type: O parâmetro type define o tipo de campo a ser utilizado para entrada de dados.

Os principais tipos de controles são descritos a seguir:

• text: controle de texto de linha única
• password: caixa de senha.
• textarea: controle de texto multilinhas (multiline)
• checkbox: campo que permite escolher opções clicando em caixas de verificação
• radio: campo que permite escolher uma entre várias opções clicando em um botão de rádio
• hidden: campo que não é visível para o usuário, e que é usado para o envio de dados para o servidor sem que o usuário interfira
• submit: Botão de envio do formulário
• reset: Botão para “zerar” o formulário, limpando todos os campos e restaurando seus valores iniciais
• file: Campo usado para o envio de arquivos.
• select: Caixa de listagem drop-down que permite listar várias opções, das quais o usuário pode selecionar uma ou mais.

Vamos ver alguns exemplos do uso desses controles em um formulário HTML:

<!DOCTYPE html>
<html lang="pt=br">
<head>
 <title>Formulários Web e PHP</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<form name="cadastro" action="processa.php" method="POST" accept-charset='UTF-8'>
<label>Nome:</label>
 <input type="text" name="nome" size="30" placeholder="Digite seu nome aqui" autofocus /><br>
<label>Sobrenome:</label>
 <input type="text" name="sobrenome" size="50 placeholder="Digite seu sobrenome aqui"/><br>
<br>
<label>Senha:</label>
 <input type="password" name="senha" size=15 required><br>
<br>
Sexo: <br>
 <input type="radio" name="sexo" value="M"> Masculino<br>
 <input type="radio" name="sexo" value="F"> Feminino<br>
 <input type="radio" name="sexo" value="N"> Não Declarado<br>
 <br/>
 Marque as opções de seu interesse:<br/>
 <input type="checkbox" name="linguagens[]" value="ASP"> ASP.NET<br>
 <input type="checkbox" name="linguagens[]" value="JavaScript"> Javascript<br>
 <input type="checkbox" name="linguagens[]" value="PHP"> PHP<br>
 <input type="checkbox" name="linguagens[]" value="Python"> Python<br>
<br/>
Entre com seus comentários na caixa a seguir:<br>
<textarea rows="8" cols="50" name="comentarios"></textarea><br>

Selecione as tecnologias que deseja aprender: (Segure a tecla Ctrl para selecionar mais de uma tecnologia)<br/>
 <select name="tecnologias[]" multiple>
   <option value="ASP">ASP.NET</option>
   <option value="C" selected>Linguagem C</option>
   <option value="C++">C++</option>
   <option value="Java">Java</option>
   <option value="PHP">PHP</option>
   <option value="Python">Python</option>
   <option value="Ruby">Ruby</option>
 </select><br>
 <br>
Selecione um arquivo de seu computador para upload:<br>
 <input type="file" name="arquivo"/><br>
<br>
 <input type="submit" name="submit" value="Enviar" /><br>
 <input type="reset" name="reset" value="Resetar" /><br>
</form>

</body>
</html>

O código anterior produz a seguinte página web:

Ao clicarmos no botão Enviar os dados do formulário são enviados para processamento pelo script indicado  no parâmetro ACTION da  tag <form>. Em nosso exemplo, a página apresentará um erro, pois ainda não codificamos o script, de nome “processa.php“, mas é possível ver na barra de endereços do navegador o script sendo chamado:

É isso aí! Nesta lição revisamos a criação de formulários web simples para coleta de informações fornecidas pelo usuário. Na próxima lição vamos aprender a codificar o script PHP que vai receber essas informações e processá-las no servidor.

Até mais!

O post Curso de PHP – Trabalhando com Formulários HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.