📌

Formularios
🎴 Crear un formulario
🎴 Elementos input
🎴 Etiquetas descriptivas
🎴 Cuadros de área de texto
🎴 Botones
🎴 Elementos agrupados
🎴 Lista de selección desplegable
🎴 Opciones predefinidas
🎴 Resultado de un cálculo
🎴 Crear un formulario
La etiqueta <form action= "[url]" method= "[http-method]" > define un formulario. Su
atributo action indica a dónde enviar los datos del formulario cuando este es enviado y
el atributo method especifica el método HTTP usado al enviar el formulario, por lo
general el método es GET o POST.
El formulario además, puede contener uno o más de los siguientes elementos:

<input> <textarea> <button>

<select> <option> <optgroup>

<fieldset> <label> <output>

<form action="" method="post">

<label for="POST-name">Nombre:</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Save">
</form>

Formularios 1
 🎴 Elementos input
La etiqueta <input type= "" name= "" > define un campo donde el usuario puede
ingresar datos. Su atributo type indica el tipo de dato que se puede ingresar y name
establece el nombre del campo, que nos permite acceder a la información ingresada
después de enviado el formulario.

Atributo Descripción
autocomplete= "on"|"off" (any) Habilita el autocompletado.
autofocus (any) El elemento se enfoca al carga la página.
disabled (any) Elemento deshabilitado.
readonly (any) Campo de solo lectura.
required (any) Campo obligatorio.
placeholder= "[text]" (text*) Texto que describe el valor esperado.
value= "[text]" (text*) Valor por defecto del campo.
size= "[number]" (text*) Ancho en caracteres del campo.

(text*) Indica opciones predeterminadas, las cuales

list= "[datalist-id]"
están definidas en un <datalist> .
minlength= "[number]" (text*) Número mínimo de caracteres.
maxlength= "[number]" (text*) Número máximo de caracteres.

(file) Indica el tipo de archivo válido, por ejemplo,

accept= "[file-ext]"
image/jpg .

multiple (file) Indica que el campo acepta varios ficheros.

(image) Dirección de la imagen a usar como botón

src= "[url]"
de envío.
alt= "[text]" (image) Texto descriptivo de la imagen.
height= "[number]" (image) Altura de la imagen.
width= "[number]" (image) Acho de la imagen.

(checkbox, radio) Pre-selecciona el elemento al

checked
cargar la página.
(checkbox, radio) indica el valor que se envía al
value= "[text]"
servidor.
(button, reset, submit) texto que aparece dentro del
value= "[text]"
botón.
min= "[number]"|"[date]" (number, range, date) Valor mínimo aceptado.
max= "[number]"|"[date]" (number, range, date) Valor máximo aceptado.

Los tipos de campos son:

text - texto de una sola línea.

button - botón al cual podemos hacer clic.

checkbox - casilla de verificación.

radio - botón radial.

color - selector de color.

Formularios 2
 time - hora.

date - fecha (año-mes-día).

datetime-local - fecha y hora.

month - mes de un año.

week - semana del año.

email - correo electrónico.

file - fichero.

hidden - campo de entrada oculto.

image - imagen como botón de enviar.

number - número entero.

range - control deslizante.

password - contraseña.

reset - botón para reiniciar el formulario.

search - cadena de búsqueda.

submit - botón de envío.

tel - número telefónico.

url - dirección web.

<label for="password">Password</label>
<input type="text" name="password" id="password" minlength="6" required><br>

🎴 Etiquetas descriptivas
La etiqueta <label for= "[input-id]" > define un rótulo o descripción para un campo de
entrada específico. Para asociar una etiqueta con un campo, el atributo for debe tener
como valor el ID del elemento con el que se quiere relacionar, aunque también se
puede asociar ubicando el campo dentro de la etiqueta.

Los elementos que deben estar acompañados de un rótulo son: <input> , <textarea> ,
<select> , <meter> y <progress> .

<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female">

<label>
Male
<input type="radio" name="gender" id="male" value="male">
</label>

🎴 Cuadros de área de texto

Formularios 3
 La etiqueta <textarea id= "" define un campo de texto de múltiples líneas.
name= "" >

Su atributo name es necesario para hacer referencia a los datos del campo después de
enviado (si se omite no se enviarán los datos de ese campo). El ID es necesario para
asociarlo con un rótulo.

La propiedad CSS resize: none; impide redimensionar el área de texto.

