Foros del Web » Creando para Internet » HTML »

Hacer formulario para añadir datos a un código HTML

Estas en el tema de Hacer formulario para añadir datos a un código HTML en el foro de HTML en Foros del Web. Lo que quiero saber es cómo hacer un formulario pidiendo una serie de datos, y al hacer click en un botón, llamemosle, "Crear", salga un ...
  #1 (permalink)  
Antiguo 18/02/2007, 18:02
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 13 años, 5 meses
Puntos: 1
Hacer formulario para añadir datos a un código HTML

Lo que quiero saber es cómo hacer un formulario pidiendo una serie de datos, y al hacer click en un botón, llamemosle, "Crear", salga un código HTML con los datos que el usuario ha añadido.

Por ejemplo: Digamos que quiero dar la posibilidad al usuario de crear un link mediante tabla.

En el formulario pediría en cuadros de texto los siguientes datos:

-URL de destino
-Texto del enlace
-Color del borde de la tabla
-Color de fondo predeterminado de la tabla
-Color para efecto OnMouseOver
-Color para efecto OnMouseOut

Código HTML:
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#color_borde" width="100%" id="AutoNumber1">
  <tr>
    <td background="#color_fondo" onmouseover = "this.style.background='#color_over" onmouseout = "this.style.background='#color_out'" onclick = "location='URL_destino'" style="cursor: hand;" width="100%">
    <table border="0" cellpadding="0" cellspacing="3" style="border-collapse: collapse" width="100%" id="AutoNumber2">
      <tr>
        <td width="100%">Texto del enlace</td>
      </tr>
    </table>
    </td>
  </tr>
</table> 
¿Cómo hago para que cuando el usuario rellene los datos del formulario y le de al botón "Crear" aparezca en un área de texto este código pero con los datos que el usuario ha dado anteriormente?

Muchas gracias de antemano.

Cita:
Creo que el post debería estar en la sección "JavaScript" mas bien que en ésta. Cometí el error de publicarlo aquí y ahora no se puede mover ni eliminar personalmente.

Última edición por eMx; 18/02/2007 a las 18:17 Razón: Cometí un error en la definición de la duda.
  #2 (permalink)  
Antiguo 18/02/2007, 22:40
Avatar de jaquez  
Fecha de Ingreso: noviembre-2006
Mensajes: 123
Antigüedad: 11 años
Puntos: 0
Re: Hacer formulario para añadir datos a un código HTML

es con PHP
  #3 (permalink)  
Antiguo 19/02/2007, 13:27
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Re: Hacer formulario para añadir datos a un código HTML

No necesariamente aunque creo que igiual es mas comlicada mi idea. Podrias hacer mediante javascript que cogiera esos datos que el usuario da y meterlos en variables y luego formatear las partes del codigo html para sustituirlo por lo que el usuario ha dado.

Tendrias que tener almacenado el codigo a sustituir en un archivo pero seguramente si lo haces en php sea mas facil.
  #4 (permalink)  
Antiguo 19/02/2007, 14:57
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 11 años
Puntos: 36
Re: Hacer formulario para añadir datos a un código HTML

Hola eMx, he hecho el siguiente codigo, espero que te sirva:

Código HTML:
<html>

<head>

<SCRIPT language=JavaScript>

			function build_it(form) {



			form.generar_codigo.value='';



			    if (form.input1.value != "") {

                                                  if (form.input2.value != "") {

                                                     if (form.input3.value != "") {

                                                        if (form.input4.value != "") {

                                                           if (form.input5.value != "") {

                                                              if (form.input6.value != "") {







                                                 form.generar_codigo.value = "<table border=\"1\" cellpadding=\"0\" cellspacing=\"0\" style=\"border-collapse: collapse\" bordercolor=\""  +

			      form.input1.value+"\""  +

                                                 form.generar_codigo.value + " width=\"100%\">\n"  +

                                                 form.generar_codigo.value + "<tr>\n"  +

                                                 form.generar_codigo.value + "<td background=\""  +



			      form.input2.value+"\" onmouseover = \"this.style.background='"  +

                                                 form.input3.value+"'\" onmouseout = \"this.style.background='"  +

                                                 form.input4.value+"'\" onclick = \"location='" +

                                                 form.input5.value+"'\" style=\"cursor: hand;\" width=\"100%\">\n" +

                                                 form.generar_codigo.value + "<table border=\"0\" cellpadding=\"0\" cellspacing=\"3\" style=\"border-collapse: collapse\" width=\"100%\">\n<tr>\n<td width=\"100%\">"  +

                                                 form.input6.value+"<\/td>\n</tr>\n</table>\n</td>\n</tr>\n</table>\n" ;

            

}	

}

}

}

}

}		    

}



</SCRIPT>



</head>



<form name="generar_codigo">



<p>Color del borde de la tabla<input size=15 name=input1></p>



<p>Color de fondo predeterminado de la tabla<input size=15 name=input2></p>



<p>Color para efecto OnMouseOver<input size=15 name=input3></p>



<p>Color para efecto OnMouseOut<input size=15 name=input4></p>



<p>URL de destino<input size=15 name=input5></p>



<p>Texto del enlace<input size=15 name=input6></p>



<input onClick="build_it(this.form)" type="button" value="Generar Codigo" name="button">



<input type="reset" value="Limpiar" name="reset">



<textarea name="generar_codigo" rows=12 cols=45></textarea>



