› › Creando un cuestionario en html. Formularios HTML. Campo de texto multilínea - etiqueta

Creando un cuestionario en html. Formularios HTML. Campo de texto multilínea - etiqueta


Los formularios en HTML son los más complejos, pero por otro lado, quizás los más tema interesante en HTML.

Los formularios web permiten a los visitantes del sitio ingresar cierta información en campos especiales y el desarrollador la recibe en la forma que más le convenga.

Un ejemplo de formulario sería libro de visitas, cuestionario, prueba en línea. Los formularios se rellenan al registrarse en el sitio web, al realizar pedidos en una tienda online, etc.

Usando HTML, puede crear un marco de formulario: campos de texto, menús, listas, botones, casillas de verificación y botones de opción. Es decir, aquellos elementos con cuya ayuda se ingresa cierta información en el formulario.

Luego, los datos ingresados ​​en el formulario se envían al servidor para su procesamiento. Pero HTML aquí es impotente: un programa o script adjunto ya está trabajando en el procesamiento del formulario. Estos programas suelen estar escritos en lenguaje php o javascript.

Atributos de formulario - etiqueta

Puede haber varios formularios en una página web ( tanto como el desarrollador necesite). Cada uno de ellos comienza con la etiqueta. y termina con una etiqueta de cierre .

El atributo de acción es obligatorio para cualquier formulario: especifica la dirección del archivo que sirve el formulario ( procesa los datos introducidos en el mismo).

El atributo del método especifica cómo se enviará el contenido del formulario. Hay dos métodos: GET y POST. Ahora no tiene sentido profundizar en estos parámetros, ya que el tema del envío de información mediante los métodos GET y POST se relaciona con los lenguajes de procesamiento de datos ( por ejemplo PHP). Basta saber que es el método de transferencia de datos POST el que se utiliza en la mayoría de los casos en los formularios.

Atributo de nombre de etiqueta

es opcional. Pero si hay varios formularios en el documento, el responsable del tratamiento debe identificar de alguna manera cada uno de ellos. Por lo tanto la presencia atributo de nombre en este caso es necesario: especifica un nombre de formulario único.

También puede configurar la codificación de los datos de entrada; el atributo Accept-charset es responsable de esto y también, usando atributo objetivo, defina una ventana en la que se mostrará el resultado del procesamiento del formulario enviado ( en una ventana nueva o actual).

Pero la etiqueta en sí ¡No tiene sentido, porque el formulario transmite datos que primero deben ingresarse en alguna parte!

Entrada de datos. Campos de formulario - etiqueta

Etiqueta Esta es la etiqueta más común que se encuentra en los formularios. Está diseñado para crear varios elementos, utilizado para ingresar datos en el formulario: estos son campos de texto, botones, casillas de verificación, botones de opción.

El tipo es el atributo principal de la etiqueta. . Establece el tipo de campo ( elemento) formas:

Tipo de valor de atributo="..."

Resultado

Descripción

Campo de texto de una sola línea para ingresar texto. El atributo de tamaño especifica el ancho del campo en caracteres.

Campo de texto para ingresar una contraseña.
El atributo maxlength establece cantidad máxima caracteres que se pueden introducir

1 2 3

Cambiar.
Puede seleccionar solo una opción de las ofrecidas. El atributo marcado especifica un campo previamente verificado.

1 2 3

Caja.
Hay varias opciones para elegir. Atributo marcado define un campo previamente verificado.

Botón.
El atributo de valor establece la etiqueta en el botón.

Botón de reinicio.
Devuelve los campos del formulario a su formato original. Restablecer los datos ingresados.

Botón para enviar los datos introducidos.

Campo para ingresar el nombre del archivo que se envía.

Botón de imagen.
También se utiliza para enviar datos al servidor. El atributo src especifica la dirección del archivo de imagen.

Campo oculto: invisible para el usuario.

Menú desplegable - Etiquetas igual que la etiqueta Sirve para recopilar información: crea una lista de la que se pueden seleccionar uno o más elementos. Cada elemento corresponde a un valor, que se envía al servidor para su procesamiento.

Vista la lista que se está creando depende del valor atributo de tamaño: con tamaño = "1" ( valor predeterminado) la lista será desplegable.

