Como posso definir o valor padrão para um html <select> Elemento?
No desenvolvimento da web, ao fazer um formulário, precisamos de diferentes componentes, como campos de entrada, botões, botões de rádio, listas de verificação e muito mais. O menu suspenso é um desses componentes adicionados em um formulário para selecionar uma opção de uma lista de menus. Isso pode ser feito em uma página da web usando um elemento HTML que consiste em várias opções especificadas no elemento HTML.
Este estudo demonstrará o método para definir um valor padrão para um elemento HTML.
Como especificar o valor padrão para o elemento HTML?
Às vezes o "selecionado”O atributo deve ser adicionado para definir uma opção padrão. Na lista suspensa, a opção com o atributo selecionada será mostrada por padrão.
A sintaxe abaixo exibe como fazer uma opção um valor padrão:
Confira o exemplo abaixo para a demonstração!
Exemplo: Definindo o valor padrão para o elemento HTML
Em HTML, primeiro, adicione um elemento div com o nome da classe “contente”. Dentro deste elemento:
- Adicione um elemento de cabeçalho
.
- Então, adicione o
elemento com algum conteúdo. O elemento dentro do
o elemento é utilizado para tornar o texto ousado.
- Inclua o html “”Elemento com o nome e id de atributos.
- Como discutimos acima, o elemento de seleção contém as opções disponíveis no menu suspenso. Essas opções são especificadas com o HTML “" elemento.
Portanto, observe o trecho de código abaixo do rumo, onde a segunda opção é especificada com o atributo “selecionado”Para defini -lo como o valor padrão:
Linuxhint
Escolha suas postagens:
Nesse caso, "Autor técnico”Será selecionado e exibido como a opção padrão:
Vamos para a seção CSS, onde usaremos diferentes propriedades de estilo CSS para estilizar os elementos html.
Estilo “conteúdo” div
.contente
Largura: 370px;
Altura: 280px;
borda: 1px Solid #874C62;
margem: automático;
cor de fundo: RGB (34, 32, 32);
preenchimento: 18px;
Radio de fronteira: 6px;
O ".contente”É utilizado para acessar o elemento Div HTML com o conteúdo da classe. A explicação das propriedades CSS acima mencionadas está listada abaixo:
- ““largura”A propriedade ajusta a largura do elemento.
- ““altura”Propriedade determina a altura do elemento.
- ““fronteira”Propriedade especifica a borda ao redor do elemento. O valor especifica a largura da borda, o estilo de borda e a cor da borda.
- ““margem”Propriedade especifica a quantidade de espaço ao redor do elemento.
- ““cor de fundo”Especifica a cor de fundo do elemento.
- ““preenchimento”É utilizado para aumentar o espaço em torno do conteúdo do elemento.
- ““Radio de fronteira”É a propriedade que faz os cantos do elemento redondos.
Elemento de estilo “P”
.conteúdo p
Size da fonte: 20px;
Cor: #FFF;
O
O elemento do conteúdo da DIV é estilizado com as seguintes propriedades:
- ““tamanho da fonte”Define o tamanho da fonte do elemento.
- ““cor”A propriedade ajusta a cor da fonte do elemento.
Elemento de estilo "Selecionar"
Selecione
preenchimento: 5px;
Radio de fronteira: 5px;
Esboço: Nenhum;
Size da fonte: 18px;
O elemento de seleção é aplicado com as seguintes propriedades:
- ““contorno”Propriedade especifica uma borda ou esboço ao redor do elemento, principalmente quando é selecionado.
- O "preenchimento","Radio de fronteira", e "tamanho da fonte”As propriedades desempenham funções como declarado acima.
Elemento de estilo “H1”
.Conteúdo H1
Alinhamento de texto: centro;
Size da fonte: 45px;
Cor: #e485b9;
O
O elemento é decorado com as seguintes propriedades: - ““alinhamento de texto”A propriedade ajusta o alinhamento do texto do elemento.
- ““tamanho da fonte" e "cor”Propriedades estilizaram o elemento de uma maneira como afirmado acima.
O GIF abaixo exibe o resultado final do código:
É assim que você pode definir o valor padrão para um elemento HTML.
Conclusão
O elemento HTML compreende vários menus que são selecionáveis. Esses menus são especificados dentro do elemento HTML. Para definir o valor padrão para um elemento HTML, é necessário especificar o atributo “selecionado”Para essa opção. Este estudo descreveu o elemento HTML e o método para definir seu valor padrão com um exemplo prático.