. Viene con los siguientes atributos.
acción . La dirección del script o documento que procesa los datos del formulario. La URL se especifica como el valor.método . El método para pasar datos al controlador. Puede especificar GET (predeterminado) o POST. GET significa pasar datos como parte de una URL. Es posible que haya visto algo como ?id=225 en las direcciones. Esto es lo que es. El método POST funciona de manera diferente y, por lo tanto, los datos transmitidos están ocultos para el usuario. Es más seguro, le permite transferir más información, incluidos los archivos. Pero todo esto tiene más que ver con la programación que con el marcado HTML.aceptar-juego de caracteres . Establece la codificación.autocompletar . Activa (activa) o desactiva (desactiva) los formularios de autocompletar, donde el propio navegador le solicita qué ingresar en función de lo que escribió la última vez. Deshabilitar la función tiene sentido para los formularios confidenciales para que el navegador, sin darse cuenta, no muestre datos importantes.nombre. El nombre del formulario.
Hay otros atributos, pero rara vez se usan.
Significado
Descripción
Casillas de verificación. Con su ayuda, puede elegir varias opciones a la vez.
Botón de selección de archivos
Campo oculto, no visible en el navegador
Botón con una imagen
Campo de contraseña. Campo de texto sin formato, pero los caracteres de entrada están ocultos detrás de asteriscos (*)
interruptores Casi como casillas de verificación, pero con su ayuda puede seleccionar solo una de las opciones propuestas
Botón para restablecer los datos del formulario a los valores originales
Botón para enviar datos al servidor. Por lo general, los presiona para confirmar la entrada: Guardar, Aplicar, Aceptar
Campo de texto
Han aparecido muchos valores nuevos en HTML5, pero lamentablemente solo se admiten parcialmente hasta ahora (junio de 2016).
enfoque automático . El foco de entrada se establecerá de forma predeterminada en el elemento para el que se especifica este atributo.comprobado . Establezca la casilla de verificación predeterminada o el botón de radio.patrón . Con este atributo, puede obligar al usuario a ingresar datos en un formato específico. Por ejemplo, ingrese solo un número del 0 al 9 o solo letras del alfabeto latino (debe ser familiar). Hasta que el campo no se complete correctamente, los datos del formulario no se enviarán para su procesamiento.marcador de posición . Establece el texto de la sugerencia.
tamaño . La propiedad principal que especifica el número de filas de lista para mostrar. Por ejemplo, si el valor es 1, entonces la lista es una lista desplegable; de lo contrario, es una lista con todos los elementos inmediatamente visibles o una lista cuyos elementos se pueden navegar usando la barra de desplazamiento.múltiple . Un atributo sin valores. Especifíquelo para obtener una lista de opción múltiple.requerido . Hace que la lista sea obligatoria para la selección, es decir, hasta que el usuario especifique un valor en ella, el formulario no se enviará. Esto se hace a menudo con la lista de Género en los formularios de registro.
valor . El valor del elemento de la lista que procesará el script.seleccionado . Un elemento con este atributo se resaltará de forma predeterminada, como si el usuario lo hubiera seleccionado.
desactivado . Hace que el grupo de listas no se pueda seleccionar (mientras lo muestra en un color diferente).etiqueta . Texto de encabezado de grupo.Ejemplo de formulario
Ahora que se conocen todas las etiquetas, creemos un pequeño formulario de autorización, cuyos datos son procesados por el archivo guión.php , ubicado en la carpeta con la página HTML.
El código será así.
Forma
Veamos algunas de sus partes.
<
hermano >
- etiqueta para pasar a la siguiente línea.
<
aporte nombre ="
acceso "
tipo ="
texto "
tamaño ="25"
longitud máxima ="30"
valor ="Miguel"> - cree un campo de texto llamado inicio de sesión con un ancho de 25 caracteres. Especificamos Mikhail como el valor predeterminado para que el usuario comprenda qué y cómo ingresar.
<
aporte nombre ="
aprobar "
tipo ="
contraseña "
tamaño ="25"
longitud máxima ="30"
valor ="">
- crear un campo de entrada de contraseña (los caracteres se reemplazan por asteriscos). El ancho del campo es de 25, la longitud máxima de la contraseña es de 30 caracteres.
<
seleccionar ><
opción valor ="
C 1">Invitadoopción ><
opción valor ="
C 2">Administradoropción >seleccionar >
- crear una lista desplegable simple de dos elementos.
<
aporte nombre ="
ahorrar "
tipo ="
caja "
valor ="
Sí "> Recuerda - añadir una bandera y escribir un texto explicativo.
<
hermano ><
aporte tipo ="
entregar "
nombre ="
ingresar "
valor ="Iniciar sesión"> - crear un botón, presionando el cual se inicia el proceso de procesamiento de datos.
- cerrar el formulario.
En un navegador, el formulario web se verá como la imagen a continuación.
Se puede completar, pero para que comience a funcionar, debe escribir un código y guardarlo en un archivo. guión.php junto a la página HTML.
26.02.2016
¡Hola a todos! Qué ha pasado HTML forma y como se crea.
Creo que ahora necesita mostrar ejemplos de cómo se ven visualmente los formularios HTML.
○ Formulario de búsqueda:
○ Formulario de inicio de sesión del sitio web:
○ Formulario de comentarios:
○ Formulario de pedido:
Creo que tienes la esencia de crear formularios HTML. Entonces, en la lección de hoy te diré, como crear un sencillo HTML forma y qué etiquetas se pueden usar para crear diferentes campos de formulario.
De ahora en adelante pido su especial atención, porque el tema es complejo e importante.
HTML forma es un campo en el que el usuario ingresa cierta información. Pero, esta información también debe enviarse de alguna manera. Una especie de formulario HTML es como una moto sin gasolina, todo parece estar ahí, pero por alguna razón no va. Entonces, para que el formulario funcione y envíe la información que el usuario ingresó, debe crear un controlador de formulario en el archivo . Pero no se moleste con el controlador, ya que ahora solo está tomando el curso para principiantes. Exploraremos más el tema del controlador de formulario en la sección de PHP. Entonces, algo que me desvío del tema principal.
Aprendiendo a crear formularios HTML Cualquier formulario HTML constará de una etiqueta principal
. Dentro de la etiqueta se insertan el resto de elementos del formulario que se mostrarán en la página web.
El formulario debe colocarse entre las etiquetas.
Elementos de formulario
○ Etiqueta aporte
Etiqueta aporte - esta parte del elemento de campo de formulario está destinada a ingresar texto pequeño, números. la etiqueta de cierre no es necesaria
*atributos para la etiqueta<
aporte
>
nombre - nombre del elemento
tamaño - tamaño del campo
requerido – campo requerido
enfoque automático: el puntero del mouse estará inmediatamente en el campo al cargar una página web
longitud máxima: con este atributo puede especificar el número máximo de caracteres para ingresar en el campo. De forma predeterminada, sin el atributo de longitud máxima, se puede ingresar un número ilimitado de caracteres en el campo
marcador de posición: una sugerencia para el usuario que se mostrará justo dentro del formulario de campo (usado para usar el atributo de valor).
tipo - tipo de elemento
Ejemplo de relleno:
tipo de elemento
Campo de texto
○ Campo de texto "texto" :
Resultado:
○ Campo de contraseña "contraseña" :
Resultado:
○ Campo para correo electrónico "correo electrónico" :
Resultado:
○ Botón para seleccionar un archivo de la computadora "archivo" :
Resultado:
○ El campo para ingresar el teléfono "tel" :
Resultado:
○ Campo de búsqueda :
Resultado:
○ Campo de selección de color "color" :
Resultado:
○ Campo para ingresar y seleccionar números "número" :
min - valor mínimo
max - valor máximo
paso - paso.
Resultado:
○ Campo de fecha "fecha" :
Resultado:
○ Campo para seleccionar fecha y hora local en el formato (05/05/2015 00:00) :
Resultado:
○ Mostrar calendario desplegable.
Resultado:
○ Campo de tiempo "tiempo" :
Resultado:
○ Deslizador de rango :
Resultado:
○ Caja :
marcada: este atributo especifica qué casilla de verificación debe estar habilitada de forma predeterminada
Resultado:
○ Interruptor de radio "radio" :
marcado: este atributo especifica qué interruptor de radio debe habilitarse de forma predeterminada
Resultado:
Botones
○ botón :
valor - etiqueta en el botón
Resultado:
○ Botón para enviar datos "enviar" :
valor - etiqueta en el botón
Resultado:
○ Botón de reinicio :
valor - etiqueta en el botón
Resultado:
○ botón de imagen :
Resultado:
○ Campo oculto "oculto"
○ seleccionar etiqueta
Etiqueta seleccionar - esto es parte del elemento de formulario, diseñado para ingresar a una lista desplegable. se requiere etiqueta de cierre
es el marco para la lista desplegable.
Para crear elementos de lista desplegable, hay una etiqueta
. se requiere etiqueta de cierre
*atributos para la etiqueta
Y
Nombre es el nombre de toda la lista. Establecer solo para la etiqueta
.
múltiple: para la selección múltiple, solo cuando selecciona debe mantener presionada la tecla "CTRL". Establecer solo para la etiqueta
.
Valor: establecido para cada elemento de la lista para la etiqueta
.
disabled: desactiva la selección de un elemento en la lista desplegable. Establecer solo para la etiqueta
.
No urgente
Urgente
Por mensajería
Resultado:
Mensajería urgente no urgente
O así:
No urgente
Urgente
Por mensajería
Resultado:
Mensajería urgente no urgente
Ahora vamos a bloquear de la lista "Urgente"Atributo"deshabilitado":
No urgente
Urgente
Por mensajería
Resultado:
Mensajería urgente no urgente
○ lista desplegable por grupo :
La etiqueta se utiliza para crear una lista de grupo
Opción
área de texto
etiqueta
conjunto de campos
Leyenda
Resultado:
Opción área de texto
○ para opción múltiple :
Opción
área de texto
etiqueta
conjunto de campos
Leyenda
en etiqueta se utiliza el atributo "múltiple".
Resultado:
Opción Textarea Etiqueta Fieldset Leyenda
Campo de texto de varias líneas ○ etiqueta de área de texto
Etiqueta área de texto - esto es parte del elemento de campo de formulario, diseñado para ingresar texto grande, números. se requiere etiqueta de cierre
.
*atributos para la etiqueta<
área de texto
>
nombre - nombre del campo
cols - ancho de campo
filas - altura del campo
marcador de posición: una pista para el usuario que se mostrará justo dentro del campo del formulario.
Resultado:
O así:
Resultado:
Ingrese texto
O así:
Resultado:
Diseño de "marco" (campo) ○ etiqueta de conjunto de campo
etiqueta de conjunto de campo - con esta etiqueta, puede dibujar un marco alrededor del objeto. Se requiere etiqueta de cierre .
Etiquetas adicionales Se requiere etiqueta de cierre .
encabezamiento Texto dentro de un marco.
Resultado:
Eso es todo lo que quería hablar sobre el tema "Formularios HTML". Ahora resumamos y en la práctica intentaremos crear un formulario simple, utilizando ya el conocimiento que ha aprendido de este artículo.
Aquí está mi formulario:
Resultado:
Publicación anterior Siguiente publicación
¿Te gustó el artículo? Compártelo
Los visitantes ahora están discutiendo