Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

zetabyte00

O correto seria a tag <button>?

Recommended Posts

Não sei se essa é área correta do fórum.

 

Nesse site: http://www.curriculum.com.br/candidatos/vagas-emprego/

 

Para criar os botões "Login"  e "Cadastre-se", o desenvolvedor usou a marcação <a></a> ao invés de <button></button>. Isso é incorreto segundo às boas práticas de UI, certo?

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ambos funcionam, no caso do <button> você pode atribuir class/id;

<button id="stylebtn">Entrar</button>

Já no <a> você tem que criar um <spam> para atribuir uma classe.

Mas ambos funcionam.

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 11/09/2017 at 13:40, gianp disse:

Já no <a> você tem que criar um <spam> para atribuir uma classe.

 

@gianp, pode atribuir classes sim:

<a class="classe1 classe2" id="id1"> ... </a>

 

 

Em 11/09/2017 at 13:28, zetabyte00 disse:

Isso é incorreto segundo às boas práticas de UI, certo?

 

@zetabyte00 ... errado. UI é a interação da interface com o usuário, sendo com classes o id´s.

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Guilherme Luiz disse:

Depende da programação...

 

Tem muito programador que prefere utilizar LINKS ao inves de BUTTONS devido a maior facilidade de estilização, mas ambos podem ser utilizados para postar um formulario!

 

