Mixing
Check only single Radio Button in HTML
1
My problem is that I am facing this problem in Gender Section in which It has to select only one but I can select all three. However, when I select only one radio button and then try to submit the data, it shows that I have to select at least one radio button even if i had already selected one radio button.
I have attached both the html and css snippet below :
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for='Male'],
.box label[for='Male'] + input,
.box label[for='Female'],
.box label[for='Female'] + input,
.box label[for='Other'],
.box label[for='Other'] + input,
.box input[type='radio'] {
display: inline;
clear: none;
width: auto;
}
.box input[type='text'],
.box input[type='password'],
.box select,
.box input[type='tel'],
.box textarea,
.box fieldset,
.box input[type='radio'],
.box input[type='email'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus,
.box select:focus,
.box input[type='tel']:focus,
.box textarea:focus,
.box input[type='email']:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type='submit'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type='submit']:hover {
background: #2ecc71;
}
.box input[type='radio'] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css" />
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Student Registration</h1>
<!-- First Name -->
<input type="text" name="Fname" placeholder="First Name" required />
<!-- Middle Name -->
<input type="text" name="Mname" placeholder="Middle Name" required />
<!-- Last Name -->
<input type="text" name="Lname" placeholder="Last Name" required />
<!-- Moblie Number -->
<input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required />
<!-- Parent's Number -->
<input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required />
<!-- Address -->
<textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
<!-- City -->
<input type="text" name="City" placeholder="City" required />
<!-- Branch -->
<select required id="Branch" name="Branch">
<option value="" selected="selected">Branch</option>
<option value="AutoMobile">AutoMobile</option>
<option value="Civil">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<!-- Enrollment Number -->
<input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required />
<!-- Gender -->
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male" /> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female" /> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other" /> Other </label>
</fieldset>
<!--E-mail Address -->
<input type="email" name="email" placeholder="E-mail Address" required />
<!-- Password -->
<input type="password" name="pass" placeholder="Password" required />
<!--Blood Group -->
<select id="Blood Group" name="Blood Group">
<option value="" selected="selected">Blood Group</option>
<option value="A+">A+</option>
<option value="B+l">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
<!--Submit Button -->
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>Help would be appreciated!
html css radio-button
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
add a comment |
1
My problem is that I am facing this problem in Gender Section in which It has to select only one but I can select all three. However, when I select only one radio button and then try to submit the data, it shows that I have to select at least one radio button even if i had already selected one radio button.
I have attached both the html and css snippet below :
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for='Male'],
.box label[for='Male'] + input,
.box label[for='Female'],
.box label[for='Female'] + input,
.box label[for='Other'],
.box label[for='Other'] + input,
.box input[type='radio'] {
display: inline;
clear: none;
width: auto;
}
.box input[type='text'],
.box input[type='password'],
.box select,
.box input[type='tel'],
.box textarea,
.box fieldset,
.box input[type='radio'],
.box input[type='email'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus,
.box select:focus,
.box input[type='tel']:focus,
.box textarea:focus,
.box input[type='email']:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type='submit'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type='submit']:hover {
background: #2ecc71;
}
.box input[type='radio'] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css" />
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Student Registration</h1>
<!-- First Name -->
<input type="text" name="Fname" placeholder="First Name" required />
<!-- Middle Name -->
<input type="text" name="Mname" placeholder="Middle Name" required />
<!-- Last Name -->
<input type="text" name="Lname" placeholder="Last Name" required />
<!-- Moblie Number -->
<input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required />
<!-- Parent's Number -->
<input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required />
<!-- Address -->
<textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
<!-- City -->
<input type="text" name="City" placeholder="City" required />
<!-- Branch -->
<select required id="Branch" name="Branch">
<option value="" selected="selected">Branch</option>
<option value="AutoMobile">AutoMobile</option>
<option value="Civil">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<!-- Enrollment Number -->
<input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required />
<!-- Gender -->
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male" /> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female" /> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other" /> Other </label>
</fieldset>
<!--E-mail Address -->
<input type="email" name="email" placeholder="E-mail Address" required />
<!-- Password -->
<input type="password" name="pass" placeholder="Password" required />
<!--Blood Group -->
<select id="Blood Group" name="Blood Group">
<option value="" selected="selected">Blood Group</option>
<option value="A+">A+</option>
<option value="B+l">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
<!--Submit Button -->
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>Help would be appreciated!
html css radio-button
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
add a comment |
1
1
1
My problem is that I am facing this problem in Gender Section in which It has to select only one but I can select all three. However, when I select only one radio button and then try to submit the data, it shows that I have to select at least one radio button even if i had already selected one radio button.
I have attached both the html and css snippet below :
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for='Male'],
.box label[for='Male'] + input,
.box label[for='Female'],
.box label[for='Female'] + input,
.box label[for='Other'],
.box label[for='Other'] + input,
.box input[type='radio'] {
display: inline;
clear: none;
width: auto;
}
.box input[type='text'],
.box input[type='password'],
.box select,
.box input[type='tel'],
.box textarea,
.box fieldset,
.box input[type='radio'],
.box input[type='email'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus,
.box select:focus,
.box input[type='tel']:focus,
.box textarea:focus,
.box input[type='email']:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type='submit'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type='submit']:hover {
background: #2ecc71;
}
.box input[type='radio'] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css" />
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Student Registration</h1>
<!-- First Name -->
<input type="text" name="Fname" placeholder="First Name" required />
<!-- Middle Name -->
<input type="text" name="Mname" placeholder="Middle Name" required />
<!-- Last Name -->
<input type="text" name="Lname" placeholder="Last Name" required />
<!-- Moblie Number -->
<input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required />
<!-- Parent's Number -->
<input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required />
<!-- Address -->
<textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
<!-- City -->
<input type="text" name="City" placeholder="City" required />
<!-- Branch -->
<select required id="Branch" name="Branch">
<option value="" selected="selected">Branch</option>
<option value="AutoMobile">AutoMobile</option>
<option value="Civil">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<!-- Enrollment Number -->
<input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required />
<!-- Gender -->
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male" /> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female" /> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other" /> Other </label>
</fieldset>
<!--E-mail Address -->
<input type="email" name="email" placeholder="E-mail Address" required />
<!-- Password -->
<input type="password" name="pass" placeholder="Password" required />
<!--Blood Group -->
<select id="Blood Group" name="Blood Group">
<option value="" selected="selected">Blood Group</option>
<option value="A+">A+</option>
<option value="B+l">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
<!--Submit Button -->
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>Help would be appreciated!
html css radio-button
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
My problem is that I am facing this problem in Gender Section in which It has to select only one but I can select all three. However, when I select only one radio button and then try to submit the data, it shows that I have to select at least one radio button even if i had already selected one radio button.
I have attached both the html and css snippet below :
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for='Male'],
.box label[for='Male'] + input,
.box label[for='Female'],
.box label[for='Female'] + input,
.box label[for='Other'],
.box label[for='Other'] + input,
.box input[type='radio'] {
display: inline;
clear: none;
width: auto;
}
.box input[type='text'],
.box input[type='password'],
.box select,
.box input[type='tel'],
.box textarea,
.box fieldset,
.box input[type='radio'],
.box input[type='email'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus,
.box select:focus,
.box input[type='tel']:focus,
.box textarea:focus,
.box input[type='email']:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type='submit'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type='submit']:hover {
background: #2ecc71;
}
.box input[type='radio'] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css" />
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Student Registration</h1>
<!-- First Name -->
<input type="text" name="Fname" placeholder="First Name" required />
<!-- Middle Name -->
<input type="text" name="Mname" placeholder="Middle Name" required />
<!-- Last Name -->
<input type="text" name="Lname" placeholder="Last Name" required />
<!-- Moblie Number -->
<input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required />
<!-- Parent's Number -->
<input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required />
<!-- Address -->
<textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
<!-- City -->
<input type="text" name="City" placeholder="City" required />
<!-- Branch -->
<select required id="Branch" name="Branch">
<option value="" selected="selected">Branch</option>
<option value="AutoMobile">AutoMobile</option>
<option value="Civil">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<!-- Enrollment Number -->
<input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required />
<!-- Gender -->
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male" /> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female" /> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other" /> Other </label>
</fieldset>
<!--E-mail Address -->
<input type="email" name="email" placeholder="E-mail Address" required />
<!-- Password -->
<input type="password" name="pass" placeholder="Password" required />
<!--Blood Group -->
<select id="Blood Group" name="Blood Group">
<option value="" selected="selected">Blood Group</option>
<option value="A+">A+</option>
<option value="B+l">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
<!--Submit Button -->
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>Help would be appreciated!
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for='Male'],
.box label[for='Male'] + input,
.box label[for='Female'],
.box label[for='Female'] + input,
.box label[for='Other'],
.box label[for='Other'] + input,
.box input[type='radio'] {
display: inline;
clear: none;
width: auto;
}
.box input[type='text'],
.box input[type='password'],
.box select,
.box input[type='tel'],
.box textarea,
.box fieldset,
.box input[type='radio'],
.box input[type='email'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus,
.box select:focus,
.box input[type='tel']:focus,
.box textarea:focus,
.box input[type='email']:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type='submit'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type='submit']:hover {
background: #2ecc71;
}
.box input[type='radio'] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css" />
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Student Registration</h1>
<!-- First Name -->
<input type="text" name="Fname" placeholder="First Name" required />
<!-- Middle Name -->
<input type="text" name="Mname" placeholder="Middle Name" required />
<!-- Last Name -->
<input type="text" name="Lname" placeholder="Last Name" required />
<!-- Moblie Number -->
<input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required />
<!-- Parent's Number -->
<input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required />
<!-- Address -->
<textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
<!-- City -->
<input type="text" name="City" placeholder="City" required />
<!-- Branch -->
<select required id="Branch" name="Branch">
<option value="" selected="selected">Branch</option>
<option value="AutoMobile">AutoMobile</option>
<option value="Civil">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<!-- Enrollment Number -->
<input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required />
<!-- Gender -->
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male" /> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female" /> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other" /> Other </label>
</fieldset>
<!--E-mail Address -->
<input type="email" name="email" placeholder="E-mail Address" required />
<!-- Password -->
<input type="password" name="pass" placeholder="Password" required />
<!--Blood Group -->
<select id="Blood Group" name="Blood Group">
<option value="" selected="selected">Blood Group</option>
<option value="A+">A+</option>
<option value="B+l">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
<!--Submit Button -->
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select > option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for='Male'],
.box label[for='Male'] + input,
.box label[for='Female'],
.box label[for='Female'] + input,
.box label[for='Other'],
.box label[for='Other'] + input,
.box input[type='radio'] {
display: inline;
clear: none;
width: auto;
}
.box input[type='text'],
.box input[type='password'],
.box select,
.box input[type='tel'],
.box textarea,
.box fieldset,
.box input[type='radio'],
.box input[type='email'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type='text']:focus,
.box input[type='password']:focus,
.box select:focus,
.box input[type='tel']:focus,
.box textarea:focus,
.box input[type='email']:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type='submit'] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type='submit']:hover {
background: #2ecc71;
}
.box input[type='radio'] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css" />
</head>
<body>
<form class="box" method="POST" action="test.html">
<h1>Student Registration</h1>
<!-- First Name -->
<input type="text" name="Fname" placeholder="First Name" required />
<!-- Middle Name -->
<input type="text" name="Mname" placeholder="Middle Name" required />
<!-- Last Name -->
<input type="text" name="Lname" placeholder="Last Name" required />
<!-- Moblie Number -->
<input type="tel" name="Mnumber" placeholder="Mobile Number" pattern="[0-9]{10}" required />
<!-- Parent's Number -->
<input type="tel" name="Pnumber" placeholder="Parents Number" pattern="[0-9]{10}" required />
<!-- Address -->
<textarea name="Address" placeholder="Address" maxlength="500" required></textarea>
<!-- City -->
<input type="text" name="City" placeholder="City" required />
<!-- Branch -->
<select required id="Branch" name="Branch">
<option value="" selected="selected">Branch</option>
<option value="AutoMobile">AutoMobile</option>
<option value="Civil">Civil</option>
<option value="Computer">Computer</option>
<option value="Electrical">Electrical</option>
<option value="Mechanical">Mechanical</option>
</select>
<!-- Enrollment Number -->
<input type="tel" name="Enroll" placeholder="Enrollment Number" pattern="[0-9]{12}" required />
<!-- Gender -->
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" required value="Male" /> Male</label>
<label for="Female"><input type="radio" name="Gender" required value="Female" /> Female</label>
<label for="Other"><input type="radio" name="Gender" required value="Other" /> Other </label>
</fieldset>
<!--E-mail Address -->
<input type="email" name="email" placeholder="E-mail Address" required />
<!-- Password -->
<input type="password" name="pass" placeholder="Password" required />
<!--Blood Group -->
<select id="Blood Group" name="Blood Group">
<option value="" selected="selected">Blood Group</option>
<option value="A+">A+</option>
<option value="B+l">B+</option>
<option value="AB+">AB+</option>
<option value="O+">O+</option>
<option value="A-">A-</option>
<option value="B-">B-</option>
<option value="AB-">AB-</option>
<option value="O-">O-</option>
</select>
<!--Submit Button -->
<input type="submit" name="" value="Submit" />
</form>
</body>
</html>html css radio-button
html css radio-button
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
edited Jan 14 at 17:41
Devarsh Bhatt
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
asked Jan 1 at 15:01
Devarsh BhattDevarsh Bhatt
4617
4617
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
Keep the name same of input radio and put required in just one place.
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender-M" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender-F" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender-O" required value="Other"> Other </label>
Try this code:
<legend>Gender</legend>
<label for="Male"><input type="radio" name="gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="gender" value="Female"> Female</label>
<label for="Other"><input type="radio" name="gender" value="Other"> Other </label>
Another solution
You can also add onClick in your submit button:
<!--Submit Button -->
<input type="submit" name="" value="Submit" onClick="ValidateForm(this.form)">
<script>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) && ( form.gender[2].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
Hope this helps!
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
I'm only using Html and CSS no JS so any answer without JS?
– Devarsh Bhatt
Jan 1 at 16:32
add a comment |
2
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"],
.box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus,
.box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" value="Female"> Female</label>
<label for="Other"><input checked type="radio" name="Gender" value="Other"> Other </label>
</fieldset>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Remove "required", set one "checked" by default. radio group is what you need. "name" attribute must be the same.
answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
Yes. The OP is currently treating radio buttons like checkboxes.
– Mr Lister
Jan 1 at 15:13
Done Both the answers are correct Thanks
– Devarsh Bhatt
Jan 1 at 16:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996483%2fcheck-only-single-radio-button-in-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Keep the name same of input radio and put required in just one place.
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender-M" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender-F" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender-O" required value="Other"> Other </label>
Try this code:
<legend>Gender</legend>
<label for="Male"><input type="radio" name="gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="gender" value="Female"> Female</label>
<label for="Other"><input type="radio" name="gender" value="Other"> Other </label>
Another solution
You can also add onClick in your submit button:
<!--Submit Button -->
<input type="submit" name="" value="Submit" onClick="ValidateForm(this.form)">
<script>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) && ( form.gender[2].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
Hope this helps!
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
I'm only using Html and CSS no JS so any answer without JS?
– Devarsh Bhatt
Jan 1 at 16:32
add a comment |
1
Keep the name same of input radio and put required in just one place.
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender-M" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender-F" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender-O" required value="Other"> Other </label>
Try this code:
<legend>Gender</legend>
<label for="Male"><input type="radio" name="gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="gender" value="Female"> Female</label>
<label for="Other"><input type="radio" name="gender" value="Other"> Other </label>
Another solution
You can also add onClick in your submit button:
<!--Submit Button -->
<input type="submit" name="" value="Submit" onClick="ValidateForm(this.form)">
<script>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) && ( form.gender[2].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
Hope this helps!
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
I'm only using Html and CSS no JS so any answer without JS?
– Devarsh Bhatt
Jan 1 at 16:32
add a comment |
1
1
1
Keep the name same of input radio and put required in just one place.
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender-M" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender-F" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender-O" required value="Other"> Other </label>
Try this code:
<legend>Gender</legend>
<label for="Male"><input type="radio" name="gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="gender" value="Female"> Female</label>
<label for="Other"><input type="radio" name="gender" value="Other"> Other </label>
Another solution
You can also add onClick in your submit button:
<!--Submit Button -->
<input type="submit" name="" value="Submit" onClick="ValidateForm(this.form)">
<script>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) && ( form.gender[2].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
Hope this helps!
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
Keep the name same of input radio and put required in just one place.
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender-M" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender-F" required value="Female"> Female</label>
<label for="Other"><input type="radio" name="Gender-O" required value="Other"> Other </label>
Try this code:
<legend>Gender</legend>
<label for="Male"><input type="radio" name="gender" required value="Male"> Male</label>
<label for="Female"><input type="radio" name="gender" value="Female"> Female</label>
<label for="Other"><input type="radio" name="gender" value="Other"> Other </label>
Another solution
You can also add onClick in your submit button:
<!--Submit Button -->
<input type="submit" name="" value="Submit" onClick="ValidateForm(this.form)">
<script>
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) && ( form.gender[2].checked == false ) )
{
alert ( "Please choose your Gender: Male or Female" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
Hope this helps!
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
edited Jan 1 at 15:20
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
answered Jan 1 at 15:07
Rajendra aroraRajendra arora
1,50211018
1,50211018
I'm only using Html and CSS no JS so any answer without JS?
– Devarsh Bhatt
Jan 1 at 16:32
add a comment |
I'm only using Html and CSS no JS so any answer without JS?
– Devarsh Bhatt
Jan 1 at 16:32
I'm only using Html and CSS no JS so any answer without JS?
– Devarsh Bhatt
Jan 1 at 16:32
I'm only using Html and CSS no JS so any answer without JS?
– Devarsh Bhatt
Jan 1 at 16:32
add a comment |
2
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"],
.box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus,
.box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" value="Female"> Female</label>
<label for="Other"><input checked type="radio" name="Gender" value="Other"> Other </label>
</fieldset>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Remove "required", set one "checked" by default. radio group is what you need. "name" attribute must be the same.
answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
Yes. The OP is currently treating radio buttons like checkboxes.
– Mr Lister
Jan 1 at 15:13
Done Both the answers are correct Thanks
– Devarsh Bhatt
Jan 1 at 16:38
add a comment |
2
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"],
.box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus,
.box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" value="Female"> Female</label>
<label for="Other"><input checked type="radio" name="Gender" value="Other"> Other </label>
</fieldset>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Remove "required", set one "checked" by default. radio group is what you need. "name" attribute must be the same.
answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
Yes. The OP is currently treating radio buttons like checkboxes.
– Mr Lister
Jan 1 at 15:13
Done Both the answers are correct Thanks
– Devarsh Bhatt
Jan 1 at 16:38
add a comment |
2
2
2
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"],
.box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus,
.box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" value="Female"> Female</label>
<label for="Other"><input checked type="radio" name="Gender" value="Other"> Other </label>
</fieldset>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Remove "required", set one "checked" by default. radio group is what you need. "name" attribute must be the same.
answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"],
.box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus,
.box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" value="Female"> Female</label>
<label for="Other"><input checked type="radio" name="Gender" value="Other"> Other </label>
</fieldset>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>Remove "required", set one "checked" by default. radio group is what you need. "name" attribute must be the same.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"],
.box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus,
.box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" value="Female"> Female</label>
<label for="Other"><input checked type="radio" name="Gender" value="Other"> Other </label>
</fieldset>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #34495e;
}
.box {
width: 300px;
padding: 40px;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -40%);
background: #191919;
text-align: center;
}
.box h1 {
color: white;
text-transform: uppercase;
font-weight: 500;
}
select>option {
background: #191919;
color: white;
}
.box textarea {
height: 75px;
}
.box label[for="Male"],
.box label[for="Male"]+input,
.box label[for="Female"],
.box label[for="Female"]+input,
.box label[for="Other"],
.box label[for="Other"]+input,
.box input[type="radio"] {
display: inline;
clear: none;
width: auto;
}
.box input[type="text"],
.box input[type="password"],
.box select,
.box input[type="tel"],
.box textarea,
.box fieldset,
.box input[type="radio"],
.box input[type="email"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #3498db;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type="text"]:focus,
.box input[type="password"]:focus,
.box select:focus,
.box input[type="tel"]:focus,
.box textarea:focus,
.box input[type="email"]:focus {
width: 280px;
border-color: #2ecc71;
}
.box input[type="submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
border: 2px solid #2ecc71;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type="submit"]:hover {
background: #2ecc71;
}
.box input[type="radio"] {
display: inline;
width: auto;
}
fieldset label {
margin-right: 5px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Example</title>
<link rel="stylesheet" href="Student-css.css">
</head>
<body>
<form class="box" method="POST" action="test.html">
<fieldset>
<legend>Gender</legend>
<label for="Male"><input type="radio" name="Gender" value="Male"> Male</label>
<label for="Female"><input type="radio" name="Gender" value="Female"> Female</label>
<label for="Other"><input checked type="radio" name="Gender" value="Other"> Other </label>
</fieldset>
<input type="submit" name="" value="Submit">
</form>
</body>
</html>answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
edited Jan 1 at 15:13
answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
answered Jan 1 at 15:11
Smollet777Smollet777
1,36011015
1,36011015
Yes. The OP is currently treating radio buttons like checkboxes.
– Mr Lister
Jan 1 at 15:13
Done Both the answers are correct Thanks
– Devarsh Bhatt
Jan 1 at 16:38
add a comment |
Yes. The OP is currently treating radio buttons like checkboxes.
– Mr Lister
Jan 1 at 15:13
Done Both the answers are correct Thanks
– Devarsh Bhatt
Jan 1 at 16:38
Yes. The OP is currently treating radio buttons like checkboxes.
– Mr Lister
Jan 1 at 15:13
Yes. The OP is currently treating radio buttons like checkboxes.
– Mr Lister
Jan 1 at 15:13
Done Both the answers are correct Thanks
– Devarsh Bhatt
Jan 1 at 16:38
Done Both the answers are correct Thanks
– Devarsh Bhatt
Jan 1 at 16:38
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53996483%2fcheck-only-single-radio-button-in-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
