Mi sto solo chiedendo come utilizzare il nuovo attributo di input HTML5 "richiesto" nel modo corretto sui pulsanti di opzione. Ogni campo radiobutton ha bisogno dell'attributo come sotto? O è sufficiente se solo un campo lo ottiene?HTML5: Come utilizzare l'attributo "richiesto" con un campo di input "radio"
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
impostare l'attributo required per almeno un ingresso del gruppo radio.
Impostazione required per tutti gli ingressi è più chiara, ma non necessario (a meno generare dinamicamente pulsanti opzionali).
Per raggruppare i pulsanti di opzione, è necessario che tutti abbiano lo stesso valore name. Questo consente di selezionare solo uno alla volta e applica required all'intero gruppo.
<form>
Select Gender:
<label><input type="radio" name="gender" value="male" required>Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<input type="submit">
</form>Anche prendere nota di:
Per evitare confusione se è necessario o meno un gruppo di pulsanti, gli autori sono incoraggiati a specificare l'attributo tutte le radio pulsanti in un gruppo. In effetti, in generale, gli autori sono incoraggiati ad evitare di avere gruppi di pulsanti di opzione che non hanno controlli inizialmente controllati in primo luogo, poiché si tratta di uno stato a cui l'utente non può tornare ed è quindi generalmente considerato una scarsa interfaccia utente.
provare questo ...
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Click Here" />
</form>
Se i pulsanti di opzione sono stati personalizzati, ad esempio, l'icona originale per il pulsante di opzione è stata nascosta via css display:none in modo da poter creare il proprio pulsante di opzione, quindi si potrebbe ricevere l'errore.
Il modo per risolvere il problema è quello di sostituire display:none con opacity:0
Una cosa molto importante da ricordare è che gli ingressi di radio e checkbox sono raggruppati per il nome dell'attributo ** **. Quindi, l'impostazione richiesta su uno qualsiasi degli input (tra un gruppo di input con lo stesso nome) funzionerebbe. Se, d'altra parte, perdi l'attributo ** name **, non funzionerà come ti aspetteresti. –
@kumar_harsh Ottimo punto. Un caso tipico di qualcuno che omette il nome è quando si usa Angular ng-model. –
@kumar_harsh "Il gruppo di pulsanti di opzione che contiene un elemento di input a contiene anche tutti gli altri elementi di input b che soddisfano tutte le seguenti condizioni" (4) http://www.w3.org/TR/html5/forms.html # radio-button-group –