Outra dúvida relacionada, o correto é usar <button> ao invés <input type="button">. Pois, esta última, já está ultrapassada, estou correto?

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por 4Unknow
      Bom dia galera.

      Estou querendo colocar um botão flutuante em meu site que acompanhe quando rolar para baixo.
      Um botão que vou utilizar para suporte.

      Um exemplo de como gostaria abaixo:


       
      Fico grato.
    • Por Kefatif
      Prezados, boa tarde!
       
      Em uma tela faço o envio de arquivos PDF para uma pasta reservada para isso.
       
      Estou tendo dificuldade para criar um botão de download na tela de consultas, quando abro a página de consulta ele está me mostrando a seguinte mensagem: "Notice: Undefined variable: row in C:\xampp\htdocs\plataforma\indicadores\consultar.php on line 126"
       
      Podem me ajudar?
       
      <?php include_once 'autenticacao.php'; include_once'../conexao.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>Envio de Ata</title> <link href="../css/estilo.css" rel="stylesheet"> <!-- Bootstrap Core CSS --> <link href="../css/bootstrap.css" rel="stylesheet"> <!-- Custom CSS --> <link href="../css/modern-business.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <script src="../js/jquery.min.js"></script> </head> <body> <?php include_once 'nav-menu1.php'; ?> <!-- Page Content --> <div class="container" style="width: 90%"> <?php include_once 'cabecalho.php'; ?> <div class="row"> <?php include_once 'barra-lateral.php'; ?> <!-- Content Column --> <div class="col-md-9" style="width: 80%"> <h4><b>CONSULTAR UNIDADE</b></h4> <form class="form-inline" action="consultar.php" autocomplete="off" method="get"> <div id="form-callcenter"> <label style="width: 30%"> <input type="text" name="nome" class="form-control" placeholder="Digite o nome da unidade" style="width: 100%"> </label> <input type="submit" readonly value="Pesquisar" class="btn btn-primary"> </div> </form> <?php if (isset($_GET["nome"]) ) { $nome = $_GET["nome"]; include_once '../funcoes.php'; $sql = "select A.dt_envio, A.unidade, A.responsavel, A.observacao, A.anexo from controle_ata A where A.unidade like '%".$nome."%' order by A.dt_envio desc"; $result = mysqli_query($con, $sql); if (mysqli_num_rows($result) > 0) { ?> <table class="table table-hover table-bordered" id="tabela-dispensacao2"> <tr> <th>Unidade</th> <th>Data do envio</th> <th>Responsável</th> <th>Observação</th> <th>Ata</th> <th>Download</th> </tr> <?php if($row["anexo"] == ''){ $cor = "red"; }else{ $cor = "blue"; } while ($row = mysqli_fetch_array($result)){ foreach($row as $key => $values){ $row[$key]= utf8_encode($values); } ?> <tr> <td><?php echo $row["unidade"]?></td> <td><?php echo dataTela($row["dt_envio"]); ?></td> <td><?php echo $row["responsavel"]; ?></td> <td><?php echo $row["observacao"] ?></td> <td><?php echo $row["anexo"] ?></td> <td><a class="<?php if($row["ANEXO"] == ''){echo "link-nao-ativo";}?>" href='anexos/<?php echo $row["ANEXO"] ?>' target="_blank"> <i style="color:<?php echo $cor ?>" class="glyphicon glyphicon-download-alt"></i> </a> </td> </tr> <?php }//ENCERRANDO O WHILE ?> </table> <?php }else{ echo "Nenhuma unidade encontrada!<br>"; } } ?> <?php mysqli_close($con); ?> </div> </div> <!-- /.row --> </div> <!-- /.container --> <!-- jQuery --> <script src="../js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="../js/bootstrap.min.js"></script> </body> </html>  
       
      Agradeço a ajuda desde já!
    • Por 4Unknow
      Boa noite comunidade da Imasters, como vocês estão?

      Pessoal peguei um botão responsivo com popup, mas não consigo adicionar mais dele um do lado do outro.
      Vou deixar o conteúdo dele aqui se alguém puder me dar uma luz. Só queria copiar ele para adicionar mais dois botões um ao lado do outro.

      Quem puder me ajudar, ficaria agradecido.

      segue código:

      index.html:
       
      <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Alterações Robô Everest</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <h1> Configurações Robô Everest </h1> <h2> Data: 14/04/2021</h2> <button type="button" class="main-btn-rect popup-btn" data-popup="popup-reg">Modo Agressivo</button> <div id="popup-reg" class="popup"> <div class="popup-content"> <div class="event-header"> <h6>Don't be shy, say hi!</h6> </div> Stop Loss: 255<br> Stop Gain: 30<br><br> Ou a seu gosto!<br><br> Desvio Envelope: 0.12<br><br> Pausas nas operações: 10:00,11:00,10:30,12:30<br> <span class="fade-out main-btn-circle">╳</span> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
      script.js:
       
      $(document).ready(function(){ $('.popup-btn').click(function(){ var popupBlock = $('#'+$(this).data('popup')); popupBlock.addClass('active') .find('.fade-out').click(function(){ popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px'); setTimeout(function(){ $('.popup').removeClass('active'); popupBlock.css('opacity','').find('.popup-content').css('margin-top',''); }, 600); }); }); });
      style.css:
       
      @import url('https://fonts.googleapis.com/css?family=Lobster'); @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ margin: 0; padding: 0; height: 100vh; font-family: 'RobotoLight', sans-serif; border-bottom: 1px solid #FFFFF0; background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); overflow: hidden; } button { text-decoration: none; border: none; } h1 { position: absolute; display: inline-table; top: 20%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFFFF0; } h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; text-align: center; color: #FFFFF0; } .popup-btn{ position: absolute!important; top: 55%; left: 50%; transform: translate(-50%,-50%); } .main-btn-rect, .main-btn-circle{ position: relative; margin: 0; font-family: 'Roboto', sans-serif; color: #FFFFF0; background-color: rgb(252, 79, 79); text-transform: uppercase; font-size: 25px; letter-spacing: 1px; outline: none; cursor: pointer; z-index: 100; } .main-btn-rect { padding: 10px 80px; line-height: 30px; } .main-btn-rect:before, .main-btn-rect:after{ position: absolute; content: ''; top:0; width: 0%; height: 100%; background-color: rgba(255, 255, 240, 0.2); -webkit-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .main-btn-rect:before { left: 0; } .main-btn-rect:after { right: 0; } .main-btn-rect:hover:before, .main-btn-rect:hover:after{ width: 50%; } .main-btn-circle{ height: 40px; width: 40px; -webkit-border-radius: 50%; border-radius: 100%; line-height: 40px; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .main-btn-circle:hover{ -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); } .popup{ position: fixed; top: 100%; width: 100%; height: 100%; z-index: 10001; } .popup.active{ top:0; background-color: rgba(3, 3, 3, 0.98); transition: background-color .6s ,opacity .6s; } .popup .main-btn-rect{ padding: 10px 100px; } .popup .popup-content{ position: absolute; top: 50%; left: 50%; max-height: 568px; min-width: 320px; margin-top: 150px; padding: 25px; background-color: #FFFFF0; color: #070000; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: margin .6s; -webkit-transition: margin .6s; -moz-transition: margin .6s; -o-transition: margin .6s; } .popup.active .popup-content{ margin-top: 0px; } .popup-content h6{ display: table; font-size: 16px; text-align: center; margin: 10px auto; font-family: 'Roboto',sans-serif; text-transform: uppercase; font-weight: 100; } .form-group{ position: relative; width: 90%; margin: 0px auto; } form#send input, form#send textarea{ position: relative; margin-bottom: 32px; width: 100%; height: 29px; font-family: 'RobotoLight', sans-serif; text-indent: 20px; background-color: transparent; outline: 0; border: none; border-bottom: 1px solid #070000; -webkit-transition: border 0.6s; -o-transition: border 0.6s; transition: border 0.6s; } form#send input:focus, form#send textarea:focus{ border-bottom: 1px solid rgb(63, 173, 168); } form#send label{ position: absolute; top: 0; line-height: 28px; -webkit-transition: color .5s; -o-transition: color .5s; transition: color .5s; } form#send input:focus + label, form#send textarea:focus + label{ color: rgb(63, 173, 168); } form#send .txt{ line-height: 22px; left: 2px; } form#send .main-btn-rect { position: relative; display: block; padding: 12px 80px; margin: 0px auto; font-size: 14px; } form#send .main-btn-rect i { margin-right: 5px; } .popup .fade-out{ position: absolute; top: -20px; right: -20px; text-align: center; font-size: 15px; } .share-wrap{ position: absolute; display: inline-table; top: 67%; left: 50%; transform: translate(-50%, -50%); padding: 15px; text-align: center; } .share-btn{ color: #FFFFF0; padding: 7px 25px; text-decoration: none; cursor: pointer; font-weight: 100; font-size: 14px; font-family:'Lobster', sans-serif; background-color: rgba(63, 173, 168, .8); text-transform: uppercase; border-radius: 5px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .share-btn:hover{ color: #FFFFF0; text-decoration: none; background-color: rgba(63, 173, 168, 1.0); } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 2px; } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 6px 9px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } .resp-sharing-button__icon, .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--linkedin { background-color: #0077b5; border-color: #0077b5; } .resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; } @media only screen and (max-width: 768px){ h1 {font-size: 25px;} h2 {font-size: 14px;} form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;} .popup-btn{padding: 7px 60px; font-size: 14px;} } Tentei copiar o código do index.html mas não aparece os outros botões.
      Puderem me ajudar agradeço.

      Um abraço.
    • Por fideles
      Fala pessoal, como anda as coisas?
       
      Meu conhecimento em JS e quase neutro, conheço algo, mais talvez não o suficiente para o que eu precise, por isso venho pedir ajuda a vocês,
       
      Tenho um pequeno programinha, simples mesmo que tem 4 areas (Administração, Compras, Financeiro, Almoxarifado).
       
      Quem fica na ADM solicita algo,  compras visualiza e da um "ok" e o financeiro tbm tem que dar um "ok" e no final, o almoxarifado dá um "Processo Concluido" (está parte está ok, funcionando, sem erro)
       
      Meu problema seria que quem está no almoxarifado consegue clicar no botão "Processo Concluido" mesmo o pessoal de compras e financeiro não dando um "ok" na solicitação ou ele tbm consegue dar "Processo Concluido" se um ou outro dar um "ok". Precisaria que ele so conseguisse dar "Processo Concluido" se os dois darem o "ok", se so um dar "ok" ele não pode dar "Processo Concluido".
       
      Alguém consegue pelo menos me dar um norte para que eu possa dar continuidade? Já tentei em PHP e nada.
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.