Propriedade de texto de entrada de entrada html5 DOM

Muitas vezes, precisamos descobrir o valor padrão do campo de texto. Para fazer isso, a propriedade DefaultValue é utilizada. A propriedade DefaultValue especifica ou retorna o valor padrão do campo de texto. No HTML, o valor padrão é especificado como o “valor”Atributo.

Este post demonstrará:

• Qual é a diferença entre as propriedades DefaultValue e Value?
• Como exibir o valor padrão do elemento de entrada?
• Como exibir o valor atual do campo de entrada?

Qual é a diferença entre as propriedades DefaultValue e Value?

O "valor" e "valor padrão”As propriedades são diferentes de forma que a propriedade DefaultValue mantenha o valor padrão do campo de entrada. Por outro lado, a propriedade Value mantém o valor atual após as alterações.

Como exibir o valor padrão do elemento de entrada em html?

Para exibir o valor padrão do elemento de entrada, o “valor padrão”A propriedade é usada em JavaScript. Vamos verificar está funcionando com a ajuda de um exemplo.

Exemplo:
Primeiro, crie um elemento div com o nome da classe “contente”No arquivo html. Adicione outra div com o nome da classe “subconto”Dentro deste elemento. Em seguida, inclua uma legenda ao campo de texto e adicione um elemento associado ao atributo “para"Tendo o valor"nome”. Dentro deste elemento da etiqueta, coloque o elemento de entrada com atributos:

• tipo: Especifica o tipo de campo de entrada, como texto, caixa de seleção, rádio ou mais.
• eu ia: Especifica o ID exclusivo utilizado em CSS ou JavaScript para manipulação.
• valor: Especifica um valor e o associa ao ID do campo de entrada

Então, adicione

Elemento para adicionar conteúdo à página da web. Depois disso, especifique um elemento de botão com os atributos “tipo"Com o valor"enviar" e "ONCLICK”Atributo com o valor“ShowValue ()”. Esta função será definida em JavaScript. Por fim, para ver o valor padrão, especifique um

elemento estilizado como um elemento de bloco em linha. O elemento de span com o id “d_val”Exibirá o valor padrão:

Nome:

Clique aqui para ver os valores

Clique

O valor padrão:

Agora, vá para a seção JavaScript, onde será definida uma função que mantém o “valor padrão" propriedade.

JavaScript

O nome da função “ShowValue ()"É seguido pela palavra -chave"função”. Dentro desta função, escreveremos um bloco de código para especificar a tarefa:

• var inputdefault: Crie uma variável “inputdefault”Usando a palavra -chave“var”.
• documento.getElementById ("nome").valor padrão: Atribuir o valor padrão do campo de entrada utilizando o “valor padrão”Propriedade da variável criada acima.
• Para incorporar o valor da variável no elemento html span com o id d_value, inclua o código “documento.getElementById ("d_value").Innerhtml”. Em seguida, atribua o valor variável a ele.

A próxima seção dada demonstrará o estilo CSS.

Elementos de estilo "todos"

*
margem: 0;
preenchimento: 0;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

Para estilizar todos os elementos HTML, aplique estas propriedades:

• ““margem”A propriedade adiciona espaço ao redor do elemento.
• ““preenchimento”A propriedade adiciona espaço ao redor do conteúdo do elemento ou dentro da borda.
• ““família de fontes”A propriedade está definida com os valores“Verdana, Genebra, Tahoma, Sans-Serif”. Esta lista é fornecida para garantir que, se o navegador não suportar o primeiro valor, outra fonte será aplicada.

Estilo “conteúdo” div

.contente
borda: 1px sólido #f8c4c4;
Largura: 400px;
preenchimento: 20px;
margem: 40px automático;
Radio de fronteira: 12px;
Background-Color: AntiCewhite;

O elemento div com a classe “contente”É aplicado com estas propriedades CSS:

• ““fronteira”A propriedade é utilizada para aplicar uma borda ao redor do elemento com a largura da borda, o estilo de borda e a cor.
• ““largura”Propriedade define a largura do elemento.
• ““Radio de fronteira”Propriedade fará as bordas do elemento.
• ““cor de fundo”Propriedade especifica a cor de fundo do elemento.

Estilo “sub-contentente” div

.Subntonte
Largura: 500px;
Altura: 150px;

Elemento de “entrada” de estilo

.Entrada de subconto
preenchimento: 3px;
Radio de fronteira: 5px;
Size da fonte: 16px;

O campo de entrada é estilizado com estas propriedades:

• ““tamanho da fonte”A propriedade é utilizada para a configuração do tamanho da fonte do elemento.

Elemento de "botão" de estilo

botão
Background-Color: Brown;
preenchimento: 8px 20px;
Cor: #ffffff;
borda: 1px sólido #ffd5d5;
Radio de fronteira: 6px;
Size da fonte: 14px;
margem: 5px 100px;
Shadow de caixa: 1px 1px 2px 1px cinza;

O elemento do botão é estilizado com as seguintes propriedades CSS:

• ““cor”Propriedade define a cor do texto do elemento.
• ““Sombra da caixa”Propriedade é uma propriedade abreviada para adicionar uma sombra ao redor do elemento. Especifica o offset x, y-offset, raio desfoque, raio espalhado e cor da sombra.

Estilize o "botão" no circuito

Botão: Hover
Transform: tradutor (2px);
Cursor: Ponteiro;

No mouse, os elementos do botão são estilizados com estas propriedades:

• ““transformar”A propriedade é utilizada para a transformação do elemento. O valor que "Tradutory (2px)”Realiza o botão no eixo y.
• ““cursor”Propriedade com o valor“ponteiro”Muda o cursor do mouse para uma mão com um dedo apontador.

Pode -se observar que o valor de entrada inserido no campo é “John”, Enquanto o valor padrão é“Margarida”:

Como exibir o valor atual do campo de entrada?

Para exibir o valor atual/presente do campo de entrada, primeiro, vá para o arquivo html. Adicione o

elemento associado ao atributo de estilo com o “mostrar”Propriedade com o valor“Block de entrada”. Em seguida, adicione um elemento de span especificado com o “Val" eu ia:

O valor atual:

Depois disso, adicione o seguinte código em JavaScript:

var inputCurrent = documento.getElementById ("nome").valor;
documento.getElementById ("val").inerhtml = inputCurrent;

• Primeiro, crie uma variável “inputCurrent"Com a palavra -chave"var”.
• Para armazenar o valor existente do campo de entrada na variável, especifique “documento.getElementById ("nome").valor”. Aqui a propriedade Value mantém o valor atual do campo.
• Para incorporar o valor no elemento de span tendo idVal”Em HTML, especifique a função“documento.getElementById ("val").Innerhtml”. Então, atribua o valor do “inputCurrent”Variável para isso.

Como você pode ver, o primeiro elemento exibe o valor padrão, enquanto o segundo

Elemento mostra o valor atual:

Isso foi tudo sobre o valor de campos de entrada padrão e atual.

Conclusão

O "valor padrão”A propriedade contém o valor padrão do campo de entrada. Esta propriedade é utilizada para definir ou retornar o valor padrão do campo de entrada. Em HTML, o “valor”Propriedade define um novo valor que é inserido no campo. Este blog explicou o html5 dom de entrada text defaultValue e a propriedade Value com exemplos apropriados.