Cree un programa de elementos de formulario para html. Creación de formularios en HTML. Un ejemplo de cómo crear un hermoso formulario HTML
Última actualización: 08.04.2016
Se crea un campo de texto de una sola línea utilizando el elemento de entrada cuando su atributo de tipo se establece en texto:
usando una serie atributos adicionales Puedes personalizar el campo de texto:
dirname: establece la dirección del texto
longitud máxima: máxima cantidad permitida caracteres en un campo de texto
patrón: define el patrón con el que debe coincidir el texto de entrada
marcador de posición: establece el texto que se muestra de forma predeterminada en el cuadro de texto
solo lectura: hace que el campo de texto sea de solo lectura
obligatorio: indica que el campo de texto debe tener un valor
tamaño: establece el ancho campo de texto en caracteres visibles
valor: establece el valor predeterminado en el campo de texto
Apliquemos algunos atributos:
En este ejemplo, el segundo cuadro de texto establece inmediatamente los atributos de longitud máxima y tamaño. En este caso, el tamaño, es decir, la cantidad de caracteres que caben en el espacio visible del campo es mayor que la cantidad de caracteres permitida. Sin embargo, todavía no podremos ingresar más caracteres que la longitud máxima.
EN en este caso También es importante distinguir entre los atributos de valor y de marcador de posición, aunque ambos establecen texto visible en el campo. Sin embargo, el marcador de posición establece algún tipo de sugerencia o solicitud de entrada, por lo que generalmente está marcado gris. Mientras que el valor representa el texto predeterminado ingresado en el campo:
Los atributos de solo lectura y deshabilitado hacen que el campo de texto sea inaccesible, pero van acompañados de diferentes efecto visual. En el caso de deshabilitado, el campo de texto aparece atenuado:
Entre los atributos de un campo de texto, también cabe destacar un atributo como lista . Contiene una referencia a un elemento de lista de datos, que define un conjunto de valores que aparecen como información sobre herramientas cuando se ingresan en un campo de texto. Por ejemplo:
El atributo de lista de un campo de texto apunta a la identificación del elemento de la lista de datos. El elemento datalist en sí define los elementos de la lista utilizando elementos de opción anidados. Y cuando escribe en un campo de texto, esta lista aparece como información sobre herramientas.
Campo de búsqueda
Se utiliza para crear campos de búsqueda. elemento de entrada Con atributo de tipo="buscar" . Formalmente, es un campo de texto simple:
Campo de contraseña
Para ingresar una contraseña, use el elemento de entrada con el atributo tipo="contraseña". Su característica distintiva es que los caracteres ingresados están enmascarados con puntos:
Para textos grandes, por ejemplo para mensajes de correo, es conveniente utilizar este elemento en particular. Se crea mediante etiquetas. y tiene siguientes parámetros:
– nombre- nombre del campo,
– columnas- ancho del campo en caracteres,
– filas- número de líneas de texto visibles en la pantalla,
– envoltura- forma de transferencia de palabras:
– apagado- no se produce ninguna transferencia,
– virtual- se muestra la transferencia, pero el servidor recibe una cadena indivisible,
– físico- transferencia tanto en pantalla como al llegar al servidor.
– desactivado- campo inactivo,
– solo lectura- Sólo se permite lectura.
Resultado:
Listas desplegables
Las listas pueden ser de un solo elemento o de selección múltiple. Ambos se especifican mediante etiquetas. , dentro de qué elementos de valores especificados por la etiqueta se encuentran Veamos los parámetros de estas etiquetas:
– nombre- nombre de la lista. Cada elemento de la lista seleccionado cuando se transfiera al servidor tendrá la forma: nombre.valor, donde el valor se toma de la etiqueta de opción;
– tamaño- determina la cantidad elementos visibles en la lista: 1 - una lista desplegable simple, más de 1 - una lista con una barra de desplazamiento;
– múltiple- Permite la selección de múltiples elementos de la lista.
– seleccionado- se utiliza para marcar el elemento de la lista que tiene más probabilidades de ser seleccionado; si la lista tiene opciones múltiples, entonces se pueden marcar varios elementos;
– valor- el valor que se enviará al servidor si se selecciona el elemento.
¿Qué idioma quieres aprender?
¿Cuánto tiempo estás dispuesto a dedicar a esto?
Qué días de la semana te convienen para las clases:
(seleccione con presionado tecla Ctrl)
Resultado:
También hay etiquetas<grupo opt>… , permitiéndole agrupar elementos de la lista según algunos criterios. Por ejemplo, para crear un catálogo de sitios en forma de lista, es más conveniente dividirlo en grupos por intereses. Tenga en cuenta que en este caso es necesario especificar etiquetas de cierre.. Código de muestra:
Catálogo de sitios:
Resultado:
Inscripciones
Todos los elementos del formulario se pueden asociar con sus etiquetas usando el elemento y su parámetro for, cuyo valor es el nombre del elemento al que asociamos la etiqueta. Por ejemplo:
Resultado:
condición de trabajo
Según la opción, cree un formulario para el ingreso de datos. La página debe contener lo siguiente. elementos visuales:
1. título;
2. texto que explique el propósito del formulario;
3. Formulario de entrada de datos, según la opción. Seleccione usted mismo los tipos de elementos para la entrada de datos (al menos 3 diferentes);
4. cavar – “ ENVIAR», « CLARO»;
5. información sobre el creador de la página – nombre completo, grupo, correo electrónico.
Figura 1 – Vista aproximada paginas
Agregar un botón a cada campo del formulario Explicación", al hacer clic, se abre una ventana con información explicativa o una imagen, el botón " CERCA».
Cuando presionas el botón " ENVIAR", se verifica que los datos del formulario sean correctos: todos los campos están completos, los campos numéricos contienen valores válidos, elimina los espacios iniciales y finales. Si los datos en uno o más campos no coinciden, se debe mostrar una ventana indicando el nombre y un texto breve que explique los requisitos para los datos ingresados en el campo. Si los datos se ingresan correctamente, los datos se envían después de la confirmación en el cuadro de diálogo. Coloque dos en el formulario. campos ocultos Con fecha actual y hora, que también se transmiten al servidor. Forma aproximada:
Figura 2 – Vista aproximada del formulario de ingreso de datos
Tabla 1 – Opciones para formularios de entrada de datos
| Opción | Descripción |
| Taller, zona, nombre completo Volumen de trabajo realizado | |
| UDC, nombre completo Autor, Nombre, Cantidad | |
| Número de tren, Nombre, Lugar de salida, Lugar de llegada, Categoría | |
| Organización, nombre completo, año de nacimiento, lugar ocupado | |
| País, Área, Población, Continente, Capital | |
| Marca de automóvil, Número, Color, Año de fabricación, Kilometraje | |
| Raza del perro, Nombre, Padre, Madre, Fecha de nacimiento, Nombre completo del propietario | |
| Tipo de hortalizas, Nombre de la variedad, Fecha de siembra, Fecha de cosecha, Cosecha | |
| Disciplina, Alcance de las conferencias, Alcance de los laboratorios, Tipo de control, Grupo | |
| Fecha, Temperatura, Presión, Nubosidad, Dirección del viento | |
| Nombre, Empresa, Costo, Cantidad, Fecha | |
| Nombre de la banda, País, Álbum, Fecha de lanzamiento, Número de ventas | |
| Nombre del pico, Altitud, País, Año de conquista, Número de ascensiones | |
| Nombre completo, Año de nacimiento, Altura, Peso, Tipo de sangre | |
| Nombre completo, Campo de actividad, Año de nacimiento, País, Número de publicaciones |
Preguntas de seguridad
1. Describe la etiqueta para crear un campo de texto. Da su sintaxis.
2. Describe una etiqueta para crear un campo de texto para ingresar una contraseña. Da su sintaxis.
3. Describe la etiqueta para crear casillas de verificación. Da su sintaxis.
4. Describe la etiqueta para crear botones. Da su sintaxis.
5. Describe una etiqueta para crear un campo de selección de archivos. Da su sintaxis.
6. Describe una etiqueta para crear un campo de texto de varias líneas. Da su sintaxis.
7. Describe la etiqueta para crear una lista desplegable. Da su sintaxis.
Maestro Stishenok E.O.
Farberov A.G.
Este elemento de formulario está diseñado para crear un área en la que puede ingresar varias líneas de texto. En dicho campo de texto, está permitido realizar saltos de línea; estos se guardan al enviar datos al servidor.
Campo para texto multilínea indispensable para agregar comentarios a artículos, escribir publicaciones en foros, insertar y editar publicaciones de blogs y en muchos otros casos cuando una línea de texto claramente no es suficiente.
La sintaxis para crear un campo es la siguiente.
Entre etiquetas Puede colocar cualquier texto que se mostrará dentro del campo. Si no hay texto, el campo inicialmente estará vacío.
Los atributos válidos se enumeran en la tabla. 1.