Crear y trabajar con formularios en html. Creando formularios HTML Veamos un pequeño ejemplo.

Teniendo en cuenta las etiquetas HTML básicas, no podemos evitar tocar un elemento tan importante como los formularios. A menudo se necesitan comentarios en las páginas web. Por ejemplo, completar un formulario en el sitio, registro, autorización, comentarios, etc. En todos estos casos, el usuario completa áreas especiales (campos de formulario) en la página, después de lo cual los datos se envían al servidor. Los formularios se utilizan para crear comentarios. Un formulario es un fragmento de un documento HTML destinado a la entrada del usuario.

La figura muestra un formulario de inscripción de estudiantes en el sitio web de una institución educativa.

Se utiliza un contenedor para crear un formulario.

con el atributo de acción, que especifica la página en el servidor que procesará los datos enviados por el formulario.

Estructura en su forma más simple:

elementos de forma...

Cada formulario también debe tener un botón de envío para enviar datos después de completar el formulario.

Estructura de botones:

Entonces, para registrar casi todos los elementos del formulario, se usa la etiqueta. con el atributo tipo. Para crear un botón que restablece todos los datos de los formularios, se utiliza la siguiente estructura:

Para crear un campo de texto, hay un parámetro de texto. Se utilizan los siguientes parámetros: nombre – nombre del campo; tamaño – para el campo en símbolos; maxlength: el número máximo posible de caracteres en el campo; valor: información que se muestra en el formulario de forma predeterminada

Ejemplo de entrada de formulario con dos campos de texto:

El resultado del formulario se muestra en la figura.

Si necesita ingresar una gran cantidad de información en un campo de texto, por ejemplo, un comentario, use el formulario del área de texto, que se crea usando una etiqueta. con los siguientes atributos: nombre – nombre del área; cols – número de columnas de área; filas – número de filas; wrap: método para ajustar líneas (activado: ajustar líneas, desactivado: no ajustar líneas).</p><p>Al código anterior agreguemos un campo de área de texto:</p><p>Un comentario: <br><textarea name="area" cols=”25” rows=”5” wrap=”on”>

El resultado del código trabajando con el área de texto se muestra en la figura.

El siguiente elemento de los formularios son listas que le permiten elegir entre el conjunto de valores presentado. Las etiquetas le permiten crear un formulario de lista

Para que el elemento se resalte cuando se carga la página, es necesario en la etiqueta

Un método de selección similar son los elementos de formulario de casilla de verificación y botón de radio. La diferencia entre estos elementos es que una casilla de verificación le permite realizar múltiples selecciones, mientras que un botón de opción solo permite una única selección.

Estructura de una casilla de verificación y entrada de botón de opción:

texto

Boton de radio:

texto

En los elementos especificados en la estructura, el atributo marcado se usa de forma predeterminada para resaltar la casilla de verificación y el botón de opción. En la figura se muestra un ejemplo del uso de una casilla de verificación, un botón de opción y un código HTML.

Otro elemento del formulario es un botón, especificado mediante el atributo de etiqueta de tipo. con el botón de valor:

En el código especificado para crear un botón, hay un parámetro onclick, que generalmente especifica el código en un lenguaje de programación para realizar una acción particular cuando se hace clic en este botón:

Para mostrar un mensaje en una ventana especial, use el comando JavaScript – aler. El resultado del ejemplo se muestra en la figura.

Para insertar una imagen en un botón, utilice el código que se muestra en el siguiente ejemplo:

Al registrarse e iniciar sesión en sitios web, se utiliza un campo con una prueba oculta, que se muestra como estrellas. Este es el elemento del formulario de contraseña:

El registro en el sitio a menudo se divide en varias páginas y cada una de ellas debe contener información de la anterior. Para ocultar la información transmitida, se utiliza el elemento de formulario oculto:

El elemento de formulario oculto será invisible en la ventana del navegador.

Para cargar archivos al servidor, los formularios tienen un elemento de archivo. A continuación se presenta un código de ejemplo para cargar archivos al servidor:

Entonces, en este tema analizamos los elementos de formulario para crear varias páginas HTML que, junto con los controladores de secuencias de comandos en una computadora o servidor, le permiten desarrollar aplicaciones web completas.

Etiquetas HTML que definen formularios HTML en el sitio.

Creamos sitios web y páginas individuales en Internet. para comunicarse con los visitantes.

formularios HTML se utilizan para registrar visitantes en el sitio, para encuestas interactivas y votaciones, le permiten enviar mensajes, realizar compras, etc. HTML El formulario se crea con un propósito: recopilar y posteriormente transmitir información para su procesamiento mediante un script de software o por correo electrónico.

Ejemplo de formulario HTML | Ingrese al sitio

Etiquetas, atributos y valores

