Creación de formularios html

Creación de formularios html

0
(0)

Existe muchísima bibliografía sobre como crear formularios con html.

Sin embargo la gran mayoría de formularios son relativamente sencillos y no es necesario un conocimiento profundo de las etiquetas y atributos que las acompañan. Aunque esto no quita que se debe conocer el mayor número posible.

Personalmente defiendo la idea que hay que ser capaces de encontrar la información contrastada siempre que sea necesario. Y para su uso adecuado a las necesidades de cada formulario.

En esta publicación leeréis un simple compendio de las etiquetas y atributos que considero más importantes.

Para que saquéis provecho a esta entrada asumo que ya tenéis conocimientos previos.

Etiquetas imprescindibles para crear formularios

Las etiquetas imprescindibles para crear formularios son:

  1.  <form action=""></form>Para indicar que se trata de un formulario. Debe llevar como mínimo el atributo action que indica a que página se enviará al usuario una vez enviado el formulario. La expresión completa de form es
    <form action="" name="" method="get|post" 
    accept-charset="utf-8|iso-8859-1" autocomplete="on|off" 
    novalidate target="_blank|_self" 
    enctype="multipart/form-data |text/plain">
    </form>
  2. <input type=""/> Fijaros que la etiqueta input sólo es de apertura. Los input más habituales son text | radio | checkbox | submit | reset.  La lista completa es:
    <input type="text|hidden|search|tel|
    url|email|number|range|color|
    password|file|datetime|time|week|
    month|checkbox|radio|submit|
    image|reset|button"/>
  3. <select name="" id=""></select>

    Select encapsula la etiqueta option. Por ejemplo:

    <select name="" id="" multiple size="">
    	<option value="valorA">valor A</option>
    	<option value="valorB">valor B</option>
    	<option value="valorC">valor C</option>
    </select>

    Es interesante que juguéis con introducir valores numéricos en el atributo size. Observaréis que en lugar de un desplegable pasaréis a tener un rectángulo con distintas opciones a seleccionar. Tantas como el número entero que escribáis.

    El atributo multiple permite seleccionar más de 1 opción.

  4. <textarea name="" id=""></textarea>

    Textarea area permite escribir un texto más largo. Es recomendable usar el atributo maxlength.

  5. <label for=""></label>

    Añadiendo el atributo for=»» y el identificador id=»» al <input/> respectivo ayudaremos a que nuestro formulario sea usable y accesible. Cuando un usuario pulse el texto encapsulado en el label se seleccionará el input correspondiente.

    Veamos un ejemplo de uso correcto de label:

    <label for="manzana">Nombre</label>:
    <input type="text" name="nombre" id="manzana" placeholder="escribe tu nombre"/>

    El caso anterior es muy útil para usuarios con los dedos rechonchos cuando usan un teléfono móvil. ¿Te ha pasado alguna vez que no atinas a seleccionar una opción de un formulario? Como curiosidad un dedo mide 40-60px aproximadamente.

Considerar finalmente que existen más etiquetas como optgroup y fieldset. Podéis consultar sobre ellas aquí.

Atributos imprescindibles

El atributo estrella es name, pues cualquier etiqueta lo puede llevar. Sirve para identificar cada etiqueta en un formulario web.

La lista de atributos imprescindibles la siguen:

  1. value muy útil cuando queremos rellenar un cajetín con un texto por defecto.
  2. placeholder muy útil cuando queremos dar instrucciones en el propio cajetín de como rellenarlo y queremos que cuando el visitante empiece a escribir este texto desaparezca.
  3. required por ejemplo pueden ser el punto crucial de cualquier validación web.
  4. hidden muy práctico cuando queremos pasar informaciones de formulario como por ejemplo el origen de los datos, alguna fecha en particular, …
  5. readonly usado por ejemplo cuando se quiere que el usuario tenga constancia de un dato pero no se quiere que pueda ser modificado.
  6. checked para indicar en un input de tipo radio o checkbox si una determinada opción está seleccionada por defecto o no.

