Elementos de formularios en HTML

Continuando el post anterior donde vimos como hacer un formulario, continuamos con sus elementos.

En el post anterior, vimos lo que seria un formulario de login, en este veremos como puede ser uno de registro.

En este ejemplo vamos a trabajar con HTML plano, por lo que no utilizaremos estilos CSS

1 - Elemento input en HTML

El elemento input es el más importante de todos los elementos que podemos introducir dentro de los formularios. Es el que nos permitirá crear una caja de texto y dependiendo de su tipo, puede aceptar diferentes valores

Usuario: <input type="text" name="usuario"/><br/>
Password: <input type="text" name="Pass"/><br/>
Edad <input type="number" name="edad"><br/>

por defecto, es el tipo text, que admite cualquier texto, pero tenemos muchas otras opciones.

• button : nos creará un botón
• submit será el botón final del formulario, el cual lo enviará al servidor
• number: únicamente nos acepta números
• email: nos permite añadir un email, el cual tiene una funcionalidad que nos abrirá la aplicación de emails
• tel: similar al email, nos permite introducir un teléfono al cual se puede llamar, en la versión móvil es muy útil debido a que el usuario no tiene que copiar y pegar.
• hidden: oculta un elemento del formulario

y muchos más

1.1 - Radio button en HTML

otro tipo dentro de los input es el radio button.

El cual nos permite darle varias opciones a un usuario, y este es capaz de elegir ÚNICAMENTE UNA, siempre y cuando los elementos compartan el atributo name:

sexo: <br/>
<input type="radio" name="sexo" value="masculino"> masculino <br/>
<input type="radio" name="sexo" value="Femenino"> Femenino <br/>
<input type="radio" name="sexo" value="otro" > Otro <br/>

1.2 -  checkbox en HTML

Otro elemento muy utilizado checkbox, que es el cuadradito para darle el tick.

Es muy utilizado por ejemplo para aceptar los términos y condiciones justo antes de enviar el formulario. 

<input type="checkbox" name="termsAndConds" value="Terminos y condiciones"> acpeto los terminos y condiciones<br>

1.3 - Ficheros y documentos en formularios HTML

Cuando queremos crear un espacio para que los usuarios suban imágenes, o suban documentos, etc. Debemos hacerlo con el input type file, no hay que olvidar, indicar el atributo enctype="multipart/form-data" en el formulario

Comúnmente vemos este tipo de input cuando vamos a subir nuestra foto de perfil. 

Imagen de perfil: <input type="file" name="imagende perfil"><br>

Cuando creamos un tipo file, el navegador convierte la caja de texto automaticamente en el boton para buscar dentro de nuestro pc. 

2 - Elemento select en HTML

Cuando creamos un elemento select el navegador automáticamente lo convierte en una lista desplegable. 

Debemos asignar el atributo name a la etiqueta select, y a cada una de las opciones el atributo value el cual será el valor que se mande en el formulario.

Las opciones las marcamos con la etiqueta option.  podemos marcar un valor seleccionado por defecto con el atributo selected dentro de una de las opciones. 

Idiomas hablados <Br>
<select name="idiomas" multiple>
    <option value="en">Inglés</option>
    <option value="es" selected>Espanol</option>
    <option value="fr">Francés</option>
    <option value="it">Italiano</option>
</select>

Como podemos observar, dentro de la etiqueta select hay un atributo llamado multiple el cual nos permite seleccionar varios valores, para seleccionar múltiples valores debemos hacerlo manteniendo pulsada la tecla Ctrl y haciendo click. 

3 - Elemento textarea en HTML

El elemento textarea es similar al elemento input type=”text” lo único que nos permite tener mas de una fila con el contenido. además permite indicar el numero de filas que queremos incluir, así como de columnas, para ello tenemos que utilizar el atributo rows y cols.

comentario adicional<br/>
<textarea name="comentario" rows="10"></textarea>

4 - Elemento datalist en HTML

El elemento datalist, se puede ver como un elemento similar al select, pero a diferencia del mismo, en datalist podemos empezar a escribir en el input.

cuando definimos un datalist, debemos indicar un input sin tipo, pero con un atributo llamado list el cual hará referencia al datalist, que contiene la información.

Este datalist, debe contener un elemento id el cual deber ser el mismo que la lista previamente indicada y para cada una de las opciones utilizaremos el valor option.

idioma materno: 
<input list="idiomamaterno">
<datalist id="idiomamaterno">
    <option value="Inglés">
    <option value="Espanol">
    <option value="fr">Francés</option>
    <option value="Italiano">
</datalist>

Como valor, nos imprimirá lo que la etiqueta option contenga en el atributo value, pero podemos completar el option como vimos en el select y nos mostrará ambas.

Conclusión

En este post hemos tratado los principales elementos de un formulario en HTML.