santiagosilas · March 12, 2026 10:01
diff --git a/form-and-table.html b/form-and-table.html
 <!DOCTYPE html>
 <html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./style.css">
    <meta 
      name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cadastro de Produto</title>
  </head>
  <body>
    <main>
      <h1>Cadastro de Produto</h1>
  
      <form action="#" method="post" enctype="multipart/form-data">
          
          <!-- Informações Básicas -->
          <fieldset>
              <legend>Informações Básicas</legend>
               <label for="nome">Nome do Produto:</label><br>
              <input 
                     type="text" 
                     id="nome" 
                     placeholder="Digite o nome" 
                     name="nome" 
                     value="XYZ" 
                     required>
              <br>
  
              <label for="codigo">Código Interno:</label><br>
              <input 
                     type="text" 
                     id="codigo" 
                     name="codigo" 
                     value="GERADO-AUTO" 
                     readonly><br>      
            
              <label for="marca">Marca:</label><br>
              <input list="marcas" 
                     id="marca" 
                     name="marca" 
                     placeholder="Escolha ou digite" value="Avell">
              <datalist id="marcas">
                <option value="Dell">
                <option value="Samsung">
                <option value="HP">
              </datalist><br>          
            
            <label for="dataFabricacao">Data de Fabricação:</label><br>
            <input 
              type="date" 
              id="dataFabricacao"
              name="dataFabricacao">
            <br>
            <label for="categoria">Categoria:</label><br>
            <select id="categoria" name="categoria">
                  <option value="">Selecione</option>
                  <option value="notebook">Notebook</option>
                  <option value="monitor">Monitor</option>
                  <option value="teclado">Teclado</option>
                  <option value="mouse">Mouse</option>
                  <option value="impressora">Impressora</option>
            </select><br>
  
              <label for="descricao_curta">Descrição Curta:</label><br>
              <textarea id="descricao_curta" name="descricao_curta" rows="3" cols="30" placeholder="Descreva o produto"></textarea><br><br>
            
          </fieldset>
  
          <!-- Especificações Adicionais -->
          <fieldset>
              <legend>Especificações Adicionais</legend>
  
              <label for="cor">Cor:</label>
              <input type="color" id="cor" name="cor"><br><br>
  
              <label for="peso">Peso (kg):</label><br>
              <input type="number" id="peso" name="peso" step="0.01"><br><br>
  
            <label for="avaliacao">Avaliação do Produto:</label>
            <input type="range" id="avaliacao" name="avaliacao" min="0" max="5"><br>
            
            <label for="siteFabricante">Site do Fabricante:</label>
            <input type="url" id="siteFabricante" name="siteFabricante" placeholder="https://"><br>
            
            <label for="telFabricante">Telefone do Fabricante:</label>
            <input type="tel" id="telFabricante" name="telFabricante"><br>
            
          </fieldset>
  
          <!-- Preço e Estoque -->
          <fieldset>
              <legend>Preço e Estoque</legend>
  
              <label for="preco_venda">Preço de Venda (R$):</label>
              <input type="number" id="preco_venda" name="preco_venda" step="0.01"><br><br>
  
              <label for="desconto">Desconto (%):</label><br>
              <input type="number" id="desconto" name="desconto" min="0" max="20"><br><br>
  
              <label for="estoque">Quantidade em Estoque:</label>
              <input type="number" id="estoque" name="estoque" min="0"><br><br>
  
              <label>
                  <input type="checkbox" name="disponivel" value="sim">
                  Produto Disponível para Venda
              </label><br><br>
            
            <p>Tipo de Produto:</p>
  
            <label>
              <input type="radio" name="tipo" value="fisico">
              Físico
            </label>
  
            <label>
              <input type="radio" name="tipo" value="digital">
              Digital
            </label>
            
            
          </fieldset>
          
          <fieldset>
              <legend>Imagens e Arquivos</legend>
  
              <label for="imagem_principal">Imagem Principal:</label>
              <input type="file" id="imagem_principal" name="imagem_principal" accept="image/*"><br><br>
  
              <label for="galeria">Galeria de Imagens:</label> 
              <input type="file" id="galeria" name="galeria" accept="image/*" multiple><br><br>
  
              <label for="manual">Manual do Produto (PDF):</label>
              <input type="file" id="manual" name="manual" accept="application/pdf"><br><br>
  
          </fieldset>
          <input type="hidden" name="id_produto" value="123">
          <br>
          <button type="submit">Salvar Produto</button>
          <button type="reset">Limpar Formulário</button>
        
      </form>      
    </main>

    <aside>
      <table>
      <thead>
        <tr>
          <th>Produto</th>
          <th>Categoria</th>
          <th>Preço</th>
        </tr>
      </thead>
    
      <tbody>
        <tr>
          <td>Notebook</td>
          <td>Eletrônicos</td>
          <td>R$ 3500</td>
        </tr>
    
        <tr>
          <td>Mouse</td>
          <td>Acessórios</td>
          <td>R$ 80</td>
        </tr>
    
        <tr>
          <td>Teclado</td>
          <td>Acessórios</td>
          <td>R$ 150</td>
        </tr>
      </tbody>
    </table>
    </aside>

    <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" class="picture">
    
    <script src="./script.js"></script>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./style.css">
	<meta
	name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Cadastro de Produto</title>
	</head>
	<body>
	<main>
	<h1>Cadastro de Produto</h1>

	<form action="#" method="post" enctype="multipart/form-data">

	<!-- Informações Básicas -->
	<fieldset>
	<legend>Informações Básicas</legend>
	<label for="nome">Nome do Produto:</label><br>
	<input
	type="text"
	id="nome"
	placeholder="Digite o nome"
	name="nome"
	value="XYZ"
	required>
	<br>

	<label for="codigo">Código Interno:</label><br>
	<input
	type="text"
	id="codigo"
	name="codigo"
	value="GERADO-AUTO"
	readonly><br>

	<label for="marca">Marca:</label><br>
	<input list="marcas"
	id="marca"
	name="marca"
	placeholder="Escolha ou digite" value="Avell">
	<datalist id="marcas">
	<option value="Dell">
	<option value="Samsung">
	<option value="HP">
	</datalist><br>

	<label for="dataFabricacao">Data de Fabricação:</label><br>
	<input
	type="date"
	id="dataFabricacao"
	name="dataFabricacao">
	<br>
	<label for="categoria">Categoria:</label><br>
	<select id="categoria" name="categoria">
	<option value="">Selecione</option>
	<option value="notebook">Notebook</option>
	<option value="monitor">Monitor</option>
	<option value="teclado">Teclado</option>
	<option value="mouse">Mouse</option>
	<option value="impressora">Impressora</option>
	</select><br>

	<label for="descricao_curta">Descrição Curta:</label><br>
	<textarea id="descricao_curta" name="descricao_curta" rows="3" cols="30" placeholder="Descreva o produto"></textarea><br><br>

	</fieldset>

	<!-- Especificações Adicionais -->
	<fieldset>
	<legend>Especificações Adicionais</legend>

	<label for="cor">Cor:</label>
	<input type="color" id="cor" name="cor"><br><br>

	<label for="peso">Peso (kg):</label><br>
	<input type="number" id="peso" name="peso" step="0.01"><br><br>

	<label for="avaliacao">Avaliação do Produto:</label>
	<input type="range" id="avaliacao" name="avaliacao" min="0" max="5"><br>

	<label for="siteFabricante">Site do Fabricante:</label>
	<input type="url" id="siteFabricante" name="siteFabricante" placeholder="https://"><br>

	<label for="telFabricante">Telefone do Fabricante:</label>
	<input type="tel" id="telFabricante" name="telFabricante"><br>

	</fieldset>

	<!-- Preço e Estoque -->
	<fieldset>
	<legend>Preço e Estoque</legend>

	<label for="preco_venda">Preço de Venda (R$):</label>
	<input type="number" id="preco_venda" name="preco_venda" step="0.01"><br><br>

	<label for="desconto">Desconto (%):</label><br>
	<input type="number" id="desconto" name="desconto" min="0" max="20"><br><br>

	<label for="estoque">Quantidade em Estoque:</label>
	<input type="number" id="estoque" name="estoque" min="0"><br><br>

	<label>
	<input type="checkbox" name="disponivel" value="sim">
	Produto Disponível para Venda
	</label><br><br>

	<p>Tipo de Produto:</p>

	<label>
	<input type="radio" name="tipo" value="fisico">
	Físico
	</label>

	<label>
	<input type="radio" name="tipo" value="digital">
	Digital
	</label>


	</fieldset>

	<fieldset>
	<legend>Imagens e Arquivos</legend>

	<label for="imagem_principal">Imagem Principal:</label>
	<input type="file" id="imagem_principal" name="imagem_principal" accept="image/*"><br><br>

	<label for="galeria">Galeria de Imagens:</label>
	<input type="file" id="galeria" name="galeria" accept="image/*" multiple><br><br>

	<label for="manual">Manual do Produto (PDF):</label>
	<input type="file" id="manual" name="manual" accept="application/pdf"><br><br>

	</fieldset>
	<input type="hidden" name="id_produto" value="123">
	<br>
	<button type="submit">Salvar Produto</button>
	<button type="reset">Limpar Formulário</button>

	</form>
	</main>

	<aside>
	<table>
	<thead>
	<tr>
	<th>Produto</th>
	<th>Categoria</th>
	<th>Preço</th>
	</tr>
	</thead>

	<tbody>
	<tr>
	<td>Notebook</td>
	<td>Eletrônicos</td>
	<td>R$ 3500</td>
	</tr>

	<tr>
	<td>Mouse</td>
	<td>Acessórios</td>
	<td>R$ 80</td>
	</tr>

	<tr>
	<td>Teclado</td>
	<td>Acessórios</td>
	<td>R$ 150</td>
	</tr>
	</tbody>
	</table>
	</aside>

	<img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" class="picture">

	<script src="./script.js"></script>
	</body>
	</html>
No results found