En la guia anterior sobre formularios en HTML hablabamos sobre el input de tipo texto, numero y contraseña Formularios en HTML:input type text, number y password.

Hoy vamos a seguir viendo los distintos tipos que puede ser un input dentro de nuestros formularios.

Empezaremos por el tipo botón. Con este tipo de input podremos generar los botones en nuestra página web.

Para escribirlo se le dice que es de type button

<input type=”button”>

Como podeis ver, el botón que genera es básico y pequeño. Asique hay que darle atributos para que quede a nuestro gusto. Con value le decimos que queremos que se escriba en nuestro botón:

<input type=”button” value=”pulse”>

Con size le damos el tamaño adecuado.

<input type=”button” value=”pulse” size=30>

 

Si lo que queremos hacer es una lista desplegable, que no sea obligatoria de elegir, simplemente como sugerencia, pondriamos que es de tipo texto y le añadiriamos un datalist con la misma id y las opciones con el valor de cada registro de nuestra lista de opciones.

<input type=”text” id=”provincia” list=”provincias”/>
<datalist id=”provincias”>
<option value=”Almeria”></option>
<option value=”Granada”></option>
<option value=”Malaga”></option>
<option value=”Huelva”></option>
<option value=”Cadiz”></option>
<option value=”Jaen”></option>
<option vañie=”Cordoba”></option>
<option value=”Sevilla”></option>

</datalist>

Si os posicionais en la caja podreis ver que aparecen las sugerencias dandole a la flechita, incluso al escribir va acotando entre las opciones.


Si deseamos hacer radio button y elegir entre opciones solo una debemos indicar que es de type=”radio” , para saber que hablamos de unas opciones asociadas y que solo se pueda elegir una, debemos ponerle el mismo valor al atributo name y un valor para cada opción:

<input type=”radio” name=”ciudad” value=”1″>Madrid

<input type=”radio” name=”ciudad” value=”2″>Barcelona

<input type=”radio” name=”ciudad” value=”3″>Santiago

<input type=”radio” name=”ciudad” value=”4″>Sevilla

Y nos quedaría así

Madrid
Barcelona
Santiago
Sevilla

Si quisieramos dejar uno seleccionado dentro de la etiqueta pondriamos checked.

 

Y por último por hoy si necesitamos checkbox, es decir cajas de validación porque se puedan seleccionar mas de una opción deberemos decir que nuestro input es de type=”checkbox”, le ponemos un nombre con name.

<input type=”checkbox” name=”madrid”>Madrid

<input type=”checkbox” name=”bcn”>Barcelona

<input type=”checkbox” name=”santiago”>Santiago

<input type=”checkbox” name=”sevilla”>Sevilla

y así nos quedaría:

Madrid
Barcelona
Santiago
Sevilla

Y con esto ya tenemos más herramientas para crear formularios en nuestra pagina web. Espero que les haya servido de ayuda y les guste.

Quizás pueda interesarte

Suscríbete a nuestro boletín

 

 

Política de Privacidad

Revisa tu correo electrónico para finalizar el registro

Advertisment ad adsense adlogger