Descargar este script +   « Regresar

		
		

<!-- Al 'enviar' un formulario, lo que se envía al backend son datos ("variables" hablando en sentido programático) designados al incluir el atributo [name] en cada elemento.
Así, al enviar un form con un campo con el atributo [name="nombre-usuario"] que fue rellenado con el texto 'Juan Pérez', se envía el dato [nombre-usuario] con el valor [Juan Pérez]. O sea que desde backend uno puede preguntar ¿Qué valor tiene [nombre-usuario]? Y la respuesta sería obviamente [Juan Pérez].
El atributo [action] indica la ubicación y nombre del archivo de backend que procesará lo enviado (ya sea validar datos, grabarlos en Base de Datos, armar y enviar un mail con los mismos, etc).
El método puede ser [Post] o [Get] (ver nota en Blog).
[enctype="multipart/form-data"] se usa si vamos a trabajar con archivos, imágenes, etc. Si no no hay que ponerlo, dado que todo se procesará como 'texto plano'. -->
<form action="contacto_script.php" method="post" id="contacto" enctype="multipart/form-data">

<!-- [fieldset] separa grupos de campos, [legend] les pone titulito -->
<fieldset>
<legend>Primer paso: Datos Personales</legend>
	<!-- acá van los elementos a agrupar -->
</fieldset>

<fieldset>
<legend>Segundo paso: Datos Bancarios</legend>
	<!-- acá van los elementos a agrupar -->
</fieldset>

<!-- El tag [label] sirve para poner etiquetas de texto cerca de cada elemento, para ayudar al usuario a saber qué debe completar.
En cada Label, el attr. [for] debe tener el mismo valor que el [id] del elemento al que se refiere -->
<label for="input-contacto">Nombre Campo</label>

<!-- [input] es un elemento que permite ingresar o seleccionar valores.
El más común es el del tipo [text] que permite ingresar texto en una sóla línea (muy usado para datos cortos como 'nombres', 'email', 'contraseña', etc).
Siempre debe estar presente el atributo [name], dado que (como ya expliqué arriba) es lo que designará el nombre del dato (variable) que se envía al backend.
[value] es opcional en un input text, se usa para agregar algo dentro del campito que después el usuario puede borrar y sobreescribir.
[maxlength] es la cantidad máx de caracteres aceptados (para los "text" o "password").
El tag [input] cierra en sí mismo -->
<input type="text" id="input-contacto" name="input-contacto" value="Complete con sus nombres y apellidos" />

<!-- El tipo [password] esconde los caracteres, muestra o bien asteriscos o circulitos según el navegador -->
<input type="password" id="input-password" name="input-password" value="" />

<!-- El tipo [hidden] no se muestra, útil para prevenir el spam o enviar datos predefinidos -->
<input type="hidden" name="idUsuario" value="25" />

<!-- El tipo [radio] envía su valor directamente.
Sólo se puede seleccionar y enviar uno por cada grupo de radios que compartan el mismo [name].
[checked="checked"] sirve para dejar seleccionado por default algún valor -->
<label for="radio-si">Si</label>
<input id="radio-si" type="radio" name="suscribirse" value="si" checked="checked" />
<label for="radio-no">No</label>
<input id="radio-no" type="radio" name="suscribirse" value="no" />

<!-- El tipo [checkbox], si está destildado, no envía su valor.
Puede haber varios checkboxes con el mismo [name] que serán diferentes valores de la misma variable (a diferencia de los [radio], este sí envía varios valores en un mismo [name]).
[checked="checked"] sirve para ponerlo tildado por default -->
<input type="checkbox" id="checkbox-acuerdo" name="checkbox-acuerdo" value="1" checked="checked" />
<label for="checkbox-acuerdo">Acepto los términos y condiciones de uso.</label>

<!-- El tag [textarea] genera un campo para ingreso de texto multilínea y genera scroll cuando el mismo excede el alto designado.
Webkit (motor de Google Chrome y de Apple Safari) permite expandirlo a gusto.
Atención: no es recomendable cerrar el textarea en sí mismo, dado que generará conflictos en diversos navegadores como Firefox, IE, etc. Aglo de info sobre ello: http://www.stylusstudio.com/xsllist/200401/post00220.html
Por último, mediante [rows] y [cols] se puede especificar ancho y alto aproximado, pero por supuesto que es preferible hacerlo por css ;) -->
<textarea id="textarea-mensaje" name="comunicacion" rows="8" cols="50">Escriba aquí su mensaje...</textarea>

<!-- El [input] de tipo [submit] dispara el envío de todo el form, obviamente no precisa [label] y el [value] aparecerá como texto del botón -->
<input type="submit" id="submit" name="submit" value="Enviar mi comentario" />

<!-- El [input] de tipo [image] funciona igual que el [submit] sólo que usa una imagen en vez de un botón -->
<input type="image" src="http://www.maquinadediseno.com.ar/wp-content/plugins/cforms/images/button-bg.gif" alt="enviar" />


<!-- ------------------ ¿Y qué más hay? ------------------------------ -->

<!-- El tag [select] envía el valor preasignado, incluso puede ser múltiple.
Cada tag [option] debe ir dentro del mismo, con el valor a enviar bajo el nombre del [name] del [select] -->
<select id="select-sexo" name="sexo">
	<option value="M">Masculino</option>
	<option value="F">Femenino</option>
</select>

<select id="select-gustos" name="gustos" multiple="multiple">
	<option value="1">Me gusta jugar al Tennis</option>
	<option value="2">Me gusta jugar al Futbol</option>
	<option value="3">Me gusta jugar al Correr</option>
</select>

<!-- El input de tipo [button] crea un Botón que NO HACE submit (muy usado con Javascript para generar funcionalidades como 'imprimir la página', etc).
Acá en el ejemplo agrego [onclick] con javascript adentro, eso es otra historia ^_^ -->
<input type="button" value="&iexcl;Haceme clic!" onclick="alert('gracias por tu clic, fue mágico')" />

<!-- Reset NO HAY QUE USARLO!!! genera un botón que resetea el formulario. Odiado por los usuarios :) -->
<input type="reset" />

<!-- El tipo [file] permite a los usuarios elegir un archivo para enviar. Este archivo es enviado junto con el resto del formulario.
IMPORTANTE: para que la carga de archivos funcione, el atributo "enctype" del [form] debe tomar le valor "multipart/form-data" (ver arriba). -->
<input type="file" name="imagen" size="10" accept="image/gif" value="-" />

<!-- Otros atributos:
[·readonly="readonly"] -> Muestra el campo y el valor, pero no se puede editar. Se envía igualmente.
[·disabled="disabled"] -> Muestra el campo y el valor, pero no se puede editar NI se envía.
-->

</form>