Atributos Descripción
name= "[text]" Nombre del campo.
autofocus Enfoca el campo al cargar la página.
disabled Campo deshabilitado.
readonly Campo de solo lectura.
required Campo obligatorio.
placeholder= "[text]" Texto que describe el contenido esperado.
maxlength= "[number]" Número máximo de caracteres permitidos.
cols= "[number]" Ancho visible en caracteres del campo.
rows= "[number]" Número visible de líneas del campo.

<label for="comment">Comentario:</label><br>
<textarea id="comment" name="comment" rows="4" cols="50"
placeholder="Escribe un mensaje"></textarea>

🎴 Botones
La etiqueta <button type= "" > define un botón en el que se puede hacer clic. Este
elemeto puede contener texto y otros elementos de formato a diferencia de la etiqueta
<input type="button"> .
Los tipos de botones son:

submit - permite enviar los datos del formulario al servidor.

reset - elimina todos los datos del formulario.

button - permite añadir algún comportamiento por medio de JavaScript.

Atributo Descripción
name= "[text]" Nombre del botón.
type= "[type]" Tipo de botón.
value= "[text]" Valor inicial del botón.
autofocus Enfoca el botón al cargar la página.
disabled Deshabilita el botón.

<button type="button">Click Me!</button>

🎴 Elementos agrupados
Formularios 4
 La etiqueta <fieldset> permite agrupar elementos relacionados dentro del formulario,
dbujando un recuadro alrededor de ellos. Su atributo name define el nombre del grupo y
disabled permite deshabilitar a todo el grupo.

Por otra parte, la etiqueta <legend> establece un título visible para el grupo.

<fieldset>
<legend>Datos personales</legend>
<label for="fname">Nombre:</label><br>
<input type="text" name="fname" id="fname">
<br><br>
<label for="lname">Apellido:</label><br>
<input type="text" name="lname" id="lname">
</fieldset>

🎴 Lista de selección desplegable

La etiqueta <select> crea una lista desplegable, de modo que el usuario deba elegir
una de las opciones disponibles. La lista de compone de varios elementos <option> que
definen cada opción.

Atributo de <select> Descripción

name= "[text]" Nombre de la lista.
size= "[number]" Número de opciones visibles en la lista.
required Indica que es obligatorio seleccionar un valor.
autofocus Enfoca la lista al cargar la página.
disabled Deshabilita la lista de opciones.
multiple Permite seleccionar varias opciones.

Atributo de <option> Descripción

value= "[text]" Valor que se envía al servidor.
label= "[text]" Etiqueta de la opción.
selected Indica que la opción está pre-seleccionada.
disabled Deshabilita la opción.

<label for="cars">Escoge un automovil:</label><br>

<select name="cars" id="cars" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

La etiqueta <optgroup> permite agrupar opciones relacionadas dentro de una lista de

selección. Si se tiene una larga lista de opciones, los grupos son más fáciles de
manejar. Su atributo label define un rótulo para el grupo y disabled permite
deshabilitar las opciones del grupo.

Formularios 5
 <label for="cars">Escoge un automovil:</label><br>
<select name="cars" id="cars" size="3">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

🎴 Opciones predefinidas
La etiqueta <datalist id= "" > establece una lista de opciones predefinidas de
autocompletado en un elemento <input> . Para relacionar la lista con el campo de
entrada de datos, el atributo id de la lista debe corresponder al atributo list del
campo de entrada.
La lista de compone de varios elementos <option> que definen cada una de las
opciones. Estas opciones son solo sugerencias para el usuario, él puede ingresar
cualquier valor diferente.

<label for="browser">Especifica tu navegador:</label>

<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

🎴 Resultado de un cálculo
El elemento <output id= "" for= "" > representa la salida de un cálculo o proceso,
normalmente llevado a cabo por un programa. Este cálculo puede estar basado en
valores de los campos de un formulario, los cuales se deben asociar por medio del
atributo for .

<p>Base: <input type="number" id="base" value="0" min="0" max="30"></p>

<p>Exponente: <input type="number" id="exponente" value="0" min="0" max="30"></p>
<p><input type="button" value="Calcular" onclick="mostrarPotencia()"></p>

<p>Resultado: <output id="potencia" for="base exponente"></output></p>

Una forma de trabajar con este elemento, es cuando un campo del formulario genere
un evento, al manejarlo por medio de JavaScript, su resultado se muestre a través de
<output> .

Formularios 6