<!DOCTYPE html>
<html>
<head>
    <title>getElementsByName Example</title>
</head>
<body>
<div class = 'form'>
  <form>
      <input type="text" name="username" placeholder="Enter your username">
      <input type="password" name="password" placeholder="Enter your password">
      <div>
          <input type="radio" name="gender" value="male"> Male
          <input type="radio" name="gender" value="female"> Female
      </div>
  </form>
  <button class="submit-button" onclick="submitForm()">Submit</button>
  </div>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  padding: 20px;
}
.form{
  display : flex;
  align-items: center;
  gap : 2rem;
  justify-content: center;
  flex-direction : column
}

form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 300px;
    margin: 0 auto;
}

 input[type="text"],
 input[type="password"],
 input[type="radio"] {
     width: 100%;
     padding: 10px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
 }
input[type="radio"] {
     width: auto;
     margin-right: 10px;
}
 button {          
   display : block;
   width: 20%;
   padding: 10px;
   background-color: #4CAF50;          
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 16px;
}

button:hover {
    background-color: #45a049;
}
function submitForm() {
    var username = document.getElementsByName('username')[0].value;
    var password = document.getElementsByName('password')[0].value;
    var gender = document.querySelector('input[name="gender"]:checked');
    
    if (username && password && gender) {
        var genderValue = gender.value;
        alert('Username: ' + username + '\nPassword: ' + password + '\nGender: ' + genderValue);
    } else {
        alert('Please fill out all fields.');
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.