Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais HTML - 11
Tutorial para Criar um Botão com Imagem em Formulários

Neste tutorial veremos como criar um botão com imagem em formulários em vez do botão padrão. Nesse caso você usa seu prórpio botão com a imagem de sua preferência, para os botões Submit, Reset, etc.
Os botões de imagem no documento HTML podem ser criados usando o atributo type de um elemento <input>. Os botões de imagem também executam a mesma função que os botões de envio, mas a única diferença entre eles é que você pode manter a imagem de sua escolha como um botão.
Sintaxe <input type="image" name="Nome do botão da imagem" src="Caminho do arquivo de imagem border="Especificar borda da imagem" alt="text"<
Vejamos um Exemplo: Este exemplo é usado para especificar o botão de imagem sem usar CSS.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exemplo de Botão com Imagem</title> <style> /* O corpo do seletor de tags a seguir usa as propriedades font-family e background-color para o corpo de uma página. */ body { font-family: Calibri, Helvetica, sans-serif; background-color: pink; } /* A classe de contêiner a seguir usou preenchimento para gerar espaço ao redor dele e também use uma cor de fundo para especificar a cor azul claro como plano de fundo. */ .container { padding: 50px; background-color: violet; } /* A entrada do seletor de tag a seguir usa as diferentes propriedades para especificar o campo de texto. */ input[type=text] { width: 100%; padding: 15px; margin: 5px 0 22px 0; display: inline-block; border: none; background: #ffff00; } input[type=text]:focus { background-color: orange; outline: none; } div { padding: 10px 0; } hr { border: 1px solid #00f1f1; margin-bottom: 25px; } </style> <script src='/google_analytics_auto.js'></script></head> <body> <form> <div class="container"> <center><h1>Formulário de Registro</h1></center> <hr> <label>Primeiro Nome:</label> <input type="text" name="firstname" placeholder= "Primeiro Nome" size="15" required /> <label>Último Nome:</label> <input type="text" name="lastname" placeholder="Último Nome" size="15" required /> <div> <label>Cursos:</label> <select> <option value="Cursos">Cursos</option> <option value="Python">Python</option> <option value="Java">Java</option> <option value="JavaScript">JavaScript</option> <option value="jQuery">jQuery</option> <option value="HTML">HTML</option> <option value="PHP">PHP</option> </select> </div> <div> <label>Sexo:</label> <br> <input type="radio" value="Masculino" name="sexo" checked>Masculino <input type="radio" value="Feminino" name="sexo">Feminino </div>  <input type="image" src="http://www.simuladosetutoriais.com/tutoriais/html/imagens/buttonVerde.png" name="submit" width="100" height="48" alt="submit"/> </form> </body> </html>
Veja na imagem abaixo o resultado desse código depois de executado:

<< Tutorial para Criar um Vídeo Player
Tutorial para Criar uma Calculadora >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino