The required attribute

Tutorials of (The required attribute) by Tom

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>The required attribute</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation -->

<form>
  <label for="choose">Are you a fan of the Badgers or the Gophers?</label>
  <input id="choose" name="i_like" pattern="Badgers|Gophers|Tommies" required>
  <button>Submit</button>
</form>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}

input:valid
"Tommies" {
	border: 1px solid purple;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( The required attribute ) is write by Tom, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Tom