Como denominar um rótulo de formulário com CSS

Um elemento de formulário que é usado para rotular os diversos campos e áreas de entrada em um formulário na web é o elemento label. Ele pode ser denominado usando regras de folhas de estilo em cascata.

Conteúdo

Coisas que você precisa

Instruções

Coisas que você precisa

Um conhecimento prático de HTML

Um conhecimento prático de CSS

instruções

- 1
  
  Para estilizar os elementos do rótulo a maneira como eles aparecem na imagem na introdução, você precisa usar o elemento da etiqueta com o atributo "for". Além disso, você precisa fechar o elemento da etiqueta antes de adicionar o elemento de "input" em si. O HTML para o formulário completo em mostrado na ilustração.
- 2
  Para estilizar os elementos do rótulo, fiz os rótulos são exibidos como elementos nível de bloco, que foram flutuaram para a esquerda. Então eu atribuído uma largura para os rótulos de modo que os campos de entrada seriam todos uma distância uniforme longe das etiquetas. I atribuída uma cor e fez o texto em negrito. Eu usei conteúdo gerado para adicionar dois pontos (:) após o rótulo. (Os dois pontos podem não aparecer em todos os navegadores.)
  Aqui está o CSS:
  rótulo {
```
color: # B4886B-
font-weight: bold-
display: BLOCO
width: 150px;
float: left;
```
  }
  label: after {content: ":"}
- 3
  Apenas para ser completo eu também vou mostrar-lhe o CSS usado para denominar o conjunto de campos, uma vez que os elementos do rótulo são delimitados por um conjunto de campos delimitada.
  Aqui está o CSS:
  fieldset {
```
border: 1px solid # CCA383-
width: 400px;
background: # FFE8EF-
padding: 3px;
```
  }
  lenda fieldset {
```
background: # CCA383-
padding: 6px;
font-weight: bold-
```
  }
- 4
  Você poderia fazer muitas outras coisas para estilizar os elementos do rótulo. Meu exemplo é apenas uma maneira de fazê-lo.

De esta maneira? Compartilhar em redes sociais: