Ben sadece radyo düğmeleri doğru şekilde gerekli "HTML" yeni HTML5 giriş özniteliği kullanmak için merak ediyorum. Her radyo düğmesi alanının aşağıdaki gibi bir özelliğe ihtiyacı var mıdır yoksa yalnızca bir alanın alması yeterli midir?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />Yanıtlar:
TL; DR: requiredRadyo grubunun en az bir girişi için özniteliği ayarlayın .
requiredTüm girişler için ayar daha nettir, ancak gerekli değildir (dinamik olarak radyo düğmeleri oluşturmadığı sürece).
Radyo düğmelerini gruplandırmak için hepsinin aynı namedeğere sahip olması gerekir . Bu, aynı anda yalnızca bir tanesinin seçilmesine izin verir requiredve tüm grup için geçerlidir .
<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>Ayrıca aşağıdakilere de dikkat edin:
Bir radyo düğmesi grubunun gerekli olup olmadığı konusunda karışıklığı önlemek için, yazarların öznitelikleri bir gruptaki tüm radyo düğmelerinde belirtmeleri önerilir. Aslında, genel olarak, yazarlar ilk etapta kontrol edilmemiş radyo düğmesi gruplarından kaçınmaya teşvik edilir, çünkü bu kullanıcının geri dönemeyeceği bir durumdur ve bu nedenle genellikle zayıf bir kullanıcı arayüzü olarak kabul edilir.
Bu kod snippet'ini kullanabilirsiniz ...
<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>Select deyimlerinden birinde " zorunlu " anahtar kelimeyi belirtin . Görünüşünün varsayılan yolunu değiştirmek istiyorsanız. Bu adımları takip edebilirsiniz. Varsayılan davranışı değiştirme niyetiniz varsa, bu yalnızca ek bilgi içindir.
Aşağıdakileri .cssdosyaya ekleyin .
/* style all elements with a required attribute */
:required {
background: red;
}Daha fazla bilgi için aşağıdaki URL'ye bakabilirsiniz.
Radyo düğmeleriniz özelleştirildiyse, örneğin display:nonekendi radyo düğmenizi oluşturabilmeniz için radyo düğmesinin orijinal simgesi css aracılığıyla gizlenmişse , hatayı alıyorsunuz olabilir.
Düzeltmenin yolu display:none,opacity:0
display:none. Burada zaten cevaplanan: stackoverflow.com/questions/49687229/…
Yerel HTML5 doğrulaması ile gerekli radyo düğmelerinin çok temel ancak modern bir uygulaması:
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>Yerel HTML5 doğrulamasını kullanmanın minimalist yaklaşımının büyük bir hayranı olmama rağmen, uzun vadede Javascript doğrulamasıyla değiştirmek isteyebilirsiniz. Javascript doğrulaması, doğrulama işlemi üzerinde çok daha fazla kontrol sağlar ve (in) geçerli alanların stilini geliştirmek için gerçek sınıflar (sözde sınıflar yerine) ayarlamanızı sağlar. Bu yerel HTML5 doğrulaması, Javascript'in bozuk (veya eksik) olması durumunda geri dönüşünüz olabilir. Andrew Cole'tan esinlenerek Daha İyi formların nasıl oluşturulacağına dair diğer bazı önerilerin yanı sıra bunun bir örneğini burada bulabilirsiniz .
required="required"Doğrulama işe yaradı aynı adı ve türü ile birlikte kullanmak zorunda kaldı .
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"