Un valor diferente para el atributo de tamaño corresponderá al número de elementos de la lista mostrados. Por ejemplo, con size="3" , serán visibles tres elementos. Para ver otros elementos de la lista ( si hay alguno) debe usarse raya vertical desplazamiento, que se agrega automáticamente.

De forma predeterminada, solo se puede seleccionar un elemento de la lista. Agregar el atributo múltiple a una etiqueta y crea cada elemento de la lista.

Usando el atributo de nombre de la etiqueta





¡7 maravillas del mundo!




El punto cardinal es una de las cuatro direcciones principales:

Norte Suroeste Este

¡7 maravillas del mundo!

Pirámide de Keops Jardines colgantes de Babilonia Estatua de Zeus en Olimpia Templo de Artemisa en Éfeso Mausoleo de Halicarnaso Coloso de Rodas Faro de Alejandría

Campo de texto multilínea - etiqueta

Si el contenido del campo excede su tamaño, aparecerá un control deslizante.

Ejemplo de uso de un formulario

Ahora veamos cómo funciona el formulario.

Formulario de pedido de vídeos educativos:


Su nombre: *



Tu pedido:



Seleccionar medios:


CD


DVD


Memoria USB


Su correo electrónico: *



Su dirección: *





26.02.2016


¡Hola a todos!
Sigamos aprendiendo los conceptos básicos de HTML. En esta lección veremos Qué ha pasadoHTML forma y cómo se crea.
Si te has dado cuenta, hoy en día ningún sitio web puede prescindir de formularios. Estos formularios pueden ser diferentes, por ejemplo, un formulario de comentarios, un formulario de pedido, un formulario de registro e inicio de sesión, un formulario para enviar comentarios, reseñas, un formulario de búsqueda y muchos otros.

Creo que ahora necesitamos mostrarle ejemplos de cómo se ven visualmente los formularios HTML.

○ Formulario de búsqueda:

○ Formulario de inicio de sesión del sitio:

○ Formulario de comentarios:

○ Formulario de pedido:

Creo que has comprendido la esencia de la creación de formularios HTML. Entonces, en la lección de hoy te diré, cómo crear un sencilloHTMLforma y qué etiquetas se pueden utilizar para crear diferentes campos de formulario.

Desde ahora pido especial atención porque el tema es complejo e importante.

HTMLforma 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, parece tenerlo todo, pero por alguna razón no se mueve. Entonces, para que el formulario funcione y envíe la información ingresada por el usuario, debe crear un controlador de formulario en el archivo . Pero no te molestes con el guía, ya que ahora sólo estás haciendo un curso para principiantes. Veremos el tema del controlador de formulario en la sección "PHP". Entonces, de alguna manera me distraí del tema principal.

Aprendiendo a crear formularios HTML

Cualquier formulario HTML constará de una etiqueta principal.

. Dentro de una etiqueta
los elementos restantes del formulario se insertan y se mostrarán en la página web.

El formulario debe colocarse entre etiquetas.

.
Para etiqueta

se requiere etiqueta de cierre .

*atributos para la etiqueta habitación >

NOMBRE: nombre único del formulario. Se utiliza cuando hay varios formularios en un sitio.
ACCIÓN: este atributo especifica la ruta al controlador de formulario. Se requiere.
MÉTODO – método de envío.

  • POST: los datos se transmiten de forma oculta
  • GET (predeterminado): los datos se transmiten en texto claro a través de la línea del navegador.

Un ejemplo de cómo se ve una etiqueta con los siguientes atributos:

Aquí habrá varios elementos de formulario que se mostrarán en la página web.

Elementos de formulario

○ Etiquetaaporte

Etiquetaaporte– esta parte del elemento del campo del formulario está destinada a ingresar no texto grande, números
Para etiqueta no se necesita etiqueta de cierre .

*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
  • maxlength: con este atributo puede especificar el número máximo de caracteres para ingresar en el campo. De forma predeterminada, sin el atributo maxlength, puede ingresar cantidad ilimitada personajes
  • marcador de posición: una sugerencia para el usuario que se mostrará directamente dentro del formulario de campo (anteriormente se usaba el atributo de valor).
  • tipo - tipo de elemento

Ejemplo de rellenos:

tipo de elemento

Campo de texto

○ Campo de texto "texto":

Resultado:

○ Campo de contraseña:

Resultado:

