Etiqueta input
La etiqueta input crea varios elementos
de formulario HTML: campo de entrada ordinario, campo para
contraseña, casilla de verificación (checkbox),
botones de opción (radio), botón.
La etiqueta input debe estar dentro de la etiqueta
form.
Esto no es obligatorio, pero sí necesario para enviar
datos al servidor y su posterior procesamiento
a través de PHP.
No requiere etiqueta de cierre.
Atributos
| Atributo | Descripción |
|---|---|
type |
Define el tipo de campo de entrada. Ver opciones abajo. |
value |
Valor por defecto en el campo de entrada. En el caso de un botón, define su texto.
Para más detalles, ver el atributo value.
|
placeholder |
Sugerencia en el campo de entrada, para más detalles ver
el atributo placeholder.
|
name |
Nombre del campo de entrada. Necesario para obtener los datos del campo de entrada en PHP. Para el correcto funcionamiento del formulario, los nombres de los campos de entrada no deben coincidir entre sí (en un mismo formulario). Si coinciden - en PHP llegarán los datos de ese campo de entrada que esté más abajo en el código HTML. |
disabled |
Bloquea el elemento del formulario (no solo input, sino prácticamente cualquiera),
para más detalles ver el atributo disabled.
|
Valores del atributo type
| Valor | Descripción |
|---|---|
text |
Crea un campo de entrada de texto ordinario. |
password |
Crea un campo de entrada de texto para contraseña. Intente escribir texto en él - se mostrará con asteriscos. |
checkbox |
Crea una casilla de verificación (checkbox).
Para más detalles ver checkbox.
|
radio |
Crea un botón de opción (radio).
Para más detalles ver radio.
|
hidden |
Crea un input oculto, que no será visible en la pantalla, pero enviará los datos contenidos
en el atributo value al servidor.
|
button |
Crea un botón. Al pulsar este botón
no se enviará el formulario al servidor. Puede ser utilizado dentro de un
enlace o mediante JavaScript.
Por defecto el botón no tiene texto (ejemplo de botón sin texto: ),
se define mediante value.
Ver también la etiqueta button,
que también crea un botón.
|
submit |
Crea un botón que enviará los datos al servidor.
El texto del botón depende del navegador, se puede cambiar
mediante value.
Ver también la etiqueta button,
que también crea un botón.
|
reset |
Crea un botón que limpia el formulario completado.
El texto del botón depende del navegador, se puede cambiar
mediante value.
|
file |
Crea un botón de selección de archivo. Está prohibido cambiar el diseño de este botón
mediante CSS (aunque hay formas complicadas). Si necesita un campo así en el formulario, entonces
la etiqueta form debe tener el atributo
enctype con el valor multipart/form-data.
|
Nuevos valores del atributo type en HTML5
Estos valores del atributo son nuevos, aparecieron solo en HTML5, por lo que en algunos navegadores pueden no funcionar o funcionar de manera diferente en distintos navegadores.
En caso de que el navegador no pueda entender el contenido
del atributo type (por ejemplo, si
no es compatible o se introduce erróneamente),
considerará el elemento como un input de texto ordinario,
como si en type estuviera el valor
text.
Vea los ejemplos siguientes en
diferentes navegadores. Intente introducir
texto en los inputs y pulse el botón de envío.
Si el texto es incorrecto o el campo está vacío -
el navegador mostrará un error. Por ejemplo, si en
el campo con tipo email se escribe un email incorrecto -
el navegador no permitirá enviar el formulario y
mostrará un mensaje de error (el texto del error
y su apariencia no se pueden cambiar con html css).
Si el campo está vacío - el navegador también mostrará un error,
esto se consigue con el atributo required:
| Valor | Descripción |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
