Elemento

le permite nombrar grupos lógicos de elementos de formulario. Sintaxis:

Nombre

Mientras navega por sitios web, el usuario generalmente simplemente hace clic en Enlaces para navegar por páginas web.

Pero está claro que el usuario a veces necesita proporcionar su propia campos de entrada. Estos tipos de interacciones incluyen:

• registro e inicio de sesión en sitios web;
• ingresar información personal (nombre, dirección, información de tarjeta de crédito, etc.);
• filtrado de contenido (mediante listas desplegables, casillas de verificación, etc.);
• realizar una búsqueda;
• descargando archivos.

Para satisfacer estas necesidades, HTML ofrece información interactiva. control S formas:

• campos de texto (para una o más líneas);
• interruptores;
• casillas de verificación;
• listas desplegables;
• widgets para descargar;
• botones de enviar.

Estos controles involucran diferentes etiquetas HTML, pero la mayoría usa la etiqueta . Debido a que es un elemento de cierre automático, el tipo de campo está determinado por su atributo de tipo:

Elemento

es un elemento de bloque que define interactivo parte de una página web. Como resultado, todos los controles (como , o <button>) debe ser <i>adentro</i> elemento <form> .</p><p>Dos atributos HTML <b>necesario</b>:</p><ul><li>La acción contiene una dirección que determina. <i>Dónde</i> se enviará la información del formulario;</li><li>El método puede ser GET o POST y determina si <i>Cómo</i> Se enviará la información del formulario.</li> </ul><p>Normalmente, la información del formulario se envía a <b>servidor</b>. <i>Cómo</i> Estos datos se procesarán más allá del alcance de este manual.</p><p>Piense en un formulario como una colección de controles que trabajan juntos para lograr <b>uno</b> operación. Si escribió un formulario de inicio de sesión para un sitio, es posible que tenga <b>tres</b> campos:</p><ul><li>campo de correo electrónico <input type="email"> </li><li>campo de contraseña <input type="password"> </li><li>botón de enviar <input type="submit"> </li> </ul><p>Estos tres elementos HTML estarán contenidos en un formulario. <span><form action="/login" method="POST"> </span>.</p><p>De manera similar, puede agregar un formulario de registro en la misma página HTML, en un elemento separado. <form> .</p><h2>Campos de texto</h2><p>Casi todas las formas requieren <b>texto</b> entrada de los usuarios para ingresar su nombre, dirección de correo electrónico, contraseña, dirección, etc. Los campos de texto del formulario vienen en diferentes opciones.</p><p>Aunque estos campos son muy similares y permiten a los usuarios ingresar cualquier tipo de texto (incluso los incorrectos), su tipo proporciona una información específica. <b>semántica</b> para entrada, determinando qué información el campo <b>debe</b> contener.</p><p>Posteriormente, los navegadores pueden cambiar ligeramente la interfaz del control para mejorar <i>interactividad</i> o sugerir qué contenido se espera.</p><p>Por ejemplo, el campo de contraseña muestra puntos en lugar de símbolos. Y el campo numérico le permite aumentar/disminuir el valor usando las teclas arriba y abajo.</p><h2>marcador de posición</h2><p>Los campos de texto pueden mostrar <b>sugestivo</b> texto que desaparecerá tan pronto como se ingrese algún texto.</p><p> <input type="text" placeholder="Introduzca su nombre"> </p><p>Si comienza a escribir algo, verá desaparecer el texto "Ingrese su nombre".</p><h2><label></h2><p>Dado que los elementos del formulario en sí no son muy descriptivos, suelen ir precedidos de texto. <b>etiqueta</b>.</p><p> <label>Correo electrónico</label> <input type="email"> </p><p>Si bien los marcadores de posición ya brindan una pista sobre el contenido que se espera, las etiquetas tienen la ventaja de permanecer visibles en todo momento y pueden usarse junto con otros tipos de elementos de formulario, como casillas de verificación o botones de opción.</p><p>Aunque puede utilizar párrafos cortos para describir los elementos del formulario, utilizar <label>es semánticamente más correcto porque sólo existen en formas. <label>También se puede asociar con un elemento de formulario específico utilizando el atributo for correspondiente al valor de identificación del campo.</p><p> <label for="first_name">Nombre</label> <input id="first_name" type="text"> </p><p>Cuando haces clic en la etiqueta, el foco va al campo de texto y coloca el cursor dentro de él. Hasta ahora, este paquete parece inútil, pero será útil con casillas de verificación e interruptores.</p><h2>Casillas de verificación</h2><p><b>Casillas de verificación</b>- Son elementos de formulario que tienen sólo dos estados: encendido o apagado. Básicamente permiten al usuario decir "Sí" o "No" a algo.</p><p> <input type="checkbox">Acuérdate de mí</p><p>Dado que puede resultar difícil hacer clic en una casilla de verificación pequeña, se recomienda colocar la casilla de verificación y su descripción dentro <label> .</p><p> <label> <input type="checkbox">Estoy de acuerdo con las condiciones.</label> </p><p>Puede hacer clic en el texto "Acepto los términos" para alternar la casilla de verificación.</p><p>De forma predeterminada, la casilla de verificación está desactivada. Puede marcarlo como habilitado simplemente usando el atributo marcado.</p><p> <label> <input type="checkbox" checked>Usar mi dirección de facturación</label> </p><h2>interruptores</h2><p>Puedes proporcionar al usuario <b>lista de opciones</b> seleccionable mediante interruptores.</p><p>Para que este elemento de formulario funcione, su código HTML debe <b>grupo</b> lista de botones de opción juntos. Esto se logra usando el mismo valor para el atributo de nombre:</p><p> <label>Estado familiar</label> <label> <input type="radio" name="status">Soltero</label> <label> <input type="radio" name="status">Casado</label> <label> <input type="radio" name="status">Divorciado</label> <label> <input type="radio" name="status">Viudo</label> </p><p>Debido a que todos los botones de opción usan el mismo valor para el atributo de nombre (en este caso, el valor de estado), al seleccionar una opción se anularán todas las demás. Los interruptores son <b>mutuamente excluyentes</b>.</p><h3>Diferencia entre botones de opción y casillas de verificación</h3><p>Aunque la casilla de verificación existe <b>por mi cuenta</b>, los interruptores solo pueden aparecer en el formulario <b>lista</b>(lo que significa al menos dos opciones).</p><p>Además, hacer clic en la casilla de verificación es <b>arbitrario</b>, mientras se selecciona uno de los botones de radio <b>obligatorio</b>. Es por eso que no es posible apagar el interruptor si selecciona la opción más cercana. Al final siempre se selecciona uno de los interruptores.</p><h2>Menús desplegables</h2><p>Si la cantidad de opciones para elegir ocupa demasiado espacio, puede usar menús desplegables <select> .</p><p>Funcionan de manera similar a los interruptores, solo que el diseño es diferente.</p><p> <select> <option>Enero</option> <option>Febrero</option> <option>Marzo</option> <option>Abril</option> <option>Puede</option> <option>Junio</option> <option>Julio</option> <option>Agosto</option> <option>Septiembre</option> <option>Octubre</option> <option>Noviembre</option> <option>Diciembre</option> </select> </p><h3>Selección múltiple desde el menú desplegable</h3><p>Si agrega el atributo múltiple, puede brindar la posibilidad de seleccionar múltiples opciones.</p><p> <label>¿Qué navegadores utilizas?</label> <select multiple> <option>Google Chrome</option> <option>explorador de Internet</option> <option>Mozilla Firefox</option> <option>Ópera</option> <option>Safari</option> </select> </p><p>Seleccione múltiples opciones manteniendo presionada la tecla Ctrl (o ⌘) y haciendo clic. Esta puede ser una buena alternativa al uso de varias casillas de verificación por línea.</p><h2>Ejemplo: formulario de registro completo</h2> <form action="/signup" method="POST"> <p> <label>Apelar</label> <label> <input type="radio" name="title" value="señor">Señor.</label> <label> <input type="radio" name="title" value="señora">Señora.</label> </p> <p> <label>Nombre</label> <input type="text" name="first_name"> </p> <p> <label>Apellido</label> <input type="text" name="last_name"> </p> <p> <label>Correo electrónico</label> <input type="email" name="email"> </p> <p> <label>Teléfono</label> <input type="tel" name="phone"> </p> <p> <label>Contraseña</label> <input type="password" name="password"> </p> <p> <label>Confirma la contraseña</label> <input type="password" name="password_confirm"> </p> <p> <label>Un país</label> <select name="country"> <option>Canadá</option> <option>Francia</option> <option>Alemania</option> <option>Italia</option> <option>Japón</option> <option>Rusia</option> <option>Gran Bretaña</option> <option>EE.UU</option> </select> </p> <p> <label> <input type="checkbox" name="terms">Estoy de acuerdo con los términos de uso</label> </p> <p> <button>Registro</button> </p> </form> <p>También están disponibles otros elementos de formulario, pero hemos analizado los más utilizados.</p> <p>Buen día a todos. Alexey Gulynin está en contacto. En el último artículo vimos <span>problema con la codificación en el sitio</span>. En este artículo me gustaría hablar de <b>creando formularios en HTML</b>. Creo que este es el tema más importante en HTML. Recuerdo las palabras de mi profesora de inglés. 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:</p><p> <html> <meta charset="utf-8"/> <head><title>Crear formularios HTML</title></head> <body> <form name="myform" action="" method="post">Nombre <input type = "text" name = "myname" value = "Introduzca su nombre"/> </br> Contraseña <input type = "password" name = "mypass"> </br> <textarea name = "mytextarea" rows = "10" cols = "30">Ingrese su mensaje...
Seleccione un motor de búsqueda Google yandex Excursionista
¿Listo para explorar formas? Sí Por supuesto que si =)
Elige una de las opciones Opción 1 opcion 2 Opción 3
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 la palabra clave