Seguramente podríamos profundizar con más atributos como min, max, enctype,  pero pienso que lo mejor es consultar estos y otros cuando os encontréis con la necesidad de validar determinadas informaciones mediante html5.

Ejemplo de formulario html

Veamos una propuesta de código html para el formulario que se visualiza en la imagen a continuación:

resultado final ejemplo formulario
resultado final ejemplo formulario
<form action="gracias.html" method="post" target="_blank" name="formularioWeb">
	<!-- text | email | radio | checkbox | number | date | range | ... -->
	
	<label for="manzana">Escribe tu nombre:</label>
	<input type="text" placeholder="Francesc" name="nombre" id="manzana" maxlength="30" size="40" required="required"/>

	<label for="platano">Escribe tu apellido:</label>
	<input type="text" placeholder="Ricart" name="apellido" id="platano" maxlength="50"/>

	<label for="uva">Escribe tu email:</label>
	<input type="email" placeholder="correo@empresa.com" name="correo" id="uva">

	<label for="estrellita-5" class="bloque">¿Qué valoración le das a la publicación?</label>
	<input type="radio" name="valoracion" value="0" id="estrellita-0"><label for="estrellita-0" class="estrellita">0</label>
	<input type="radio" name="valoracion" value="1" id="estrellita-1"><label for="estrellita-1" class="estrellita">1</label>
	<input type="radio" name="valoracion" value="2" id="estrellita-2"><label for="estrellita-2" class="estrellita">2</label>
	<input type="radio" name="valoracion" value="3" id="estrellita-3"><label for="estrellita-3" class="estrellita">3</label>
	<input type="radio" name="valoracion" value="4" id="estrellita-4"><label for="estrellita-4" class="estrellita">4</label>
	<input type="radio" name="valoracion" value="5" checked id="estrellita-5"><label for="estrellita-5" class="estrellita">5</label>


	<label for="" class="bloque">¿Qué asignaturas has estudiado?</label>

	<input type="checkbox" name="asignatura" class="" value="html" id="alfa"> 
	<label for="alfa">html</label>
	
	<input type="checkbox" name="asignatura" class="" value="css" id="beta"> 
	<label for="beta">css</label>
	
	<input type="checkbox" name="asignatura" class="" value="javascript" id="omega">
	<label for="omega">javascript</label>

	<label for="" class="bloque">Selecciona tu alineación ideal</label>

	<select name="alineacionIdeal" id="" multiple size="5">
		<option value="cristiano">Cristiano</option>
		<option value="messi">Messi</option>
		<option value="chigrinsky">Chigrinsky</option>
		<option value="sergio ramos">Sergio Ramos</option>
		<option value="shevchenko">Shevchenko</option>
	</select>

	<label for="" class="bloque">¿Qué mejorarías de este curso?</label>
	<textarea name="sugerencias" id="" maxlength="300"></textarea>
	
	<input type="submit" name="enviar" value="Enviar"/>

</form>

El css que hace que el formulario se visualize de este modo queda completamente fuera de este tutorial.

Se adjunta para los curiosos.

Ver el código css
*, html , body{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
form{
	width:500px;
	padding:32px;
	border:1px solid #000;
	border-radius:10px;
	margin:32px auto;
}

form label, form input[type="text"],form input[type="email"],form input[type="submit"]{
	display:inline-block;
	/*width:40%;*/
	padding:4px 8px;
	margin:8px 0;
}

form input[type="radio"]{
	display:inline-block;
	margin-left:8px;
}

.estrellita{
	width:32px;
}
.caramelo{
	width:115px;
}

.bloque{display:block;width:100%;}

form label{
	font-weight:bold;
	font-size:18px;
}

form select{width:100%;}

form textarea{
	width:100%;
	height:96px;
	resize:vertical;
}

input[type="submit"]{
	width:100%;
	margin-top:32px;

	background-color:#000;
	border-radius:5px;
	color:#fff;
	text-align:center;
}

¡Hola!

Querido lector,

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 0 / 5. Votos: 0

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

¿Dónde he fallado?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No Comments

Post A Comment

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.