HTML5 form validation

codeispoetry · September 5, 2019, 11:43am

Learning my way to simple JS form validation

Hi there codeispoetry,

here is an example, which I knocked up quickly…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }
form {
    display: inline-block;
    padding: 2em;
    border: 1px solid #999;
    border-radius: 0.5em;
    background-color: #fff;
 }
fieldset {
    padding: 1em;
    margin-bottom: 1em;
    border: 1px dotted #ccc;
    border-radius: 0.5em;
}
label {
    display: inline-block;
    width: 5em;
    margin-bottom: 1em;
 }
</style>

</head>
<body> 
 <form action="#">
  <fieldset>
   <label for="fn">first name:</label>
   <input id="fn" type="text" name="firstname" required><br>
   <label for="sn">surname:</label>
   <input id="sn" type="text" name="surname" required><br>
   <label for="em">email: </label>
   <input id="em" type="email" name="em" required>
  </fieldset>
   <input type="submit">
 </form>

</body>
</html>

I believe HTML5 validation will be customizable also may be if wewant to use an image/Emoji→