○ Campo de correo electrónico "correo electrónico":

Resultado:

○ Botón para seleccionar un archivo del “archivo” de la computadora:

Resultado:

○ Campo de entrada del 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
  • máx – valor máximo
  • paso - paso.

Resultado:

○ Campo de selección de fecha “fecha”:

Resultado:

○ Campo para seleccionar fecha y hora local en el formato (05/05/2015 00:00):

Resultado:

○ Mostrar un calendario desplegable.
Campo para seleccionar el año y mes en el formato (julio 2015):

Resultado:

○ Campo de selección de hora "hora":

Resultado:

○ Control deslizante de rango:

Resultado:

○ Caja:

marcado: este atributo especifica qué casilla de verificación debe estar habilitada de forma predeterminada

Resultado:

○ interruptor de 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 envío de datos “enviar”:

valor - etiqueta en el botón

Resultado:

○ botón de reinicio:

valor - etiqueta en el botón

Resultado:

○ Botón con imagen:

Resultado:

○ campo oculto

○ seleccionar etiqueta

Etiquetaseleccionar– esto es parte de un elemento de formulario destinado a ingresar a una lista desplegable.
Para etiqueta se requiere etiqueta de cierre .
Etiqueta Y

  • Nombre es el nombre de toda la lista. Establecer solo para etiqueta .
  • Valor: establecido para cada elemento de la lista para la etiqueta
  • deshabilitado: bloquea la selección de un elemento en la lista desplegable. Establecer solo para etiqueta

Resultado:

No urgente Urgente Por mensajería

O así:

Resultado:

No urgente Urgente Por mensajería

Ahora bloqueémoslo de la lista "Urgente" con el atributo "deshabilitado":

Resultado:

No urgente Urgente Por mensajería

○ lista desplegable por grupo:

Para crear una lista de grupos, use la etiqueta

Resultado:

Opción área de texto
Leyenda del conjunto de campos de etiqueta

○ para selección múltiple:

en la etiqueta

*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á directamente dentro del formulario de campo.

Resultado:

O así:

Resultado:

Introducir texto

O así:

Resultado:

Diseño “Marco” (conjunto de campos)

○ Etiqueta de conjunto de campos

Etiqueta de conjunto de campos– Usando esta etiqueta puedes dibujar un marco alrededor de un objeto.
Se requiere etiqueta de cierre.

Etiquetas adicionales
Etiqueta de leyenda: indica el título.
Se requiere etiqueta de cierre.

Título Texto dentro del marco.

Resultado:

Eso es todo lo que quería contarles sobre el tema "Formularios HTML". Ahora resumamos y en la práctica intentemos crear. forma sencilla, utilizando el conocimiento que ha adquirido en este artículo.

Aquí está mi formulario:

Formulario de currículum vitae para un empleado de la planta piloto de PJSC "KMZ"



¿Qué trabajo quieres ser?


¿Qué salario quieres recibir (por mes)?
10$ 11$



Resultado:

Publicación anterior
Próxima entrada

Descripción

etiqueta HTML

Crea un formulario HTML que se utiliza para enviar la entrada del usuario al servidor.

Dado que el formulario en sí no proporciona ningún medio para la entrada del usuario, dentro del elemento contener otros elementos cuya finalidad es facilitar al usuario varias maneras entrada de datos:

Además de estos elementos, puede utilizar cualquier otro elemento HTML dentro del formulario.

Por defecto, el formulario no se muestra de ninguna manera en la página web, solo son visibles los elementos ubicados en su interior, pero con usando CSS Puedes darle a la forma cualquier apariencia.

Atributos

Accept-charset: especifica una codificación de caracteres, o una lista de juegos de caracteres separados por espacios, para la entrada del formulario enviada al servidor para su procesamiento. Si los datos incluyen caracteres que no son compatibles con la codificación especificada, el navegador intenta determinar la codificación adecuada para ellos. Si no se puede determinar una codificación adecuada, los caracteres se codifican en códigos numéricos.