<input onClick=form.generar_codigo.focus();form.generar_codigo.select(); type=button value="Seleccionar Codigo" name=grab>



</form>

                  





</body>

</html> 

Para que te aparezca el codigo generado tienen que estar completadas todos los input de texto, sino el codigo no se va a mostrar.

Si te queda alguna duda decime

Última edición por hgp147; 19/02/2007 a las 16:34 Razón: Arreglado
  #5 (permalink)  
Antiguo 19/02/2007, 15:40
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 13 años, 5 meses
Puntos: 1
Re: Hacer formulario para añadir datos a un código HTML

Buenas hgp174. Tanto el boton "Limpiar" como el "Seleccionar código" funcionan. Me falla a la hora de darle a "Generar código" ¿sabes? No se cual puede ser el problema. Relleno todos los datos le doy a Generar código pero no aparece nada en el área de texto :S.
  #6 (permalink)  
Antiguo 19/02/2007, 15:42
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Re: Hacer formulario para añadir datos a un código HTML

Lo probe yo ahora y me funciona perfecto.
  #7 (permalink)  
Antiguo 19/02/2007, 15:57
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 13 años, 5 meses
Puntos: 1
Re: Hacer formulario para añadir datos a un código HTML



Lo pongo tal cual el código, lo pruebo y nada :S
  #8 (permalink)  
Antiguo 19/02/2007, 16:14
Avatar de Aimarejada  
Fecha de Ingreso: abril-2006
Mensajes: 212
Antigüedad: 11 años, 8 meses
Puntos: 0
Re: Hacer formulario para añadir datos a un código HTML

Yo lo probe con el pspad y me funciona todo bien.

Con que lo estas mirando?
  #9 (permalink)  
Antiguo 19/02/2007, 16:18
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 11 años
Puntos: 36
Re: Hacer formulario para añadir datos a un código HTML

Entra aca http://hgp147.ifastnet.com/ejemplo.htm
y copia el codigo fuente. Este funciona bien
  #10 (permalink)  
Antiguo 19/02/2007, 17:59
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 13 años, 5 meses
Puntos: 1
Re: Hacer formulario para añadir datos a un código HTML

Que extraño... :S Copiando el código fuente sí que me funciona. No me funcionaba cuando lo copie de ahí.

Pues tío, hgp147. No se como darte mis mas sinceras grácias. De programación poco pero de diseño gráfico si que se me da bien, si alguna vez te puedo ayudar para diseñarte cualquier cosa, un cartelillo, un logo o incluso una plantilla web, no dudes en decirmelo tio ;)

Gracias tambien al resto por su ayuda y aportación ;)

Una última duda, si solo quiero pedir el "URL de destino" y "Texto del enlace" y el resto que ya este puesto por mí, es decir que lo que es la tabla ya este entera diseñada, y solo tenga que poner el nombre del link y la url y ya le salga una tabla con enlace prediseñada por mí. ¿Qué quito o como lo modifico? Lo he intentado borrando los inputs pero me falla :S. Disculpen mi torpeza...

Salu2

Última edición por eMx; 19/02/2007 a las 18:36
  #11 (permalink)  
Antiguo 20/02/2007, 11:00
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 11 años
Puntos: 36
Re: Hacer formulario para añadir datos a un código HTML

Hola eMx:
De nada, entra a esta pagina que ya tiene el codigo que necesitas http://hgp147.ifastnet.com/ejemplo2.htm

Quizas puedas ayudarme con el diseño del logo de mi pagina que nose como hacerlo, no se mucho de diseño

Si tenes que hacer otro codigo usa este ejemplo:
Código:
<SCRIPT language=JavaScript>

function build_it(form) {
form.nombreformulario.value='';

  if (form.input1.value != "") {
     if (form.input2.value != "") {

form.nombreformulario.value = "  PONE LO QUE QUERES QUE APAREZCA  "  +
form.input1.value + " PONE LO QUE QUERES QUE APAREZCA " +
form.input2.value + " PONE LO QUE QUERES QUE APAREZCA " ;      
    
    }   
  }
}
</SCRIPT>
Para crear un salto de linea pone \n
Antes de poner " o / tenes que poner \ , quedando asi "\ y asi \/
Solamente en la primera linea despues de form.nombreformulario.value tenes que poner =
En la ultima linea tenes que poner ;
Y para unir los valores utiliza +

Si te queda alguna duda de como hacerlo decime

Última edición por hgp147; 20/02/2007 a las 11:11
  #12 (permalink)  
Antiguo 21/02/2007, 13:58
eMx
 
Fecha de Ingreso: julio-2004
Mensajes: 54
Antigüedad: 13 años, 5 meses
Puntos: 1
Re: Hacer formulario para añadir datos a un código HTML

Creo que no tengo más dudas, las has solucionado todas :)

Pues encantado te hago el logo. Dime de que va la web para hacerlo de una forma u otra. También avisame si ya tienes la plantilla de la web echa para que me des el tamaño en el que querrías el logo en pixeles.

Salu2 y mil gracias!!
  #13 (permalink)  
Antiguo 23/02/2007, 11:11
Avatar de hgp147  
Fecha de Ingreso: diciembre-2006
Ubicación: Buenos Aires, Argentina
Mensajes: 980
Antigüedad: 11 años
Puntos: 36
Re: Hacer formulario para añadir datos a un código HTML

Hola eMX
Te envie un mensaje privado con las caracteristicas que quiero para el logo.
Gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:23.