En esta lección se presentan algunos elementos para elaborar formularios.
A partir de esta lección 11 se requiere que uses el contenido de https://gilpgijs.github.io y https://gilpgpoojs.github.io.
form
Representa un hiperenlace.
El atributo
action
es el enlace a una URL
para procesar su contenido. Puede indicar también procesamiento
local con el JavaScript de la página.
Puede manipularse por medio de una colección de elementos asociados.
Algunos de los elementos asociados pueden representar valores editables que se pueden enviar para su procesamiento en un servidor o localmente.
El atributo
name
de la forma, representa el nombre único de la forma dentro de la
colección de formas dentro de la página.
Las formas pueden tener uno o más elementos asociados de tipo
<button type="submit"></button>
.
Hay varias maneras de activar la forma:
Haciendo clic en un elemento
<button type="submit"></button>
asociado con la forma.
Usando el tabulador hasta llegar a un elemento
<button type="submit"></button>
asociado con la forma y oprimir la tecla ESPACIO.
Posicionarse en alguno de los campos de captura y oprimir la tecla ENTER.
La especificación técnica del elemento
form
está en
https://html.spec.whatwg.org/multipage/forms.html#the-form-element
Los siguientes atributos son comunes en los elementos asociados con una forma.
value
Propiedad de JavaScript para asignar o recuperar el valor de captura.
Para
textarea
,
select
y controles de texto del elemento
input
.
Se puede usar en HTML para controles de texto del elemento
input
.
name
Nombre único del elemento (y sus valores asociados) dentro de la forma.
disabled
Atributo booleano. Cuando está presente indica que el elemento está deshabilitado y no responde a la interacción del usuario.
maxlength
Para
textarea
y controles de texto del elemento
input
.
Es el número máximo de caracteres que el usuario puede introducir.
minlength
Para
textarea
y controles de texto del elemento
input
.
Es el número mínimo de caracteres que el usuario puede introducir para que la captura sea válida.
required
Atributo booleano. Cuando está presente indica que el valor de captura del elemento no puede estar vacío.
label
Representa un rótulo o etiqueta asociado a un control de una forma.
El contenido del elemento es el rótulo.
Se puede asignar a su atributo
for
el identificador del elemento con que se desea asociar la etiqueta.
También se puede hacer que el elemento label tenga como hijo al control para que queden asociados.
La especificación técnica del elemento
label
está en
https://html.spec.whatwg.org/multipage/forms.html#the-label-element
button
Representa un botón cuya superficie muestra el contenido del elemento.
El contenido del elemento es el rótulo.
El atributo
type
controla el comportamiento del botón al ser activado. Sus valores posibles
son:
submit
Cuando el botón se activa, el contenido de la forma se envía.
Es el valor por omisión.
reset
Cuando el botón se activa, el contenido de la forma regresa a su estado inicial.
button
Cuando el botón se activa, no tiene un comportamiento definido, pero
puede
configurar por medio de un script o con el atributo
onclick
.
La especificación técnica del elemento
button
está en
https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
input
Puede desplegar una gran cantidad de controles según el valor de atributo
type
.
Los campos con formato se validan antes de realizar submit.
Los valores más usados para
type
son:
hidden
Campo invisible cuyo no puede se examinado o manipulado por el usuario.
text
Manipula texto plano.
search
Usa texto para búsquedas. Se despliega con la apariencia preferida por la plataforma donde se ejecuta.
tel
Texto que representa un número telefónico válido.
url
Texto que representa una URL válida.
email
Texto que representa un email válido.
password
Texto que representa una contraseña y por lo mismo no se muestra.
number
Maneja números.
range
Maneja un rango de números.
valueAsNumber
Propiedad de JavaScript para asignar o recuperar el valor numérico de captura.
Para controles numéricos del elemento
input
.
Devuelve un número.
Si el texto es una cadena vacía o no representa un número, el valor devuelto es NaN (o sea que no es un número).
pattern
Para los tipos que manejan texto.
Expresión regular para validar el contenido. Abarca desde el inicio hasta el final del texto.
min
Para controles numéricos y de fecha.
Valor mínimo que se puede capturar.
max
Para controles numéricos y de fecha.
Valor máximo que se puede capturar.
step
Para controles numéricos y de fecha.
Granularidad o separación entre los valores que se pueden capturar. Por ejemplo, step=0.1 indica que los valores pueden ser 0, 0.1, 0.2, 0.3, etcétera. Aplica también para fechas.
El valor por omisión para controles numéricos es 1.
La especificación técnica del elemento
input
está en
https://html.spec.whatwg.org/multipage/input.html#the-input-element
output
Muestra el resultado de un cálculo.
El contenido del elemento es el valor que muestra.
El valor mostrado puede consultar o cambiar desde JavaScript con la
propiedad
value
.
La especificación técnica del elemento
output
está en
https://html.spec.whatwg.org/multipage/form-elements.html#the-output-element
El siguiente orograma usa el tipo de elemento
select
.
La especificación técnica del elemento
select
está en
https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element
En esta lección se revisaron los elementos principales para elaborar formularios y se presentaron algunos ejemplos.