Use formulários HTML5 e CSS3 para verificar a função

A verificação do cliente é uma das funções mais usadas dos programas de clientes da Web. O HTML5 já nos forneceu a função da verificação do formulário. Quanto ao motivo pelo qual não é popular, estima -se que seja compatível e o estilo é muito feio.

Abaixo, criaremos uma verificação de formulário de HTML5 e CSS3 passo a passo, usando apenas HTML e CSS.

O seguinte é o seguinte:

Primeiro de tudo, precisamos dos seguintes campos:

• Nome completo
• Número de telefone (número de telefone)
• Endereço de email
• URL (site)

Depois que o usuário insere algumas informações, precisamos verificar se as informações do usuário estão corretas para evitar dados de erro e dados enganados para o servidor.

Nas novas especificações do HTML5, a caixa de entrada de entrada fornece uma variedade de tipos de entrada como: Tel, email, número, alcance, cor etc. Esses tipos geralmente não são muito refletidos no cliente de desktop. Por exemplo, o número mudará automaticamente para números puros no teclado móvel e o teclado de email alternará automaticamente com o@teclado.

Também precisamos determinar o estilo final do formulário. Aqui eu encontrei um estilo de formulário em drible como o estilo de demonstração dessa época.

Use o código de instrução HTML5 padrão

 <!

Crie um elemento de formato básico.

 <Formul

Os elementos da tabela têm a seguinte composição do elemento:

• ul
• li
• rótulo
• entrada
• span

Os elementos UL e LI são usados ​​para layouts de tipografia, que são usados ​​para dividir elementos e layouts da unidade da tabela. A etiqueta é usada para o texto de prompt de campo do formulário. A entrada é usada para dados de entrada do usuário. O span é usado para usar emoji para indicar se o campo do usuário está preenchido corretamente.

 <ul> <li> <Rótulo para = nome> Nome completo </cret> <Tipo de entrada = ID do texto = Nome Nome = Nome Parholder = Por favor, digite o nome/> <span class = icon-name> </span> < /span> </span> li> </ul>

Formulário Formulário O código completo HTML é o seguinte:

Complete a redação do elemento de formulário, melhore firmemente seu estilo, fazendo com que pareça mais bonito.

 Corpo {display: Formulário;} Formulário {preenchimento: 0 10%; Margem-Bottom: 20px; Cor: Black; Absoluto;

O código CSS conclui o código da seguinte forma:

Em cada estrutura de formulário, adicionamos uma tag span, como adicionamos um rótulo <span class = icon-name> </span> no campo Nome. Agora adicione o estilo ao estado do campo de teste escolar.

 Li Span {Display: Block;