El valor predeterminado es la cadena reservada "DESCONOCIDO" (los navegadores interpretan este valor como una codificación de caracteres idéntica a la del documento que contiene el elemento ). acción: Indica la dirección de envío de datos del formulario cumplimentado, donde se tratará esta información. autocompletar: determina si se activa o desactiva el autocompletado del formulario. Cuando el autocompletar está habilitado, el navegador completa automáticamente los valores que el usuario ingresó la vez anterior que usó el formulario.

  • Valores posibles atributo:
  • en: el navegador muestra automáticamente los valores ingresados ​​previamente por el usuario (valor predeterminado).

apagado:

El usuario debe ingresar los valores de cada campo cada vez que utiliza el formulario. Los valores ingresados ​​previamente no se mostrarán.

  • Nota: El atributo de autocompletar no es compatible con el navegador Opera. Enctype: especifica cómo se codifican los datos del formulario cuando se envían al servidor. Solo se puede utilizar junto con el atributo método="post". Valores posibles: aplicación/x-www-form-urlencoded: predeterminado: todos los caracteres se codifican antes del envío (los espacios se convierten en un carácter "+" y
  • personajes especiales a valores ASCII HEX). multiparte/formulario-datos: Los caracteres no están codificados. Utilizado para elementos, que tienen
  • atributo de tipo establecido en "archivo". texto/sin formato: los espacios se convierten al carácter "+", pero no se codifican para
valores hexadecimales
  • caracteres especiales como apóstrofes. método: especifica el método de transferencia de datos HTTP que se utilizará al enviar datos del formulario. Valores posibles: conseguir: navegador como pares nombre=valor agregándolos al final de la URL. Se utiliza un signo de interrogación (?) como separador entre la URL principal y los datos transmitidos, y un carácter comercial (&) para separar los datos transmitidos entre sí. este método Se utiliza al enviar datos pequeños.
  • correo: los datos no se envían como parte de la URL, sino como el contenido de la solicitud del navegador. Este método se utiliza para enviar grandes cantidades de datos.
Si no se especifica el atributo del método, el método GET se utilizará de forma predeterminada.

nombre: Especifica el nombre del formulario. El nombre se puede utilizar en JavaScript para hacer referencia a un elemento por su nombre o para hacer referencia a los datos del formulario una vez enviado. Si se utilizan varios formularios en un documento, sus nombres no deben repetirse y no se debe dejar una cadena vacía como valor del atributo. novalidate: Indica que los datos ingresados ​​en el formulario no serán validados antes del envío. Posibles valores para el atributo booleano novalidate: Nota: el atributo novalidate no es compatible con IE9 y versiones posteriores

versiones anteriores

  • y en Safari. Destino: define un nombre de marco o palabra clave que especifica dónde mostrar la respuesta recibida después de enviar el formulario.
  • _blanco: abre el documento en una nueva ventana o pestaña.
  • _ser: abre un documento en el mismo directorio donde se encuentra el enlace (predeterminado).
  • _padre: abre el documento en el marco principal.
  • _arriba: abre el documento en todo el ancho de la ventana.

Etiqueta nombre_cuadro:

abre un documento en un iframe cuyo nombre se especificó como valor.

también admite atributos y eventos globales

Estilo predeterminado

formulario (pantalla: bloque; margen superior: 0em;)
Nombre:

Ratón Entregar Buenos días a todos. Alexey Gulynin está en contacto. En el último artículo vimos problema con la codificación en el sitio. En este artículo me gustaría hablar de creando formularios en HTML. Ella dijo que si conoces el significado de todas las formas verbales del verbo get, entonces solo podrás comunicarte en inglés con su ayuda. Lo mismo ocurre con los formularios en HTML. Si conoce los formularios, ya conoce bastante bien HTML. Hoy en día probablemente prácticamente no existen sitios que no tengan formularios html. Los formularios se utilizan en todas partes: al crear registros, autorizaciones, suscripciones, libros de visitas, foros, al crear su propio motor y absolutamente en todas partes. El artículo probablemente será largo, así que prepárate. Comencemos a estudiar el formulario de inmediato usando un ejemplo:

Crear formularios HTML

Nombre
Contraseña

Seleccione un motor de búsqueda Google yandex Excursionista
¿Listo para explorar formas? Sí Por supuesto que si =)
Elige una de las opciones
Archivo

botón sencillo
Enviar formulario
Borrar campos de formulario


A primera vista te hace temblar. De hecho, aquí todo es sencillo, averigüémoslo poco a poco:

Creando un formulario comienza con palabra clave

