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