Como usar o atributo "obrigatório" com um campo de entrada "rádio"

409

Estou apenas querendo saber como usar o novo atributo de entrada HTML5 "obrigatório" da maneira correta nos botões de opção. Todo campo de botão de opção precisa do atributo abaixo ou é suficiente se apenas um campo o obtiver?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

html radio-button required nerdess
fonte

692

TL; DR: defina o requiredatributo para pelo menos uma entrada do grupo de rádio.

A configuração requiredde todas as entradas é mais clara, mas não é necessária (a menos que gere dinamicamente botões de opção).

Para agrupar botões de opção, todos devem ter o mesmo namevalor. Isso permite que apenas um seja selecionado por vez e se aplica requireda todo o grupo.

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>

Expandir snippet

Observe também:

Para evitar confusão quanto à necessidade ou não de um grupo de botões de opção, os autores são encorajados a especificar o atributo em todos os botões de opção em um grupo. De fato, em geral, os autores são incentivados a evitar grupos de botões de opção que não tenham nenhum controle inicialmente verificado, pois esse é um estado para o qual o usuário não pode retornar e, portanto, geralmente é considerado uma interface de usuário ruim.

Fonte

Seybsen
fonte

1

@kumar_harsh: Qualquer caixa de seleção marcada como necessária deve estar marcada. Da mesma forma, marcar uma caixa de seleção necessária não afeta outras caixas de seleção (mesmo nome ou não). Não existe uma marcação simples para indicar a indicação "dessas x caixas de seleção com o mesmo nome", pelo menos uma deve estar marcada.

Brad Kent

3

@ Davdriver sim, você pode especificá-lo em todos os botões de opção, se quiser. De fato, o w3c escreveu: Para evitar confusão quanto à necessidade ou não de um grupo de botões de opção, os autores são encorajados a especificar o atributo em todos os botões de opção em um grupo. (consulte w3.org/TR/html5/forms.html#the-required-attribute em Code Example )

Seybsen

1

É importante lembrar que, em geral, os autores são incentivados a evitar grupos de botões de opção que não tenham nenhum controle inicialmente verificado, pois esse é um estado para o qual o usuário não pode retornar e é, portanto, geralmente considerada uma interface de usuário ruim. Por quê? Como não ter um controle inicialmente verificado é um caso totalmente válido (UX).

PussInBoots

2

Eu também gostaria de acrescentar que, em alguns casos, botões de opção que não possuem o estado "verificado" inicializado são uma coisa muito boa e um bom UX. No meu caso, o usuário deve inicialmente classificar algum objeto com base em uma lista semi-longa de respostas sim / não. Obter as respostas erradas para essas perguntas afetaria negativamente a lógica downstream. Portanto, não posso padronizar as respostas para Sim ou Não, pois elas variam para cada objeto que o usuário está classificando. É possível que eles sintam falta de um que precisava ser alterado e insiram dados incorretos no banco de dados. Ou a tarefa deve ser interrompida e incerta de onde parou.

Joel Wigton

1

@Seybsen Nah, "em geral" cobre que isso não é absoluto. Mas esses órgãos de padrões nunca dão exemplos de quando realmente seria uma interface de usuário ruim usar suas recomendações, então eu queria fornecer uma. Eles fazem parecer que, se você usá-lo, não pensou no seu UX. Eu quero que outros desenvolvedores tenham a confiança necessária para fazer uma escolha de design informada - e não apenas usar cegos cada botão de opção.

Joel Wigton

4

Você pode usar esse trecho de código ...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Especifique a palavra-chave " necessária " em uma das instruções de seleção . Se você deseja alterar a maneira padrão de sua aparência. Você pode seguir estas etapas. Isso é apenas para informações adicionais, se você tiver alguma intenção de modificar o comportamento padrão.

Adicione o seguinte no seu .cssarquivo.

/* style all elements with a required attribute */
:required {
  background: red;
}

Para mais informações, consulte o seguinte URL.

https://css-tricks.com/almanac/selectors/r/required/

Dulith De Costa
fonte

3

Se seus botões de opção foram personalizados, por exemplo, o ícone original do botão de opção foi oculto por meio de css, display:nonepara que você possa criar seu próprio botão de opção e, em seguida, poderá receber o erro.

A maneira de corrigi-lo é substituí-lo display:noneporopacity:0

James
fonte

Acho que você quer dizer que a mensagem de erro do navegador não é visível se o próprio botão de opção estiver oculto display:none. Isso já foi respondido aqui: stackoverflow.com/questions/49687229/…

Seybsen 31/07

1

Aqui está uma implementação muito básica, mas moderna, dos botões de opção necessários com validação HTML5 nativa:

body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>

  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="other" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

Expandir snippet

Embora eu seja um grande fã da abordagem minimalista do uso da validação nativa em HTML5, convém substituí-la pela validação Javascript a longo prazo. A validação Javascript oferece muito mais controle sobre o processo de validação e permite definir classes reais (em vez de pseudo-classes) para melhorar o estilo dos campos (in) válidos. Essa validação HTML5 nativa pode ser o seu substituto em caso de Javascript quebrado (ou falta de). Você pode encontrar um exemplo disso aqui , juntamente com algumas outras sugestões sobre como criar formulários Better , inspiradas em Andrew Cole .

JoostS
fonte

0

Eu tive que usar required="required"junto com o mesmo nome e tipo que a validação funcionou bem.

input type="radio" name="userradio"  id="" value="User" required="required"

input type="radio" name="userradio" id="" value="Admin" 

input type="radio" name="userradio" id="" value="Guest"

mk
fonte

1

Ajudaria se você formatasse sua resposta e explicasse por que ela funcionou.

Joe Lissner

1

concordou com @JoeLissner. Formate seu código como tal usando as ferramentas fornecidas.

6/02

Como usar o atributo "obrigatório" com um campo de entrada "rádio"

Respostas: