Entrada de entrada html5 necessária
Este manual explicará a entrada “obrigatório”Atributo e seu uso.
Qual é o atributo HTML Input "Necessing"?
O "obrigatório”O atributo é um atributo booleano que indica uma condição, que é que o campo de entrada precisa ser preenchido antes de operar o envio do formulário. Os campos de entrada especificados para dados importantes devem ser definidos com o atributo necessário. Este atributo funciona em várias entradas: URL, senha, data de data, número, caixa de seleção, tel, texto, rádio, email, pesquisa e arquivo.
Como usar o atributo "necessário" em html5?
Para utilizar o “obrigatório”Atributo no HTML5, siga as instruções abaixo do rumo:
- Adicione um elemento div com a classe “principal”.
- Dentro desta div, adicione outro elemento div tendo o nome da classe “conteúdo de formulário”.
- Dentro da Div-Content, duas tags são adicionadas para o primeiro e sobrenomes.
- Então o "”Elemento com os atributos“tipo"Está definido como texto,"nome”F-name, e L-Name para o primeiro nome e o sobrenome, respectivamente. O atributo de espaço reservado será mostrado no campo de texto. Nós usamos o atributo “obrigatório”Na primeira tag de entrada apenas para ver sua funcionalidade.
Html
O código acima gera o resultado como mostrado na imagem abaixo:
Vamos para a seção CSS, onde vamos estilizar o arquivo HTML e depois ver como funciona o atributo necessário.
Div "Main" de estilo
.principalBackground-Color: RGBA (0, 0, 0, 0.159);
MAX-LUDA: 500PX;
margem: automático;
Altura: 270px;
Radio de fronteira: 30px;
preenchimento: 10px;
De acordo com o snippet de código fornecido, as seguintes propriedades CSS são aplicadas ao “principal”Container:
- ““cor de fundo”Propriedade especifica a cor de fundo do elemento.
- ““largura máxima”Propriedade define a largura máxima de um elemento HTML.
- ““margem”Propriedade especifica o espaço em todo o elemento HTML selecionado.
- ““altura”Propriedade define a altura de um elemento HTML.
- ““Radio de fronteira”Propriedade ajusta as bordas da rodada de elementos.
- ““preenchimento”Propriedade define o espaço necessário em torno do conteúdo.
Estilo “formulário de formulário” div
.conteúdo de formaexibição: flex;
Justify-Content: Center;
alinhado-itens: centro;
Altura: 100%;
Size da fonte: 20px;
Para estilizar a div "Form-Content", aplique as propriedades CSS alistadas:
- ““mostrar”Propriedade define o layout do elemento.
- ““Justify-Content”Propriedade ajusta o elemento horizontalmente.
- ““alinhado-itens”Propriedade define os itens de itens flexíveis.
- ““altura”A propriedade é utilizada para definir a altura de um elemento.
- ““tamanho da fonte”Propriedade indica o tamanho da fonte de texto.
Elemento de “entrada” de estilo de “Form-Content” div
.Entrada de conteúdo de formulárioborda: 1px RGB sólido (47, 63, 63);
preenchimento: 6px 10px;
Size da fonte: 20px;
Background-Color: RGB (85, 104, 104);
Cor: #ffffff;
Esboço: Nenhum;
De acordo com o estilo CSS fornecido:
- ““cor”Propriedade define a cor da fonte.
- ““contorno"Com o valor"nenhum”Remove o esboço do elemento quando selecionado.
Estilo "espaço reservado" do elemento "entrada"
.Entrada de conteúdo de formulário :: espaço reservadoCor: #dadada;
A cor da fonte de espaço reservado do campo de entrada é definido como “#dadada”.
Elemento de "botão" de estilo de "Form-Content" Div
.botão de conteúdo de formulárioborda: 1px RGB sólido (47, 63, 63);
preenchimento: 10px 20px;
Size da fonte: 22px;
cor de fundo: RGB (12, 33, 33);
Cor: #A3A3A3;
Cursor: Ponteiro;
margem-esquerda: 5px;
transição: tudo 0.3s facilitar;
De acordo com as propriedades dadas:
- ““cursor”Propriedade está definida com o ponteiro de valor. Quando o mouse paira, uma mão com um dedo pontiaguda será exibida.
- ““margem-esquerda”A propriedade adiciona espaço à esquerda do conteúdo.
- ““transição”A propriedade está definida com o valor“tudo 0.3s facilitar”, Onde todos representam todas as propriedades, 0.3s é a duração da transição e a facilidade representa o movimento da transição.
Elemento de "botão" de estilo em "Passe o mouse
““.Botão de conteúdo de formulário: hoverTransformar: escala (1.1, 1.2);
cor branca;
O elemento do botão é aplicado ao “transformar”Escala (1.1, 1.2) Transforme elemento em um avião 3D.
O atributo necessário é anexado ao primeiro elemento de entrada. Quando o campo estiver vazio, ele exibirá uma mensagem como mostrado abaixo na imagem:
Pode ser visto na imagem abaixo que não podemos deixar o primeiro elemento de entrada vazio:
O segundo elemento de entrada não está associado ao atributo necessário. Portanto, se é enviado como vazio não afeta a operação do envio do formulário. Quando o primeiro elemento de entrada é preenchido, o URL indica que o formulário é enviado com sucesso:
É assim que o atributo de entrada exigido funciona no html5.
Conclusão
O elemento de entrada CSS está associado a muitos atributos, como tipo, espaço reservado, necessário ou mais. O atributo necessário é um booleano que indica que o campo de entrada precisa ser preenchido antes de operar o envio do formulário. Este manual demonstrou o uso do HTML “obrigatório”Atributo com um exemplo prático.