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" />
Respostas:
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>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.
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.
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
display:none. Isso já foi respondido aqui: stackoverflow.com/questions/49687229/…
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>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 .
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"