<form>
  <div>
    <label>
      <span>Name</span>
      <input type="text" name="name" placeholder="your name" required />
      <div></div>
    </label>
  </div>
  <div>
    <label>
      <span>Years of Experience</span>
      <input type="number" name="experience" min="0" max="100" />
      <div></div>
    </label>
  </div>
  <div>
    <span>Fields</span>
    <label>
      <input type="checkbox" name="fields" value="fe" checked />
      Front-End Developer
      <div></div>
    </label>
    <label>
      <input type="checkbox" name="fields" value="be" />
      Back-End Developer
      <div></div>
    </label>
  </div>
  <div>
    <span>Proficiency</span>
    <label>
      <input
        type="radio"
        name="proficiency"
        value="Beginner"
        checked
      />Beginner
      <div></div>
    </label>
    <label>
      <input
         type="radio"
         name="proficiency"
         value="Intermediate"
      />Intermediate
      <div></div>
    </label>
    <label>
      <input type="radio" name="proficiency" value="Advanced" />Advanced
      <div></div>
    </label>
  </div>
  <div>
    <label>
      <span>Referred by</span>
      <input type="text" value="oahehc@gamil.com" readonly />
      <div></div>
    </label>
  </div>
  <button type="submit" aria-label="submit"></button>
</form>
/* some basic style -- start */
form {
  font-family: -apple-system, "Segoe UI", "Roboto", sans-serif;
}
form > div {
  margin-bottom: 20px;
}
label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
input {
  border: 1px solid lightgray;
  border-radius: 3px;
  height: 30px;
  line-height: 30px;
  font-size: 1rem;
  padding: 0 5px;
  min-width: 60px;
}
button {
  border: 1px solid lightgray;
  border-radius: 3px;
  height: 40px;
  line-height: 40px;
  width: 280px;
  text-align: center;
  font-size: 1rem;
  background: coral;
  color: white;
}
form span {
  font-size: 1.6rem;
  margin-right: 10px;
}
span ~ label {
  margin-left: 10px;
}
/* some basic style -- end */


input + div::before {
  color: red;
  margin-left: 5px;
  display: none;
}
input:required + div::before {
  content: "(required)";
}
input:placeholder-shown + div::before {
  display: block;
}
input:read-only {
  background: lightgray;
}
input:read-only + div::before {
  content: "(read-only)";
  display: block;
}
input:out-of-range + div::before {
  content: "(out-of-range)";
  display: block;
}
input:default + div::before {
  content: "(default)";
  display: block;
}

button:before {
  content: "Ready to Submit";
}
form:invalid > button {
  background: darkgray;
}
form:invalid > button:before {
  content: "Not Ready";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.