Atributo requerido de entrada HTML5
Este manual explicará la entrada "requerido"Atributo y su uso.
¿Cuál es el atributo "requerido" de entrada HTML??
El "requerido"El atributo es un atributo booleano que indica una condición, que es que el campo de entrada debe completarse antes de operar el envío del formulario. Los campos de entrada que se especifican para datos importantes deben establecerse con el atributo requerido. Este atributo funciona en varias entradas: URL, contraseña, recolectores de fecha, número, casilla de verificación, tel, texto, radio, correo electrónico, búsqueda y archivo.
Cómo usar el atributo "requerido" en HTML5?
Para utilizar el "requerido"Atributo en el HTML5, siga las instrucciones a continuación:
- Agregue un elemento Div con la clase "principal".
- Dentro de este Div, agregue otro elemento Div que tenga el nombre de la clase "formulario".
- Dentro del DIV de contenido de formulario, se agregan dos etiquetas para los nombres primero y apellidos.
- Entonces el ""Elemento con los atributos"tipo"Está configurado para enviar un mensaje de texto"nombre"F-Name y L-Name para el nombre y el apellido, respectivamente. El atributo de marcador de posición se mostrará en el campo de texto. Hemos usado el atributo "requerido"En la primera etiqueta de entrada solo para ver su funcionalidad.
Html
El código anterior genera el resultado como se muestra en la imagen a continuación:
Vayamos a la sección CSS, donde diseñemos el archivo HTML y luego veremos cómo funciona el atributo requerido.
Estilo "principal" Div
.principalColor de fondo: RGBA (0, 0, 0, 0.159);
Máxido: 500px;
margen: auto;
Altura: 270px;
Radio fronterizo: 30px;
relleno: 10px;
De acuerdo con el fragmento de código dado, las siguientes propiedades de CSS se aplican al "principal" envase:
- "color de fondo"La propiedad especifica el color de fondo del elemento.
- "anchura máxima"La propiedad define el ancho máximo de un elemento HTML.
- "margen"La propiedad especifica el espacio en el elemento HTML seleccionado.
- "altura"La propiedad define la altura de un elemento HTML.
- "radio fronterizo"La propiedad ajusta los bordes de la ronda del elemento.
- "relleno"La propiedad define el espacio requerido alrededor del contenido.
Estilo "Forma-contenido" Div
.contenido de formaPantalla: Flex;
Justify-Content: Center;
Alineación de ítems: Centro;
Altura: 100%;
tamaño de fuente: 20px;
Para peinar el DIV "Contente de forma", aplique las propiedades CSS alistadas:
- "mostrar"La propiedad establece el diseño del elemento.
- "Justify-ContentLa propiedad ajusta el elemento horizontalmente.
- "ítems alineados"La propiedad establece los artículos de artículos flexibles.
- "alturaLa propiedad se utiliza para establecer la altura de un elemento.
- "tamaño de fuente"La propiedad indica el tamaño de la fuente de texto.
El elemento de "entrada" de estilo de "contenido de forma" Div
.Entrada de contenido de formaborde: 1px sólido RGB (47, 63, 63);
relleno: 6px 10px;
tamaño de fuente: 20px;
Color de fondo: RGB (85, 104, 104);
Color: #ffffff;
Esquema: ninguno;
Según el estilo CSS proporcionado:
- "color"La propiedad define el color de la fuente.
- "describir"Con el valor"ninguno"Elimina el esquema del elemento cuando se selecciona.
Estilo "marcador de posición" del elemento "entrada"
.Entrada de contenido de formulario :: marcador de posiciónColor: #Dadada;
El color de fuente de marcador de posición del campo de entrada se establece como "#DADADA".
El elemento de estilo "botón" de "Form-Content" Div
.botón de contenido de formularioborde: 1px sólido RGB (47, 63, 63);
relleno: 10px 20px;
tamaño de fuente: 22px;
Color de fondo: RGB (12, 33, 33);
Color: #A3A3A3;
cursor: puntero;
margen-izquierda: 5px;
Transición: todos 0.3s facilidad;
Según las propiedades dadas:
- "cursorLa propiedad está configurada con el puntero de valor. Cuando el mouse se cierne, se mostrará una mano con un dedo puntiagudo.
- "margen de pesa"La propiedad agrega espacio a la izquierda del contenido.
- "transición"La propiedad se establece con el valor"todos 0.3s facilidad", Donde todo representa todas las propiedades, 0.3s es la duración de la transición, y la facilidad representa el movimiento de la transición.
Elemento de estilo "Button" en "Hover
".Botón de contenido de formulario: HoverTransformar: escala (1.1, 1.2);
color blanco;
El elemento de botón se aplica al "transformar"Escala (1.1, 1.2) Transformar elemento en un plano 3D.
El atributo requerido está conectado al primer elemento de entrada. Cuando el campo está vacío, mostrará un mensaje como se muestra a continuación en la imagen:
Se puede ver en la imagen a continuación que no podemos dejar el primer elemento de entrada vacío:
El segundo elemento de entrada no está asociado con el atributo requerido. Entonces, si se presenta como vacío, no afecta la operación de la presentación del formulario. Cuando se llena el primer elemento de entrada, la URL indica que el formulario se presenta correctamente:
Así es como funciona el atributo de entrada requerido en HTML5.
Conclusión
El elemento de entrada CSS está asociado con muchos atributos, como el tipo, el marcador de posición, el requerido o más. El atributo requerido es un booleano que indica que el campo de entrada debe completarse antes de operar el envío del formulario. Este manual ha demostrado el uso del HTML "requerido"Atributo con un ejemplo práctico.