- determinar la forma.
name="" - define el nombre del formulario.
método="" - define el método de envío de datos desde el formulario. Valores: "get" (predeterminado) y "post". A menudo se utiliza el método "post", ya que permite transferir grandes cantidades de datos.
action="" - define la URL a la que se envían los datos para su procesamiento. En nuestro caso, enter_data.php ..
- definir elementos de formulario como botones, interruptores, campos de texto para la entrada de datos.
type="text" - define un campo de texto para la entrada de datos.
type="contraseña": define un campo para ingresar una contraseña, con el texto mostrado en forma de asteriscos o círculos.
type="checkbox" - define un botón de opción.
type="hidden" - define un elemento de formulario oculto - utilizado para transferir información adicional al servidor.
size="25" - longitud del campo de texto en caracteres.
maxlength="30" - el número máximo permitido de caracteres ingresados.
value="" - define el valor que se enviará para su procesamiento si se relaciona con botones de radio o interruptores. El valor de este atributo como parte de un campo de texto o botón se mostrará como, por ejemplo, Vasya o Iniciar sesión en el ejemplo anterior.

Ejemplo de formulario HTML | Comentarios en el sitio.

Ejemplo de formulario HTML

Etiquetas, atributos y valores

action="http://site/comments.php" - define la URL a la que se enviarán los datos del formulario.
id="" - define el nombre y el identificador del elemento del formulario.
name="" - define el nombre del elemento del formulario.
- definir un campo de texto como parte del formulario.
cols="" - determina el número de columnas del campo de texto del formulario.
filas="" - define el número de filas del campo de texto del formulario.

si entre coloque texto, se mostrará dentro del campo como un ejemplo que se puede eliminar fácilmente.

Ejemplo de formulario HTML | La lista desplegable

formularios HTML

Etiquetas, atributos y valores

- definir una lista con posiciones para seleccionar.
size="" - determina el número de posiciones visibles en la lista. Si el valor es 1, estamos ante una lista desplegable.
- determinar las posiciones (elementos) de la lista.
value="" - contiene el valor que el formulario enviará a la URL especificada para su procesamiento.
seleccionado="seleccionado": resalta un elemento de la lista como ejemplo.

Ejemplo de formulario HTML | Lista con barra de desplazamiento

Al aumentar el valor del atributo size="" obtenemos una lista con una barra de desplazamiento:

formularios HTML

Para esta opción, utilice el indicador multiple="multiple", que permite seleccionar múltiples posiciones. Su ausencia le permite seleccionar solo un elemento.

type="submit" - define un botón.

type="reset" - define un botón de reinicio.

value="" - define la etiqueta en el botón.

Ver además:

Buenos días, fanáticos del desarrollo web y aquellos que quieran crear su propio sitio web. Antes de eso, todas mis publicaciones estaban dedicadas a los elementos básicos del lenguaje, formas de crear diversos objetos de contenido, su formato, estructuración, etc. Habiendo dominado los temas anteriores, ya podrá crear un sitio web bastante bueno. Sin embargo, estará incompleto sin el tema de hoy: "Creación de formularios en HTML".

Esta sección del idioma es muy importante. Por lo tanto, preste especial atención a estudiarlo; de lo contrario, el recurso web que creó no se lanzará a producción. Por lo tanto, después de leer el artículo, aprenderá por qué necesita usar formularios, qué etiquetas se utilizan para crear y también podrá probar ejemplos específicos en la práctica. ¡Empecemos!

¿Qué es un formulario y cómo funciona?

Forma– este es uno de los objetos más importantes, que está destinado al intercambio de datos de información entre el servidor y el usuario.

En pocas palabras, si desea crear una tienda en línea con la capacidad de solicitar productos en el sitio web, solicitar el registro en un recurso web y trabajar con cuentas o brindar a los clientes comentarios de los gerentes de la empresa, entonces no puede prescindir de los formularios.

El formulario se especifica utilizando un elemento especial del lenguaje html.
.

Tenga en cuenta que el documento de código puede contener varias declaraciones de etiquetas. Sin embargo, solo se puede enviar una solicitud al servidor para procesar los datos. Es por ello que la información que ingresa el usuario en los campos habilitados para ello y se relaciona con diferentes formularios no debe ser dependiente. Además, no está permitido anidar formas unas dentro de otras.

Para aquellos que están impacientes y ansiosos por echar un vistazo rápido a la representación del código, adjunto un ejemplo simple del uso de un panel con un campo de texto para una contraseña con un botón:

1 2 3 4 5 6 7 8 9 10 11 12

Ejemplo

Puede que ahora no quede muy claro qué y cómo interactúa en este pequeño programa, pero te garantizo que después de leer el artículo completo podrás crear aplicaciones mucho más complejas.

Envío de datos al lado del servidor

Para enviar la información escrita (o seleccionada) en un cuadro de diálogo, debe utilizar el mecanismo estándar: Botón de enviar.

El código para dicho método se ve así:

Cuando ejecute la línea presentada, aparecerá un botón con la inscripción: "Enviar".

Otra forma de enviar datos al lado del servidor es presionar la tecla Intro dentro del cuadro de diálogo.

Después de confirmar el envío de la información especificada, esta no llega inmediatamente al servidor. Primero, el navegador lo procesa, lo que da como resultado el formato “nombre=valor”.

El parámetro de atributo es responsable del nombre. tipo etiqueta , y para el valor, los datos ingresados por el usuario. A continuación, la cadena convertida se pasa al controlador, que suele especificarse en el atributo acción elemento

El parámetro de acción en sí no es necesario y, en algunos casos, no es necesario en absoluto. Por ejemplo, si la página de un sitio está escrita usando php o js, entonces el procesamiento se produce en la página actual y no se necesitan enlaces.

Para una mejor comprensión del panorama general del funcionamiento del sitio, me gustaría añadir que en el servidor los datos se procesan en otros idiomas. Así, se consideran lenguajes del lado del servidor: Python, php, lenguajes tipo C (C#, C, etc.), Java y otros.

Ahora me gustaría detenerme y hablar más sobre el elemento. . Para explicarlo en términos simples, entonces necesario para crear campos de texto, botones de opción, varios botones, campos ocultos, casillas de verificación y otros objetos.

La etiqueta no tiene que estar emparejada con Sin embargo, si necesita procesar registros de usuarios o ingresarlos, por ejemplo, en una base de datos, no puede prescindir de un contenedor.

Los principales atributos de este elemento del lenguaje de marcado de hipertexto son:

Texto– crea un campo de texto;
Entregar– crea un botón para enviar datos al servidor;
Imagen– es responsable del botón con la imagen;
Reiniciar– establece un botón para borrar el formulario;
Contraseña– establece un campo de texto específicamente para contraseñas;
Caja– responsable de los campos con casillas de verificación;
Radio– responsable de los campos con la selección de un elemento;
Botón– crea un botón;
Oculto– utilizado para campos ocultos;
Archivo– establece el campo responsable del envío de archivos.

Métodos de transmisión de información.

Hay 2 formas de transferir datos del usuario al lado del servidor: Conseguir Y Correo. Estos métodos realizan la misma acción, pero difieren significativamente entre sí. Por eso, antes de mencionar alguno de ellos, conozcamos sus características.

	Correo	Conseguir
Tamaño de los documentos transmitidos	Limitado al lado del servidor.	Máximo: 4 KB.
Cómo se muestra la información enviada	Disponible solo cuando se ve a través de extensiones del navegador u otros productos de software especiales.	Inmediatamente disponible para todos.
Usando marcadores	No hay forma de agregar a favoritos, ya que las solicitudes no se repiten (todas las páginas enlazan a una dirección).	Cualquier página con una solicitud se puede guardar como marcador y volver a ella más tarde.
Almacenamiento en caché	Según el párrafo anterior, todas las solicitudes están en una sola página.	Cada página se puede almacenar en caché por separado.
Objetivo	Se utiliza para enviar archivos de gran tamaño (libros, imágenes, vídeos, etc.), mensajes, comentarios.	Excelente para buscar valores solicitados en un recurso web o para enviar mensajes de texto cortos.

Para indicar cuál de los dos métodos de transferencia de datos debe utilizar el navegador, en el elemento utilizar el parámetro proporcionado método(Por ejemplo, método = "publicar").

Veamos el segundo ejemplo. Creemos un formulario en el que deberá ingresar sus datos personales (nombre y apellido, fecha de nacimiento) y crear una contraseña. Luego enviamos todo esto al servidor usando el método Correo.

método POST

¡Ingresa tu información personal!

Por ejemplo, para ingresar una fecha, existen interruptores para el número de cada parámetro (día, mes y año), así como un panel desplegable con el propio calendario para mayor comodidad.

Crear un panel de registro

Se han cubierto las etiquetas y atributos básicos. Es por eso que es hora de crear un formulario de registro completo utilizando el estilo CSS y validando los datos ingresados. Por supuesto, no podremos ver el servidor funcionando con ellos, pero proporcionaremos el diseño y detalles importantes.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

Registro

Le aconsejo que guarde el código de este programa en un documento con extensión .html y codificación utf-8, y abra este último en una ventana del navegador. Verá un panel de registro en todo su esplendor con campos para ingresar su nombre, apellido, correo electrónico y contraseña repetida. Tenga en cuenta que cuando inicia la página, el cursor se coloca inmediatamente en el primer campo de texto. Esta técnica se logra a través del atributo enfoque automático.

Los formularios HTML son elementos de interfaz complejos. Incluyen diferentes elementos funcionales: campos de entrada Y , listas <select>, consejos, etc Todo el código del formulario está contenido en el elemento. <form> .</p> <p>La mayor parte de la información del formulario web se transmite utilizando el elemento <input>. Para ingresar una línea de texto, use el elemento <input type="text">, para varias líneas - elemento <textarea>. Elemento <select>crea una lista desplegable.</p> <p>Elemento <label>Crea etiquetas para los campos del formulario. Hay dos formas de agrupar etiquetas y campos. Si el campo está dentro de un elemento <label>, entonces no es necesario especificar el atributo for.</p><p> <label for="lastname">Apellido</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Apellido</label> <label>Apellido <input type="text" name="lastname"></label> </p><p>Los campos del formulario se pueden dividir en bloques lógicos usando el elemento <fieldset>. Cada sección se puede nombrar usando el elemento <legend> .</p><p> <fieldset> <legend>Información del contacto</legend> <label>Nombre <input type="text" required></label> <label>Correo electrónico <input type="email" required></label> </fieldset> <br><img src='https://i0.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy loading=lazy>Arroz. 1. Agrupar campos de formulario</p><p>Para que el formulario sea más comprensible para los usuarios, se agrega texto a los campos del formulario para proporcionar un ejemplo de los datos de entrada. Este tipo de texto se denomina texto comodín y se crea utilizando el atributo de marcador de posición.</p> <p>Los campos obligatorios también deben resaltarse. Antes de HTML5, se utilizaba el símbolo de asterisco * junto al nombre del campo. La nueva especificación introduce un atributo obligatorio especial, que le permite marcar un campo obligatorio en el nivel de marcado. Este atributo indica al navegador (suponiendo que admita HTML5) que no envíe datos después de que el usuario haga clic en enviar hasta que se completen los campos especificados.</p><p> <input type="text" required placeholder="Su nombre"> </p><p>Para cambiar la apariencia de un campo de texto cuando recibe el foco, utilice la pseudoclase de foco. Por ejemplo, puede oscurecer el fondo del campo actual o agregar un borde de color para que se destaque del resto:</p><p>Entrada: foco (fondo: #eaeaea;)</p><p>Otro atributo HTML5 útil es el atributo de enfoque automático. Le permite establecer automáticamente el foco en el campo inicial deseado para los elementos. <input>Y <textarea>(solo un elemento de cada formulario).</p> <h2>Ejemplo de creación de un formulario de registro.</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy loading=lazy> <h1>Registro</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Nombre</label> <input type="text" name="name" required> </div> <div class="radio">Piso <label> <input type="radio" name="sex" value="masculino">masculino <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="femenino">femenino <div class="radio-control female"></div> </label> </div> <div> <label for="email">Correo electrónico</label> <input type="email" name="email" required> </div> <div> <label for="country">Un país</label> <select name="country"> <option>Selecciona tu país de residencia</option> <option value="Rusia">Rusia</option> <option value="Ucrania">Ucrania</option> <option value="Bielorrusia">Bielorrusia</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Enviar</button> </form> </div> <p><b>Nota</b><br>action="form.php" - enlace al archivo del controlador de formulario. Cree un archivo en codificación UTF-8, cárguelo en el servidor y reemplace action="form.php" con la ruta al archivo en su servidor.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy loading=lazy>Arroz. 2. Apariencia del formulario predeterminada <p>Como puede ver en la figura, cada elemento del formulario tiene estilos de navegador predeterminados. Aclaremos los estilos y diseñemos los elementos del formulario.</p><p> Ajuste de formulario (ancho: 550 px; fondo: #ffd500; radio de borde: 20 px;) .form-wrap *(transición: .1s lineal) .profile (ancho: 240 px; flotador: izquierda; alineación de texto: centro; relleno : 30px; ) formulario (fondo: blanco; flotante: izquierda; ancho: calc(100% - 240px); relleno: 30px; radio de borde: 0 20px 20px 0; color: #7b7b7b; ) .form-wrap:after, formulario div:después ( contenido: ""; mostrar: tabla; borrar: ambos; ) formulario div (margen inferior: 15px; posición: relativa;) h1 (tamaño de fuente: 24px; peso de fuente: 400; posición: relativa ; margen superior: 50px; ) h1:después ( contenido: "\f138"; tamaño de fuente: 40px; familia de fuentes: FontAwesome; posición: absoluta; arriba: 50px; izquierda: 50%; transformación: traducirX(-50 %); ) /************************ estilo de elementos de formulario ******************* * **/ etiqueta, intervalo ( pantalla: bloque; tamaño de fuente: 14px; margen inferior: 8px; ) entrada, entrada ( ancho de borde: 0; contorno: ninguno; margen: 0; ancho: 100%; relleno: 10px 15px; fondo: #e6e6e6; ) entrada:enfoque, entrada:enfoque ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio etiqueta ( posición: relativa; relleno-izquierda: 50px; cursor: puntero; ancho: 50%; flotante: izquierda; altura de línea: 40px; ) .radio entrada ( posición: absoluta; opacidad: 0; ) .radio -control ( posición: absoluta; arriba: 0; izquierda: 0; altura: 40px; ancho: 40px; fondo: #e6e6e6; radio-borde: 50%; alineación de texto: centro; ) .male:before ( contenido: " \f222"; familia de fuentes: FontAwesome; peso de fuente: negrita; ) .female:before ( contenido: "\f221"; familia de fuentes: FontAwesome; peso de fuente: negrita; ) .etiqueta de radio: entrada flotante ~ . radiocontrol, .radiol input:focus ~ .radio-control ( box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); ) .radio input:checked ~ .radio-control ( color: rojo; ) seleccione ( ancho: 100%; cursor: puntero; relleno: 10px 15px; contorno: 0; borde: 0; fondo: #e6e6e6; color: #7b7b7b; -apariencia-webkit: ninguno; /* desmarque webkit -browsers */ -moz-appearance: none; /*desmarcar en Mozilla Firefox*/ ) select::-ms-expand ( display: none; /*desmarcar en IE*/ ) .select-arrow ( posición: absoluta ; arriba: 38px; derecha: 15px; ancho: 0; altura: 0; eventos de puntero: ninguno; /*activa la visualización de la lista al hacer clic en la flecha*/ border-style: solid; ancho de borde: 8px 5px 0 5px; color del borde: #7b7b7b transparente transparente transparente; ) botón ( relleno: 10px 0; ancho de borde: 0; pantalla: bloque; ancho: 120px; margen: 25px auto 0; fondo: #60e6c5; color: blanco; tamaño de fuente: 14px; contorno: ninguno; transformación de texto : mayúscula; ) /********************** agregar adaptabilidad al formulario ******************* ** **/ @media (ancho máximo: 600 px) ( .form-wrap (margen: 20 px automático; ancho máximo: 550 px; ancho: 100 %;) .profile, formulario (flotante: ninguno; ancho: 100 % ;) h1 (margen superior: automático; relleno inferior: 50 px;) formulario (radio de borde: 0 0 20 px 20 px;))</p><p><b>Archivo formulario.php</b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $encabezados .= "Cco: tu_correo electrónico." "\r\n"; if(!empty($nombre) && !empty($sexo) && !empty($correo electrónico) && ! vacío($país) && filter_var($correo electrónico, FILTER_VALIDATE_EMAIL))( correo($correo electrónico, $asunto, $msg, $encabezados); echo "¡Gracias! Te has registrado correctamente."; ) ?></p><p><b>Nota</b><br>En la variable $subject, especifique el texto que se mostrará como título de la carta; <br>Su_nombre: aquí puede especificar el nombre que se mostrará en el campo "de quién es la carta"; <br>reemplace your_site_url con la dirección del sitio con el formulario de registro; <br>reemplace your_email con su dirección de correo electrónico; <br>$headers .= "Cco: tu_correo electrónico". "\r\n"; envía BCC a su dirección de correo electrónico.</p> <p>La apariencia de un formulario HTML se puede mejorar enormemente usando CSS:</p> <h2>Aplicar estilo al campo de entrada</h2><p>Utilice la propiedad de ancho para determinar el ancho del campo de entrada:</p> <input type="text" id="fname2" name="firstname" style="width:100%;"><p>El ejemplo anterior se aplica a todos <input>elementos. Si desea aplicar estilo a un tipo de entrada específico, puede utilizar selectores de atributos:</p><ul><li>entrada: solo seleccionará campos de texto</li><li>entrada: solo seleccionará campos de contraseña</li><li>entrada: solo seleccionará el número de campo</li><li>etc..</li> </ul><h2>Entradas pavimentadas</h2><p>Utilice la propiedad de relleno para agregar espacio dentro de un campo de texto.</p><p><b>Consejo:</b> Si tiene muchas entradas unas tras otras, también puede agregar un margen para agregar más espacio fuera de ellas:</p> <input type="text" id="fname3" name="firstname" class="input1"><input type="text" id="lname3" name="lastname" class="input1"><h2>Entradas fronterizas</h2><p>Utilice la propiedad de borde para cambiar el tamaño y el color del borde, y utilice la propiedad de radio de borde para agregar esquinas redondeadas:</p> <input type="text" id="fname4" name="firstname" class="inputborder"><p>Si solo desea un borde inferior, use la propiedad border-bottom:</p> <input type="text" id="fname7" name="firstname" class="inputborder2"><h2>Entradas de colores</h2><p>Utilice la propiedad color de fondo para agregar un color de fondo a la entrada y la propiedad color para cambiar el color del texto:</p><input type="text" value="John" name="firstname" class="inputcolor"><h2>Entradas enfocadas</h2><p>De forma predeterminada, algunos navegadores agregarán un contorno azul alrededor de una entrada cuando reciba el foco (se haga clic en ella). Puede eliminar este comportamiento agregando esquema: ninguno; en la entrada.</p><p>Utilice el selector:focus para hacer algo con el campo de entrada cuando reciba el foco:</p> <h2>Entrada usando icono/imagen</h2><p>Si desea un ícono dentro de la entrada, use la propiedad de imagen de fondo y colóquelo con la propiedad de posición de fondo. También tenga en cuenta que agregaremos un espacio grande a la izquierda para reservar espacio en los íconos:</p><input type="text" name="search" placeholder="Buscar.." class="icon"><h3>ejemplo</h3><p>aporte( <br>color de fondo: blanco; <br>imagen de fondo: url("searchicon.png"); <br>posición de fondo: 10px 10px; <br>repetición de fondo: no repetición; <br>relleno-izquierda: 40px; <br> }</p> Inténtalo tú mismo " <h2>Entrada de búsqueda animada</h2><p>En este ejemplo, utilizamos la propiedad de transición CSS3 para animar el ancho del cuadro de búsqueda cuando recibe el foco. Aprenderá más sobre la propiedad de transición más adelante en nuestro</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article> <div class="post-share"> <div class="post-share__title">¿Te gustó el artículo? Compártelo</div> <script src="//yastatic.net/share/share.js"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="small" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir" data-yashareTheme="counter"></div> </div> <div style="text-align: center; margin-top: 10px; margin-bottom: 50px; " id="sovet-1558718318" data-cfpa="13825"><div style="clear: both; font:16px/44px 'Ubuntu', sans-serif; display:inline-block;"> </div></div><script type="text/javascript">;new advadsCfpAd( 13825 );</script> <div class='yarpp-related'> <div class="related-items"> <div class="headline">Recomendamos artículos sobre el tema.</div> <div class="items"> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/es/setting/chto-delat-esli-sensornyi-telefon-upal-v-vodu-kak-vysushit-ego-na-bataree-v.html"><img src="/uploads/2c10a5576bb90ba0b62e86c466ee5f8c.jpg" width="200" height="200" alt="¿Es posible y cómo puedo reparar yo mismo un móvil con pantalla táctil si se cae al agua y no funciona?" class="item__image" / loading=lazy loading=lazy>¿Es posible y cómo puedo reparar yo mismo un móvil con pantalla táctil si se cae al agua y no funciona?</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/es/tips/mts-kak-dobavit-kontakt-v-chernyi-spisok-chernyi-spisok-mts-blokiruem.html"><img src="/uploads/ff0643387fa54bdafd7989f94df74300.jpg" width="200" height="200" alt="Lista negra de MTS: bloqueo de números innecesarios" class="item__image" / loading=lazy loading=lazy>Lista negra de MTS: bloqueo de números innecesarios</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/es/tp-link/chto-delat-esli-telefon-upal-v-vodu-kak-vysushit-sensornyi-telefon-esli-on-upal.html"><img src="/uploads/d1323ec87f326cd5986d9ac6cf653fb2.jpg" width="200" height="200" alt="Cómo secar un teléfono con pantalla táctil si se cae al agua" class="item__image" / loading=lazy loading=lazy>Cómo secar un teléfono con pantalla táctil si se cae al agua</a> <div class="item__comments"></div> </div> </div> </div> </div> </div> <div style="text-align: center; margin-top: 30px; margin-bottom: 30px; " id="sovet-1702503440" data-cfpa="18987"><style type="text/css"> .gadsense_slot_2{ display: inline-block; width: 746px; height: 300px;} @media (min-width:300px) { .gadsense_slot_2 { width: 300px; height: 300px; } } @media (min-width:800px) { .gadsense_slot_2 { width: 600px; height: 300px; } } @media (min-width:1024px) { .gadsense_slot_2 { width: 746px; height: 300px; } } </style> </div><script type="text/javascript">;new advadsCfpAd( 18987 );</script> </main> <aside class="sidebar"> <div class="subs"> <div class="subs-soc"> <div class="subs-soc-title">Únete en las redes sociales redes</div> <ul> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="fb">Facebook</a></li> <li><a href="https://www.twitter.com/share?url=https%3A%2F%2Fnewtravelers.ru%2Fes%2Fiphoneipad%2Fsozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="twi">Gorjeo</a></li> <li><a href="https://vk.com/share.php?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="vk">En contacto con</a></li> <li><a href="https://connect.ok.ru/offer?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="ok">Compañeros de clase</a></li> <li><a href="https://youtube.com/" target="_blank" class="yt">YouTube</a></li> </ul> </div> </div> <div class="section section--companies"> <div class="headline center">Materiales populares</div> <ul> <li><a href="https://newtravelers.ru/es/bluetooth/kak-obnovlyat-windows-xp-posle-okonchaniya-podderzhki-ms.html" ><img src="/uploads/a71e254543180feb3d90aed246d24926.jpg" width="74" height="74" alt="Cómo actualizar Windows XP después de que finalice el soporte de MS" / loading=lazy loading=lazy><span>Cómo actualizar Windows XP después de que finalice el soporte de MS</span></a></li> <li><a href="https://newtravelers.ru/es/android/kak-naiti-sohranennyi-dokument-vord-kak-naiti-nedavnie-dokumenty-v.html" ><img src="/uploads/d2157ebfb3fcb65534970c57a786544c.jpg" width="74" height="74" alt="Cómo encontrar documentos recientes en su computadora: consejos y trucos" / loading=lazy loading=lazy><span>Cómo encontrar documentos recientes en su computadora: consejos y trucos</span></a></li> <li><a href="https://newtravelers.ru/es/tenda/besplatnaya-versiya-ammy-admin-skachat-besplatnye-programmy-skachat-i-ustanovit.html" ><img src="/uploads/1cec05a38f79cb1b868c3bef0d06e888.jpg" width="74" height="74" alt="Descargar programas gratuitos Descargar e instalar admin" / loading=lazy loading=lazy><span>Descargar programas gratuitos Descargar e instalar admin</span></a></li> <li><a href="https://newtravelers.ru/es/useful/kak-ustanavlivaetsya-zhestkii-disk-kak-vstavit-disk-v-noutbuk.html" ><img src="/uploads/d674c920bb27635218bd2574aa707589.jpg" width="74" height="74" alt="¿Cómo insertar un disco en una computadora portátil?" / loading=lazy loading=lazy><span>¿Cómo insertar un disco en una computadora portátil?</span></a></li> <li><a href="https://newtravelers.ru/es/the-lg-tvs/kakie-igry-stoit-poigrat-po-seti-luchshie-besplatnye-igry-na-vseh.html" ><img src="/uploads/9693f8354665e89c9b7884c46e28e5ff.jpg" width="74" height="74" alt="Los mejores juegos gratis en todas las plataformas." / loading=lazy loading=lazy><span>Los mejores juegos gratis en todas las plataformas.</span></a></li> </ul> </div> <nav class="section section--calc"> <div class="headline center">Nuevo en el sitio</div> <ul> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/es/setting/uslovie-esli-v-eksele-kak-v-excel-pri-pomoshchi-vlozhennyh-funkcii.html">Cómo calcular el bono de ventas usando funciones if() anidadas en Excel</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/es/problems/luchshie-kooperativnye-igry-dlya-sovmestnogo-prohozhdeniya.html">Conexión adecuada de computadoras a través de una red local Juegos a través de una red local para dos en una PC</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/es/setting/sozdanie-iso-iz-svoei-ustanovlennoi-sistemy-sozdanie-iso-obrazov-sozdanie.html">Creando una ISO desde su sistema instalado</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/es/tp-link/skachat-dlya-android-6-versii-igru-nardy-dlinnye-nardy-nastolnaya.html">Backgammon: el juego de mesa de todos los tiempos ahora en tu teléfono</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/es/problems/besplatnye-fotoramki-onlain---krasivye-effekty-foto-luchshie.html">Las mejores aplicaciones de marcos de fotos Marcos de fotos sin registro</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/es/d-link/obzor-i-testirovanie-smartfona-nokia-xl-dual-sim-nokia-xl-naibolee-chastye.html">Nokia XL: los problemas más comunes y algunas formas de solucionarlos La comunicación entre dispositivos en redes móviles se realiza mediante tecnologías que proporcionan diferentes velocidades de transferencia de datos</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://newtravelers.ru/es/setting/kakie-klaviatury-dlya-android-luchshe-vybiraem-luchshuyu-klaviaturu-dlya-telefona.html">Elegir el mejor teclado para un teléfono Android en ruso Aplicación de teclado ruso para Android</a></li> </ul> <div class="section--calc__all"> </div> </nav> </aside> </div> <div class="popular popular-in-cat"> <div class="headline center" id="stop_ads">Los visitantes están discutiendo actualmente</div> <div class="items"> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/es/the-lg-tvs/chem-otkryt-fail-ai-faily-s-rasshireniem-ai-kak-i-chem-ih-otkryt-skachat-fail.html"><img src="/uploads/d17e6e159086d655e63353669ff3300a.jpg" width="200" height="200" alt="¿Cómo abrir un archivo .AI? Archivos con extensión AI: cómo y cómo abrirlos Descargar el archivo ai" class="item__image" / loading=lazy loading=lazy>¿Cómo abrir un archivo .AI? Archivos con extensión AI: cómo y cómo abrirlos Descargar el archivo ai</a> <a class="item__cat" href="https://newtravelers.ru/es/category/the-lg-tvs/">Televisores LG</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/es/android/kak-konvertirovat-cr2-v-jpg-fail-onlain-sposoby-konvertacii-cr2-v-jpg-cr2-otkryt.html"><img src="/uploads/7ae9effc527a7026c7b59e240eafa291.jpg" width="200" height="200" alt="Formas de convertir CR2 a JPG Cr2 abierto en línea" class="item__image" / loading=lazy loading=lazy>Formas de convertir CR2 a JPG Cr2 abierto en línea</a> <a class="item__cat" href="https://newtravelers.ru/es/category/android/">Androide</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/es/tenda/kak-zablokirovat-stranicu-na-kompyutere-kak-zablokirovat.html"><img src="/uploads/64f8aa0ac8d9c4c856542becac1e850d.jpg" width="200" height="200" alt="Cómo bloquear VKontakte en una computadora" class="item__image" / loading=lazy loading=lazy>Cómo bloquear VKontakte en una computadora</a> <a class="item__cat" href="https://newtravelers.ru/es/category/tenda/">Tenda</a> <div class="item__comments"></div> </div> </div> <div class="item"> <div class="item__inner"> <a class="item__title" href="https://newtravelers.ru/es/iphoneipad/chem-otkryt-fail-pub-rasshirenie-pub---chem-otkryt-rasshirenie-pub-chem-otkryt.html"><img src="/uploads/a43901daecf33c6ece6c8c8a412f5452.jpg" width="200" height="200" alt="¿Cómo abrir un archivo .PUB? Extensión PUB: ¿cómo abrirla? Extensión de pub que abrir." class="item__image" / loading=lazy loading=lazy>¿Cómo abrir un archivo .PUB? Extensión PUB: ¿cómo abrirla? Extensión de pub que abrir.</a> <a class="item__cat" href="https://newtravelers.ru/es/category/iphoneipad/">iPhone/iPad</a> <div class="item__comments"></div> </div> </div> </div> </div> <footer class="footer"> <div class="footer__copyright"> <div class="footer__logo">newtravelers.ru</div> <p>© 2023 – newtravelers.ru</p> <p>Consejos para configurar Android, enrutadores, Smart TV. Bluetooth</p> </div> <nav class="footer__nav-1"><ul> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/es/category/problems/">Problemas</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/es/category/android/">Androide</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/es/category/setting/">Ajustes</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/es/category/error/">Errores</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/es/category/setting/">Ajustes</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://newtravelers.ru/es/category/bluetooth/">Bluetooth</a></li> </ul></nav> <div class="footer__nav-2"> <nav><ul> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/es/feedback.html">Contactos</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/es/adverts.html">Publicidad en el proyecto.</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/es/sitemap.xml">Mapa del sitio</a></li> <li class="menu-item type-post_type object-page "><a href="https://newtravelers.ru/es/feedback.html">Derechos de autor y reglas</a></li> </ul></nav> <ul class="footer__soc"> <li><a href="https://vk.com/share.php?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="vk">En contacto con</a></li> <li><a href="https://connect.ok.ru/offer?url=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="ok">Compañeros de clase</a></li> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://newtravelers.ru/iphoneipad/sozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="fb">Facebook</a></li> <li><a href="https://www.twitter.com/share?url=https%3A%2F%2Fnewtravelers.ru%2Fes%2Fiphoneipad%2Fsozdanie-i-rabota-s-formami-v-html-sozdanie-html-form-razberem-nebolshoi.html" target="_blank" class="twi">Gorjeo</a></li> </ul> </div> <div class="footer-right"> <div class="footer__counters" id="text-6"> <div class="textwidget"><p></p> </div> </div> <div class="footer__orphus"> <div>¿Nuestro error en el sitio? Selecciónelo y presione Ctrl + Enter</div> </div> </div> </footer> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script><script type='text/javascript' src='https://newtravelers.ru/wp-content/themes/sovet-ingenera_adapt/js/baron.min.js'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js'></script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll":"1"} ; /* ]]> */ </script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/table-of-contents-plus/front.min.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "fixed-sidebar", "margin_top" : 0, "margin_bottom" : 0, "stop_id" : "stop_ads", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-7'] } ; </script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js'></script> <script type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/wp-featherlight/js/wpFeatherlight.pkgd.min.js'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js'></script> <script async="async" type='text/javascript' src='https://newtravelers.ru/wp-content/plugins/akismet/_inc/form.js'></script> <script type="text/javascript">  </script><br> <br> </body> </html>

Crear y trabajar con formularios en html. Creando formularios HTML Veamos un pequeño ejemplo.

Ejemplo de formulario HTML | Ingrese al sitio

Ejemplo de formulario HTML | Comentarios en el sitio.

Ejemplo de formulario HTML | La lista desplegable

Ejemplo de formulario HTML | Lista con barra de desplazamiento

¿Qué es un formulario y cómo funciona?

Envío de datos al lado del servidor

Métodos de transmisión de información.

Crear un panel de registro

Para un posterior trabajo correcto en nuestro servicio, ¡ingrese los datos correctos!