. Este etiqueta emparejada, en consecuencia, la creación del formulario debe completarse con la etiqueta
. en la etiqueta
hay varios atributos. El atributo de nombre especifica el nombre del formulario (esto es necesario para procesar el formulario, por ejemplo en Javascript). Por supuesto, no puedes indicar el nombre, pero aun así recomiendo hacerlo. EN atributo de acción Se indica el nombre del script que procesará el formulario (generalmente un script php) y se ve así action="request.php" . En nuestro caso, no estamos procesando el formulario. El atributo método indica de qué manera transferiremos los datos: abiertos ( get ) u ocultos ( post ). Sólo un ejemplo de lo que se mostrará en la línea del navegador con estos dos atributos diferentes:

1) Si usamos método de publicación: mysite.ru/request.php.
2) Si usamos obtener método: mysite.ru/request.php?myname="Alex"&surname="Gulynin".
Creo que las diferencias son claras.

Elementos del formulario:

1) Campo de prueba. Se crea un campo de texto usando una etiqueta. , como de hecho todos los elementos de la forma. El atributo type="text" es responsable de crear un campo de texto. El atributo de nombre es el nombre, como ocurre con todos los elementos de formulario. El atributo de valor es el valor predeterminado.

2) Campo de contraseña. Establecer usando la misma etiqueta con el atributo tipo="contraseña".

3) Área de texto. Establecer usando una etiqueta . Este elemento tiene varios atributos. También puede configurar el atributo de nombre. El atributo de filas es responsable del número de filas, el atributo cols es responsable del número de columnas. Navegadores modernos Puede expandir el área de texto para que sea más fácil ingresar texto en ella. Los atributos de filas y columnas son, por así decirlo, valores mínimos, al que se puede comprimir el formulario (inicialmente, cuando se carga la página, el área de texto tiene dimensiones que se especifican atributos de filas y columnas).

4) Botones de opción. El propósito de los botones de opción es seleccionar un valor entre varios. Los botones de radio también se crean usando la etiqueta con el atributo type="radio". El atributo de valor especifica el valor que corresponde al botón de opción. Me gustaría llamar su atención sobre este punto: en nuestro ejemplo, los 3 botones tienen mismo valor atributo de nombre. si tienen significado diferente atributo de nombre, podemos hacer clic en todos ellos. En consecuencia, no será posible procesarlos correctamente. El atributo marcado (no tiene valor) indica qué botón de opción se seleccionará de forma predeterminada.

5) Casillas de verificación. A diferencia de los botones de opción, se puede hacer clic en todas las casillas de verificación. Escriba un ejemplo y compruébelo usted mismo. Creado usando una etiqueta con el atributo type="checkbox". El significado de los atributos restantes es el mismo que el de los botones de opción. Sólo puedo decir que si desmarcamos todas las casillas, entonces tendremos valor vacío, es decir. en nuestro caso será mycheck="" .

6) Lista desplegable. Se crea una lista desplegable usando una etiqueta. . En este diseño, también necesitas usar la etiqueta.

7) Campo para enviar un archivo. Probablemente hayas descargado y enviado un archivo más de una vez, por ejemplo, al configurar un avatar para tu perfil. Dicho elemento se implementa mediante la etiqueta. con el atributo tipo="archivo". Lo más difícil es procesar el archivo correctamente, pero esto será tema de un artículo aparte.

8) Campo oculto. A veces es necesario transferir algunos datos junto con el resto del formulario. Para eso es la etiqueta. con el atributo tipo="oculto". No es visible en el formulario en sí, pero si miras código fuente páginas ( clic derecho en la página y seleccione “código fuente” o presione la combinación de teclas “ctrl+u”), entonces se podrá ver este campo.

9) Botones. Los botones se crean usando una etiqueta. con el atributo tipo="botón". El atributo de valor es responsable de lo que se escribirá en el botón. Los botones suelen servir para manejar algún tipo de evento. Puede leer sobre los eventos de botones en uno de los siguientes artículos.

10) Envío del formulario. Básicamente, este es el mismo botón, pero con el atributo type="submit". Al hacer clic en el botón, el formulario se procesará a lo largo de la ruta especificada en el atributo de acción de la etiqueta.

formularios HTML - elementos complejos interfaz. Incluyen varios elementos funcionales: campos de entrada Y