La verificación del cliente es una de las funciones más utilizadas de los programas de clientes web. HTML5 ya nos ha proporcionado la función de la verificación de formulario. En cuanto a por qué no es popular, se estima que es compatible, y el estilo es demasiado feo.
A continuación, crearemos una verificación de formulario de HTML5 y CSS3 paso a paso, utilizando solo HTML y CSS.
Lo siguiente es el siguiente:
Paso 1: Ordene el campo de verificación y escribaEn primer lugar, necesitamos los siguientes campos:
Después de que el usuario ingrese alguna información, debemos verificar si la información del usuario es correcta para evitar datos de error y datos engañados al servidor.
En las nuevas especificaciones de HTML5, el cuadro de entrada de entrada proporciona una variedad de tipos de entrada como: Tel, correo electrónico, número, rango, color, etc. Estos tipos generalmente no se reflejan en el cliente de escritorio. Por ejemplo, el número cambiará automáticamente a números puros en el teclado móvil, y el teclado de correo electrónico cambiará automáticamente con el teclado@.
Paso 2: Determinar el estilo de formularioTambién necesitamos determinar el estilo final del formulario. Aquí encontré un estilo de forma en Dribble como el estilo de demostración de este tiempo.
Paso 3: Código de plantillaUtilice el código de instrucción HTML5 estándar
<!Paso 4: crear un formulario
Cree un elemento de formato básico.
<Form Action = OnsubMit = return False> </form>Paso 5: crea el elemento
Los elementos de la tabla tienen la siguiente composición del elemento:
Los elementos UL y Li se utilizan para diseños de tipografía, que se utilizan para dividir los elementos y diseños de la unidad de tabla. La etiqueta se usa para el texto de inmediato del formulario. La entrada se utiliza para los datos de entrada del usuario. SPAN se usa para usar emoji para indicar si el campo de usuario se llena correctamente.
<ul> <li> <etiqueta for = name> name completo </label> <input type = text id = name name = name PlaceHolder = Por favor ingrese el nombre/> <span class = icon-name> </span> < /span> </span> li> </ul>
Formulario Formulario Código HTML El código completo es el siguiente:
Paso 6: Agregar estiloComplete la escritura del elemento de forma, mejore firmemente su estilo, lo que hace que se vea más hermoso.
Body {Display: Flex;} Forma {Padre: 0 10%; ; Color: negro; Absoluto: 0;El código CSS completa el código de la siguiente manera:
Paso 7: Agregar aviso de emojiEn cada estructura de formulario de formulario, hemos agregado una etiqueta SPAN, como agregamos una etiqueta <span class = icon-name> </span> en el campo Nombre. Ahora agregue el estilo al estado de la prueba escolar.
Li Span {Display: Bloque;