Explicação detalhada do formulário Form: caso, embelezamento CSS

Principais pontos deste artigo:

• forma comum
• natureza da forma
• Embelezamento do CSS do formulário
• Use o rádio para implementar a guia Tab

o que é um formulário

Os usuários preenchem as informações por meio de formulários, que são enviados aos servidores em uma rede de computadores. Um rótulo de formulário não é um rótulo, mas um conjunto de rótulos, porque a interface interativa de dados em diferentes formatos é diferente. Se for texto, será uma caixa de entrada e a janela de seleção de arquivo será aberta quando o arquivo for enviado Se for hora ou data, um calendário aparecerá para os usuários escolherem. A conhecida página de login contém várias caixas de entrada:

Um conjunto de caixas de entrada geralmente é organizado pelo formelemento , que também inclui botões para envio de dados:

<form action="/api/to/handle/form" method="get/post">
  <!-- 单标签  type 决定显示效果 行内块级元素 -->
  <!-- text输入框  --- 单行输入 -->
  <input type="text">
  <!-- password 密码框 -->
  <input type="password">

  <br>
  请选择性别
  <!-- radio 单选框   必须在标签上添加属性 name  值必须是一样的 -->
  <input type="radio" name="1">男
  <input type="radio" name="1">女

  <br>

  请选择爱好
  <!-- checkbox 复选框  多选 -->
  <input type="checkbox"> 干饭
  <input type="checkbox"> 睡觉
  <input type="checkbox"> 撸代码

  <br>

  <!-- file 文件上传 默认只能传一个文件  multiple可以实现多文件上传 -->
  <input type="file" multiple>

  <br>

  <!-- 文本域   多行输入   -->
  <!-- cols列数  rows行数  不建议使用    一般使用css确定宽高 -->
  <textarea name="" id="" cols="10" rows="5"></textarea>

  <br>

  <!-- 按钮   button / submit / reset -->

  <!-- button 普通按钮 -->
  <input type="button" value="确定">

  <!-- submit 提交的 -->
  <input type="submit" value="提交">

  <!-- reset 重置 --- 清空 -->
  <input type="reset" value="清空">
</form>

[Interpretação] formOs elementos têm dois atributos importantes:

• action: Roteamento para processamento de dados, requer suporte de back-end
• method: o método HTTP para envio de dados, geralmente POST.

[Dica] Atualmente, a maioria deles usa JavaScript ajax ou API de busca para enviar dados, em vez de usar formelementos para enviar dados. No momento, esses dois atributos podem ser omitidos e até mesmo formos elementos podem ser omitidos, deixando apenas o caixa de entrada.

[Dicas] Para mais casos, consulte ¹ .

natureza de entrada

Os exemplos acima demonstram diferentes tipos de caixas de entrada. Esta seção explica principalmente a natureza das inputtags :

• inputO elemento é inline-blockque ele pode estar na mesma linha que outros elementos que não sejam de nível de bloco e pode definir as margens de altura, largura, superior, inferior, interna e externa. inputOs rótulos também são chamados de elementos de substituição (rótulos e atributos juntos determinam o efeito de exibição da página).

<style>
  .big {
      
      
    width: 500px;
    height: 40px;
    font-size: 1.5rem;
  }
</style>

<input type="text" class="big">

• O elemento input deve definir o atributo type. Se não definido, o padrão é texto. Caso você não use JavaScript para enviar os dados, também deve definir o atributo name, pois o servidor obterá o valor do campo correspondente de acordo com o nome. O atributo value do elemento input representa o valor da caixa input, que pode ser obtido ou definido pelo JavaScript. Além disso, adicionar o atributo id à entrada pode facilitar o JavaScript para obter a caixa de entrada e, em seguida, ler ou definir os dados da caixa de entrada.

<input type="text" name="username" id="username" value="默认值" placeholder="提示信息" >

estilo de entrada

O formulário padrão é um quadro preto e um quadro preto mais espesso aparecerá quando clicado. O formulário do elemento inspecionado vem com uma borda de 2 pixels, um preenchimento esquerdo e direito de 2 pixels e um preenchimento superior e inferior de 1 pixel (Chrome navegador):

Em seguida, o ajuste de estilo da caixa de entrada é ilustrado imitando a caixa de entrada do Baidu .

1) Construir a estrutura com HTML:

<style>

</style>

<div class="form">
  <input class="text" type="text">
  <input class="btn" type="submit" value="百度一下">
</div>

2) Defina a largura e a altura:

<style>
  .form {
      
      
    width: 600px;
    height: 44px;
  }

  .text {
      
      
    width: 500px;
    height: 44px;
  }

  .btn {
      
      
    width: 100px;
    height: 44px;
  }
</style>

<div class="form">
  <input class="text" type="text">
  <input class="btn" type="submit" value="百度一下">
</div>

Neste ponto, você descobrirá que o botão caiu para baixo. Isso ocorre porque a entrada é um elemento de nível de bloco embutido. Se houver um caractere em branco entre duas entradas, ele atingirá esse pequeno intervalo. Use flutuadores para eliminar lacunas:

  .text {
    
    
    width: 500px;
    float: left;
  }

  .btn {
    
    
    width: 100px;
    float: left;
  }

No momento, o problema ainda não foi resolvido. Isso ocorre porque a caixa de entrada com entrada de texto possui apenas a margem interna e a borda. Sua largura real é: 500+2+2+2+2. Cancele a borda e a margem interna:

  .text {
    
    
    width: 500px;
    float: left;
    border: none;
    padding: 0;
  }

[Importante] input[type=submit]É um botão, sua borda e margens interna e externa não irão expandir a largura e altura da caixa, pois pertence ao modelo de caixa esquisita (border-box) por padrão, e o texto nele é centralizado automaticamente .

3) Defina a borda externa e a cor de fundo. Para simplificar, a borda externa é definida como o contêiner externo

.form {
    
    
	...
    border: 2px solid #4569ff;
    border-radius: 10px;
    overflow: hidden; /*必要的，不然圆角会溢出*/
  }

.btn {
    
    
    ...
    border: none;
    background-color: #4e6ef2;
    color: #fff;
  }

4) Defina o estilo quando clicado, o formulário fica no estado de foco quando clicado e a pseudoclasse será acionada :focus:

  .text:focus {
    
    
    outline: none;
  }

5) Ao clicar, o cursor fica na grade superior, que parece bem desconfortável, reajuste a margem interna:

  .text {
    
    
    width: 468px;
    ...
    padding: 0 16px;
  }

6) Finalmente, adicione um pouco de estilo ao btn:

  .btn {
    
    
   	...
    cursor: pointer;
  }
  .btn:hover {
    
    
    background-color: #4662d9;
  }

Resultados finais:

Código completo:

<style>
  .form {
      
      
    width: 600px;
    height: 44px;
    border: 2px solid #4569ff;
    border-radius: 10px;
    overflow: hidden;
  }

  .text {
      
      
    width: 468px;
    height: 44px;
    float: left;
    border: none;
    padding: 0 16px;
  }

  .text:focus {
      
      
    outline: none;
  }

  .btn {
      
      
    width: 100px;
    height: 44px;
    float: left;
    border: none;
    background-color: #4e6ef2;
    color: #fff;
    cursor: pointer;
  }

  .btn:hover {
      
      
    background-color: #4662d9;
  }
</style>

<div class="form">
  <input class="text" type="text">
  <input class="btn" type="submit" value="百度一下">
</div>

É muito simples? Só precisa definir alguns estilos simples para obter uma caixa de entrada perfeita.

formulário de rádio

input[type=radio]Indica uma entrada de escolha única. Para ser franco, é uma pergunta de escolha única. Um grupo de botões só pode escolher um. Como há uma espécie de interruptor no rádio antigo, vários botões são organizados juntos, mas apenas um pode ser pressionado por vez, apropriadamente chamado de botão de rádio.

[Ponto de conhecimento 1] Um grupo de formas de rádio precisa definir o mesmo nome para refletir o efeito de rádio:

<input type="radio" value="a" name="1">
<input type="radio" value="b" name="1">
<input type="radio" value="c" name="1">
<input type="radio" value="d" name="1">

[Ponto de conhecimento 2] Você pode adicionar informações de prompt por meio do rótulo e deixar o atributo for do rótulo apontar para o atributo id do rádio.

<input type="radio" name="1" id="a"><label for="a">A</label>
<input type="radio" name="1" id="b"><label for="b">B</label>
<input type="radio" name="1" id="c"><label for="c">B</label>
<input type="radio" name="1" id="d"><label for="d">B</label>

Quando o atributo for do rótulo aponta para o id correspondente, eles são vinculados e podem ser selecionados clicando no rótulo.

[Ponto de conhecimento 3] Quando o rádio for selecionado, ele estará no estado marcado, você pode :checkedadicionar :

<style>
  input[type=radio]:checked+label {
      
      
    color: green;
    font-size: 2rem;
  }
</style>

<div><input type="radio" name="1" id="a"><label for="a">A</label></div>
<div><input type="radio" name="1" id="b"><label for="b">B</label></div>
<div><input type="radio" name="1" id="c"><label for="c">C</label></div>
<div><input type="radio" name="1" id="d"><label for="d">D</label></div>

[Ponto de conhecimento 4] A caixa de entrada possui um tipo de atributo switch, que considera apenas a existência, não o valor do atributo:

<input type="text" disabled>

disabledIndica um elemento desativado, quando este atributo aparece, a caixa de entrada não funciona.

[Pensando] Tente adicionar alguns valores ao atributo disable para ver se o efeito desativado da caixa de entrada será alterado, por exemplo disabled="false", disabled="disabled".

Existem também atributos de switch hidden, required, alguns tipos de caixas de entrada têm alguns atributos especiais, como rádio e caixa de seleção checkede menus suspensos selected.

guia de implementação de rádio [vídeo]

A guia Guia é um componente da interface do usuário que pode exibir apenas um cartão por vez, enquanto os outros cartões ficarão ocultos. Quando a cabeça de outra carta é clicada, a carta correspondente será expandida e as outras cartas serão ocultadas. Tanto a guia Tab quanto o rádio têm a natureza de seleção única , portanto, você pode usar o rádio para implementar a guia Tab:

<style>
  .tabs {
      
      
    position: relative;
  }

  .tab-hd {
      
      
    background-color: tan;
    display: inline-block;
    padding: 8px 12px;
    float: left;
  }

  .tab-bd {
      
      
    width: 350px;
    height: 200px;
    background-color: wheat;
    position: absolute;
    top: 110%;
    left: 0;
    visibility: hidden;
  }

  .clearfix::after {
      
      
    content: "";
    display: block;
    clear: both;
  }

  input[name=tabs]:checked+.tab-hd {
      
      
    background-color: orange;
  }

  input[name=tabs]:checked~.tab-bd {
      
      
    visibility: visible;
  }
</style>

<div class="tabs clearfix">
  <div class="tab">
    <input type="radio" name="tabs" id="tab1" hidden checked>
    <label for="tab1" class="tab-hd">选项卡1</label>
    <div class="tab-bd">选项卡1的内容</div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab2" hidden>
    <label for="tab2" class="tab-hd">选项卡2</label>
    <div class="tab-bd">选项卡2的内容</div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab3" hidden>
    <label for="tab3" class="tab-hd">选项卡3</label>
    <div class="tab-bd">选项卡3的内容</div>
  </div>
  <div class="tab">
    <input type="radio" name="tabs" id="tab4" hidden>
    <label for="tab4" class="tab-hd">选项卡4</label>
    <div class="tab-bd">选项卡4的内容</div>
  </div>
</div>

Perceba o efeito:

【Explicação em vídeo】

Use elementos de formulário para obter o efeito Tab tab

【Pontos chave】

• Use o rádio para obter efeito de seleção única
• Use para :checkeddefinir o estilo selecionado
• Use posicionamento absoluto e ocultação de elemento para realizar a exibição e ocultação do conteúdo da guia.
• Use flutuadores para remover espaços.

artigo de referência

♥ Sou um engenheiro front-end: seu querido Sen. Muito obrigado por seus gostos e atenção, e bem-vindos a todos para participar de discussões ou colaborações.

★ Este artigo é de código aberto , usando o protocolo CC BY-SA 4.0 , indique a fonte para reimpressão: Auto-cultivo de engenheiros de front-end . GitHub.com@xiayulu.

★ Para informações sobre cooperação criativa ou recrutamento, envie uma mensagem privada ou e-mail para: [email protected], especificando o assunto: cooperação criativa ou recrutamento de engenheiros front-end .

---

1. MDN. entrada . ↩︎