Formulario en HTML

Por: Laru | Categoría: HTML

Hoy les presento una manera sencilla y rápida de crear un formulario para sus páginas web. Están explicados los campos más comunes y elementales de los formularios y también explicaciones útiles que les permitirán una mejor personalización.

Abriremos siempre el formulario con <form> y lo cerraremos con </form>. Dentro de este campo que hemos creado debemos comenzar a dar los datos y parámetros que poseerá el formulario:

<form action=”mailto:mail@email.com” method=”post”>
<input type=”" />
</form>

Luego de ser completado este formulario será enviado a la dirección que especifiquemos en la primera línea del código (“mailto:email@email.com”), reemplazando por la casilla de correo que recibirá los formularios. Podemos colocar dentro del formulario toda la cantidad que deseemos de campos. Se debe colocar el parámetro INPUT y dentro del mismo podemos colocar TYPE=”" para dar alguna de las siguientes funciones a esa línea del formulario:

Checkbox

Es una casilla utilizada para marcar opciones en una lista. En esta clase de listas se pueden elegir varias opciones al mismo tiempo. Se escribe de este modo:

<input type=”checkbox” /> Nombre de la casilla 1
<input type=”checkbox” /> Nombre de la casilla 2
<input type=”checkbox” /> Nombre de la casilla 3
AÑADIR ESTILO

class=”" Debemos poseer aquí una hoja de estilos en cascada (CSS) con la clase a utilizar, por ejemplo:

.checkbox {color: #CCC; font-family: Tahoma; } /* En la hoja de estilos*/
<input type=”checkbox” class=”checkbox” /> Nombre de la casilla 1
<input type=”checkbox” class=”checkbox” /> Nombre de la casilla 2
<input type=”checkbox” class=”checkbox” /> Nombre de la casilla 3

id=”" Debemos crear en nuestra CSS una ID de este modo:

#casilla {color: #CCC; font-family: Tahoma; } /* En la hoja de estilos*/
<input type=”checkbox” id=”casilla” /> Nombre de la casilla 1
<input type=”checkbox” id=”casilla” /> Nombre de la casilla 2
<input type=”checkbox” id=”casilla” /> Nombre de la casilla 3
marcado predeterminado

checked=”checked” Si queremos que aparezca inicialmente marcado. Si no necesitamos que la casilla esté seleccionada simplemente no lo agregamos.

<input type=”checkbox” /> Nombre de la casilla 1
<input type=”checkbox” checked=”checked”/> Nombre de la casilla 2

Veríamos esto:

Si en ninguna casilla colocamos el parámetro checked se verían todas como la primera opción.

Password

Con password lo que podemos incluir en el formulario es una contraseña. Este parámetro se diferencia del texto común ya que al ser escrito será sustituído por un punto o un asterisco para ocultar la palabra secreta.

Se escribe de la siguiente manera:

<input type=”password” /> Contraseña

En la imagen superior apreciamos un campo de contraseña vacio y uno con contenido, lo que se escribe dentro de este campo es codificado.

Definir el tamaño
<input type=”password” size=”25″/> Contraseña
Limitar los caracteres ingresados

Mediante el parámetro MAXLENGTH podemos configurar el máximo de caracteres que podrá tener esta contraseña.

<input type=”password” size=”25″ maxlength=”25″/> Contraseña

Radio

Cuando necesitamos hacer una “encuesta” de múltiple opción pero que solamente admita una respuesta el parámetro radio es el adecuado.

<input type=”radio” /> Opción a
<input type=”radio” /> Opción b
<input type=”radio” /> Opción c

Cuando colocamos el código de esta manera funcionará del mismo modo que Checkbox, podremos elegir varias opciones. Si queremos que sólo una casilla pueda ser elegida debemos colocarle nombre al código:

<input type=”radio” name=”option” /> Opción a
<input type=”radio” name=”option” /> Opción b
<input type=”radio” name=”option” /> Opción c

Reset

Reset o reestablecer nos sirve para limpiar o borrar los datos ingresados en el formulario.

<input type=”reset” />

Al utilizar este código veremos un botón con el estilo predeterminado y luego con un poco de CSS podremos adecuarlo a nuestra página.

CAMBIO DE NOMBRE
<input type=”reset” value=”Borrar los datos” />

Submit

Este botón se ecuentra al final del formulario y es el que se encarga de enviar la información. Se comporta de la misma manera que el botón Reset.

<input type=”submit” />

Al utilizar este código veremos un botón con el estilo predeterminado y luego con un poco de CSS podremos adecuarlo a nuestra página.

Para cambiarle el nombre:

<input type=”submit” value=”Enviar los datos” />

Text:

A este campo de texto lo podemos utilizar para que se complete con el Nombre, Apellido, Correo electrónico, etc. y se utiliza de la siguiente manera:

<input type=”text” />
Definir el tamaño

<input type=”text” size=”35″/>

<input type=”text” size=”15″/>
<input type=”text” size=”25″/>
<input type=”text” size=”5″/>

Utilizando estos valores me quedaron así:

Limitar los caracteres ingresados

Mediante el parámetro MAXLENGTH podemos configurar el máximo de caracteres que podrá tener esta contraseña.

<input type=”text” size=”35″ maxlength=”25″/>

Área de Comentarios

&lt;textarea name=&quot;comentarios&quot; rows=&quot;20&quot; cols=&quot;20&quot; size=&quot;medium&quot;&gt;Comentarios&lt;/textarea&gt; &lt;!- En el documento HTML–&gt;

Podemos modificar el tamaño del área de comentario mediante los parámetros rows, cols y size. Los valores admitidos para size son: large, medium y small.

Limitar los caracteres ingresados

Mediante el siguiente parámetro podemos colocar un máximo de

caracteres para cada campo.

<textarea cols=”50″ rows=”15″></textarea>

Agrupar los campos del formulario 

 

Si necesitamos separar secciones de nuestro formulario debemos utilizar el siguiente código:

<fieldset><legend>Nombre</legend>

<input type=”text” size=”35″/></fieldset>
<fieldset>

<input type=”radio” name=”option” /> Opción a
<input type=”radio” name=”option” /> Opción b
<input type=”radio” name=”option” /> Opción c

</fieldset>

Para que nos queden separadas las secciones de nuestro formulario debemos colocar <fieldset> en el comienzo de la sección y </fieldset> en el final de la sección a delimitar. En caso de que necesitemos nombrar las etapas o partes del formulario podemos utilizar a continuación de la etiqueta <fieldset> la etiqueta <legend>. Se nombra allí mismo a la etiqueta LEGEND y se cierra utilizando </legend>.

Veamos un ejemplo ahora de un formulario completo:

<input

¿Te gustó el artículo?

Recomiendalo a través de las redes sociales

Tal vez te interese...

Comentarios

Este artículo no tiene comentarios

¡Se el primero en comentar!

Si deseas agregar un código a tu comentario por favor usa el siguiente formato: <pre name="code" class="php">Tu código</pre>. Puedes reemplazar la clase con "js", "css", "sql", o "html". Si el código tiene algún "<" o ">" en tu código reemplazalo con: &lt; y &gt; respectivamente.