« anterior próximo »
Páginas: [1]

Autor Tema: HTML ejemplo botón de envío formulario con imagen type image CU00724B button  (Leído 6269 veces)

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
HTML ejemplo botón de envío formulario con imagen type image CU00724B button
« en: 21 de Mayo 2015, 00:08 »
Buenas tardes!

Vengo a resolver el ejercicio °24 del curso "html desde 0", cuyo enunciado dice así:

Citar
Crea una página web que contenga dos formularios que cumplan estas condiciones.

Como título antes del primer formulario debe figurar con etiquetas h1 el texto <<Inscripción al concurso Saber y Ganar>>. Debe contener:

a) Nombre
b) Apellidos
c) email
d) Teléfono
e) Un botón submit para enviar que muestre el texto <<¡¡¡Me apunto!!!>> y un botón reset para restablecer que muestre el texto <<Cancelar>>.


Como título antes del segundo formulario debe figurar con etiquetas h1 el texto “Petición de información”. Debe contener:
a) Nombre
b) País
c) email
d) Consulta que se quiere realizar (debe ser un textarea que permita escribir múltiples líneas).
e) Un botón para enviar de tipo imagen y un botón para restablecer de tipo button que muestre dentro del botón lo siguiente: <<Pulse aquí para cancelar>>, un salto de línea, y el texto <<Esto borrará los datos>>.


Bueno, aquí el código:

Código: [Seleccionar]
<! DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>Concurso Saber y Ganar!</title></head>
<body style="background-color: Lavender;">
<h1 style="color: green; font-family: Verdana; text-align: center;">Inscripcion al concurso saber y ganar!</h1>
<form>
Nombre <input name="nombre" id="nombre" type="text"/>
<br></br>
Apellidos <input name="apellido" id="apellido" type="text"/>
<br></br>
Email <input name="email" id="email" type="text"/>
<br></br>
Teléfono <input name="telefono" id="telefono" type="text"/>
<br></br>
<button type="submit">¡¡¡Me apunto!!!</button> <button type="reset">Cancelar</button>
</form>
<h1 style="color: red; font-family: Verdana; text-align: center;">Peticion de información</h1>
<form>
Nombre <input name="nombres" id="nombres" type="text"/>
<br></br>
País <input name="nombres" id="nombres" type="text"/>
<br></br>
Email <input name="nombres" id="nombres" type="text"/>
<br></br>
Consulta que desea realizar
<br></br>
<textarea cols=30 rows=5>Escriba aqui...</textarea>
<br></br>
<input name="envio" type="image" width=130 height=30 src="http://www.simplespasos.com/images/contacto/boton_enviar.png"/>
<br></br>
<button type="reset">Pulse aqui para cancelar</br>Esto borrara los datos</button>
</form>
</body>
</html>

No se preocupen, lo de poner imagenes al boton lo hice de las dos formas... de internet, tanto PC.. pero por motivos de privacidad, decidi colocarlo por internet aqui ...

Asi es como se ve:


Espero sus comentarios! gracias..
« Última modificación: 21 de Mayo 2015, 08:57 por Alex Rodríguez »
En línea
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:HTML ejemplo botón de envío formulario con imagen type image CU00724B button
« Respuesta #1 en: 21 de Mayo 2015, 09:00 »
Hola de nuevo!

Los comentarios:

Lo mismo que te ocurrió en el ejercicio anterior aquí tienes un formulario sin method y sin action, lo que significa que el formulario no se sabe cómo va ni a dónde va, con lo cual nunca llegaría a ningún sitio (esto habría que corregirlo).

Luego en algunas líneas faltan comillas

<textarea cols=30 rows=5> mejor incluyendo las comillas cols="30" rows="5"

Aquí lo mismo type="image" width=130 height=30 mejor como width="130" height="30"

Y un error

Código: [Seleccionar]
Nombre <input name="nombres" id="nombres" type="text"/>
<br></br>
País <input name="nombres" id="nombres" type="text"/>
<br></br>
Email <input name="nombres" id="nombres" type="text"/>
Tienes repetidos los name nombres y id nombres, esto debe ser un despiste pero se ve cuando pulsas enviar que aparece nombres en la url por todos lados


Lo más importante es que no cometas fallos al construir los formularios porque le falten partes (botón de envío, method, action, etc.)

Saludos
En línea

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Re:HTML ejemplo botón de envío formulario con imagen type image CU00724B button
« Respuesta #2 en: 21 de Mayo 2015, 13:28 »
En efecto, fue un despiste grave... lo que pasa es que copie y pegue esas lineas para ahorrarme tiempo pero un video de internet me distrajo  ::)

Código: [Seleccionar]
<! DOCTYPE HTML>
<html>
<head><meta charset="utf-8"><title>Concurso Saber y Ganar!</title></head>
<body style="background-color: Lavender;">
<h1 style="color: green; font-family: Verdana; text-align: center;">Inscripcion al concurso saber y ganar!</h1>
<form method="get" action="http://aprenderaprogramar.com">
Nombre <input name="nombre" id="nombre" type="text"/>
<br></br>
Apellidos <input name="apellido" id="apellido" type="text"/>
<br></br>
Email <input name="email" id="email" type="text"/>
<br></br>
Teléfono <input name="telefono" id="telefono" type="text"/>
<br></br>
<button type="submit">¡¡¡Me apunto!!!</button> <button type="reset">Cancelar</button>
</form>
<h1 style="color: red; font-family: Verdana; text-align: center;">Peticion de información</h1>
<form method="get" action="http://aprenderaprogramar.com">
Nombre <input name="nombres" id="nombres" type="text"/>
<br></br>
País <input name="pais" id="pais" type="text"/>
<br></br>
Email <input name="email" id="email" type="text"/>
<br></br>
Consulta que desea realizar
<br></br>
<textarea cols=30 rows=5>Escriba aqui...</textarea>
<br></br>
<input name="envio" type="image" width="130" height="30" src="http://www.simplespasos.com/images/contacto/boton_enviar.png"/>
<br></br>
<button type="reset">Pulse aqui para cancelar</br>Esto borrara los datos</button>
</form>
</body>
</html>
Por cierto, ¿Los valores de los atributos siempre van entre comillas?
En línea
"Luchar por tus sueños y cumplirlos... eso es vivir.."

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:HTML ejemplo botón de envío formulario con imagen type image CU00724B button
« Respuesta #3 en: 21 de Mayo 2015, 20:36 »
Hola, por norma general sí aunque siempre puede haber alguna excepción... (como en todo)  ::)
En línea

Dan_SB

  • Avanzado
  • ****
  • Mensajes: 273
  • *<DanielsCK>*
    • Ver Perfil
Re:HTML ejemplo botón de envío formulario con imagen type image CU00724B button
« Respuesta #4 en: 22 de Mayo 2015, 00:02 »
Lo suponía... por ahora colocare todo entre comillas, ustedes me dirán que no va! xD

Gracias!  :D
En línea
"Luchar por tus sueños y cumplirlos... eso es vivir.."
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".