<![CDATA[
<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/MFn3DPjRtXE?si=8jlfE0S0gh-w-qa8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/MFn3DPjRtXE?si=8jlfE0S0gh-w-qa8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p>index_html tag</p><p><br><br><br><!DOCTYPE html> <br><html lang="en" > <br><head> <br>  <meta charset="UTF-8"> <br>  <title>Registration Form Validation using JavaScript|| Learning Robo</title> <br>  <link rel='stylesheet' href='<a href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'" target="_blank" class="ke-link">https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css'</a>> <br>  <link rel="stylesheet" href="./style.css"></p><p><style></style><br></head> <br><body> <br><div class="wrapper"> <br><div class="header"> <br><h2>Registration Form</h2> <br></div> <br><form id="form" class="form"> <br><div class="form-control"> <br><input type="text" placeholder="Enter name" id="name" /> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><div class="form-control"> <br><input type="email" placeholder="Enter email" id="email" /> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><div class="form-control"> <br><input type="password" placeholder="Password" id="password"/> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><div class="form-control"> <br><input type="password" placeholder="Confirm‎ Password" id="confirm‎"/> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><button>Submit</button> <br></form> <br></div> <br><div class="credit">Made with <span style="color:tomato">❤</span> by <a href="<a href="https://www.learningrobo.com/" target="_blank" class="ke-link">https://www.learningrobo.com/</a>">Learning Robo</a></div> <br>  <script  src="script.js"></script> <br></body> <br></html></p><p>index_CSS5 tag</p><p><br><br>@import‎ url('<a href="https://fonts.googleapis.com/css?family=Muli&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css?family=Muli&display=swap');</a><br>@import‎ url('<a href="https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap');" target="_blank" class="ke-link">https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap');</a><br><br>* { <br>    box-sizing: border-box; <br>} <br><br>body { <br>    margin: 0; <br>     padding-bottom: 20px; <br>     font-family: 'Nunito', sans-serif; <br>     color: white; <br>     background-image: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%); <br>} <br><br>.wrapper{ <br>    background-color: #202124; <br>    position: relative; <br>    width:30%; <br>    margin: 50px auto; <br>    padding: 20px; <br>    border-radius: 10px; <br>    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; <br>} <br><br>.header { <br>    position: relative; <br>    text-align: center; <br>} <br><br>    .header h2 { <br>       color: #fff; <br>    } <br><br>.form { <br>    margin: 0 auto; <br>    max-width: 16rem; <br>    overflow: auto; <br>} <br><br>.form-control { <br>    margin-bottom: 10px; <br>    padding-bottom: 20px; <br>    position: relative; <br>} <br>    .form-control input { <br>        border: 1px solid transparent; <br>        border-bottom-color: white; <br>        background-color: transparent; <br>        color: white; <br>        border-radius: 0; <br>        font-family: inherit; <br>        font-size: 14px; <br>        padding: 10px; <br>        width: 100%; <br>    } <br><br>        .form-control input:focus { <br>            outline: 0; <br>            border-bottom-color: #777; <br>        } <br><br>    .form-control.success input { <br>        border-bottom-color: #2ecc71; <br>    } <br><br>    .form-control.error input { <br>        border-bottom-color: #e74c3c; <br>    } <br><br>    .form-control i { <br>        visibility: hidden; <br>        position: absolute; <br>        top: 40px; <br>        right: 10px; <br>    } <br><br>    .form-control.success i.fa-check-circle { <br>        color: #2ecc71; <br>        visibility: visible; <br>    } <br><br>    .form-control.error i.fa-times-circle { <br>        color: #e74c3c; <br>        visibility: visible; <br>    } <br><br>    .form-control small { <br>        color: #e74c3c; <br>        position: absolute; <br>        bottom: 0; <br>        left: 0; <br>        visibility: hidden; <br>    } <br><br>    .form-control.error small { <br>        visibility: visible; <br>    } <br><br>.form button { <br>    background-image: linear-gradient(270deg, #08AEEA 0%, #2AF598 100%); <br>    border-radius: 15px; <br>    color: #000; <br>    font-size: 1rem; <br>    padding: 10px; <br>    margin-top: 20px; <br>    width: 100%; <br>} <br>.form-control button:focus { <br>            outline: 0; <br>            border-bottom-color: #777; <br>        } <br><br>.credit{ <br>    text-align: center; <br>    color: #000; <br>    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; <br>} <br><br>.credit a{ <br>    text-decoration: none; <br>    color:#000; <br>    font-weight: bold; <br>}   <br><br></p><p>index_JavaScript tag</p><p><br>const form = document.getElementById('form'); <br>const name = document.getElementById('name'); <br>const email = document.getElementById('email'); <br>const password = document.getElementById('password'); <br>const confirm‎ = document.getElementById('confirm‎'); <br><br>form.addEventListener('submit', e => { <br>    e.preventDefault(); <br><br>    checkInputs(); <br>}); <br><br>function checkInputs() { <br>    // trim to remove the whitespaces <br>    const nameVal‎ue = name.value.trim(); <br>    const emailValue = email.value.trim(); <br>    const passwordValue = password.value.trim(); <br>    const confirm‎Value = confir<a href="http://m.value.trim();" target="_blank" class="ke-link">http://m.value.trim();</a><br><br>    if (nameVal‎ue === '') { <br>        setErrorFor(name, 'Please enter your name'); <br>    } else { <br>        setSuccessFor(name); <br>    } <br><br>    if (emailValue === '') { <br>        setErrorFor(email, 'Please enter your email'); <br>    } else if (!isEmail(emailValue)) { <br>        setErrorFor(email, 'Email not valid'); <br>    } else { <br>        setSuccessFor(email); <br>    } <br><br>    if (passwordValue === '') { <br>        setErrorFor(password, 'Please enter password'); <br>    } else if (!isPassword(passwordValue)) { <br>        setErrorFor(password, 'atleast one number, one uppercase, lowercase letter, and atleast 8 character'); <br>    }else { <br>        setSuccessFor(password); <br>    } <br><br>    if (confirm‎Value === '') { <br>        setErrorFor(confirm‎, 'Please re-enter password'); <br>    } else if (!isConfirm‎(confirm‎Value)) { <br>        setErrorFor(confirm‎, 'Invalid password'); <br>    }else if (passwordValue !== confirm‎Value) { <br>        setErrorFor(confirm‎, 'Passwords does not match'); <br>    } else { <br>        setSuccessFor(confirm‎); <br>    } <br>} <br><br>function setErrorFor(input, message) { <br>    const formControl = input.parentElement; <br>    const small = formControl.querySelector('small'); <br>    formControl.className = 'form-control error'; <br>    small.innerText = message; <br>} <br><br>function setSuccessFor(input) { <br>    const formControl = input.parentElement; <br>    formControl.className = 'form-control success'; <br>} <br><br>function isEmail(email) { <br>    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); <br>} <br><br>function isPassword(password){   <br>    return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(password); <br>} <br><br>function isConfirm‎(confirm‎){   <br>    return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(password); <br>} <br><br></p><p>index_ Registration Form 파일</p><p><body> <br><div class="wrapper"> <br><div class="header"> <br><h2>Registration Form</h2> <br></div> <br><form id="form" class="form"> <br><div class="form-control"> <br><input type="text" placeholder="Enter name" id="name" /> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><div class="form-control"> <br><input type="email" placeholder="Enter email" id="email" /> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><div class="form-control"> <br><input type="password" placeholder="Password" id="password"/> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><div class="form-control"> <br><input type="password" placeholder="Confirm‎ Password" id="confirm‎"/> <br><i class="fas fa-check-circle"></i> <br><i class="fas fa-times-circle"></i> <br><small>Error message</small> <br></div> <br><button>Submit</button> <br></form></p><p> </p><p>HTML tag</p>
<!-- -->
]]>
첫댓글 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
https://www.learningrobo.com/2021/09/registration-form-validation-using-html.html
이미지 https://www.google.com/search?q=Sign+Up+Form+With+JS+Validation+%7C+HTML+CSS+JS&sca_esv=593269269&rlz=1C1NDCM_koKR825KR825&tbm=isch&sxsrf=AM9HkKm7ENMGTIQbZrDU-ug1BUqbjfWJRA:1703339569482&source=lnms&sa=X&ved=2ahUKEwjD2eGv2qWDAxVosFYBHY2kBtsQ_AUoAXoECAMQAw&biw=1366&bih=641&dpr=1