Membuat Validasi Form Menggunakan HTML Dan CSS

Hallo Teman-Teman Jumpa Lagi dengan Saya di Blog DUMET School, di Tutorial kali ini Saya ingin  mengajarkan bagaimana cara membuat Validasi Form hanya menggunakan HTML dan CSS. Pada Umumnya Validasi Form kita buat menggunakan PHP tetapi kali ini kita akan mencoba membuatnya dengan bantuan CSS. Baiklah langsung saja kita masuk ke pembahasannya.

Sebelumnya jika kalian ingin melihat hasil dari Validasi Form menggunakan HTML dan CSS bisa klik di http://jsfiddle.net/by63D/

sebelumnya saya ingin memberitahukan beberapa sofware yang dapat mengaskses
1. Noteped++
2. Noteped
3. Visual Studio Code (VSC)
4. dan masih banyak lagi lainnya sofware HTML.

Pertama kalian bisa membuat tampilan Form sederhana seperti gambar di bawah ini :

Kalian dapat membuat dengan Skcrip HTML dibawah ini :


-----------------------------------<script HTML>-----------------------------------

<div id="main">
    <h3>VALIDASI FORM -<a href="" target="_blank"></a></h3>
    <form class="contact_form" action="" method="">
        <ul>
            <li>
                <label for="name">Name:</label>
                <input type="text" name="name" placeholder="User Name" required></li>

            <li>
                <label for="email" >Email</label>
                <input type="email" type="text" placeholder=" User url" required pattern="(http|https)://.+">
                <span class="from_hint">example "http://saya.com</span>
            </li>

            <li>
                <label for="message">Message</label>
                <textarea name="message" cols="30" rows="5" required></textarea>

            </li>
         
            <li>
                <button class="submit" type="submit">Submit Form</button>
            </li>
        </ul>
    </form>
</div>

------------------------------------<script CSS>---------------------------



/* Selamat Datang di Blog Mohammad Nuris */
* {margin: 0; padding: 0;}

.form_hint, .required_notification {font-size: 11px;}

body {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

#main {
width: 680px;
margin: auto;
margin-top: 100px;
}

#main h3 {
border-bottom: 1px solid #999;
color: #333;
padding-bottom: 20px;
margin-bottom: 20px;
}

#main a {
color: #333;
text-decoration: none;
}

#main a:hover {
color: #03F;
}

/* === Form Elements === */
.contact_form ul {
list-style: none;
}

.contact_form li{
padding:12px;
border-bottom:1px solid #eee;
position:relative;
}

.contact_form label {
width:150px;
margin-top: 3px;
display:inline-block;
float:left;
padding:3px;
}
.contact_form input {
height:20px;
width:220px;
padding:5px 8px;
}

.contact_form textarea {padding:8px; width:300px;}
.contact_form button {margin-left:156px;}

/* form element visual styles */
.contact_form input, .contact_form textarea {
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
padding-right:30px;
-moz-transition: padding .25s;
-webkit-transition: padding .25s;
-o-transition: padding .25s;
transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
background: #fff;
border:1px solid #F00;
box-shadow: 0 0 3px #900;
padding-right:70px;
}

/* === HTML5 validation styles === */
.contact_form input:required, .contact_form textarea:required {
background: #fff url(images/red_asterisk.png) no-repeat 98% center;
}
.contact_form input:required:valid, .contact_form textarea:required:valid {
background: #fff url(images/valid.png) no-repeat 98% center;
box-shadow: 0 0 5px #5cd053;
border-color: #28921f;
}
.contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
background: #fff url(images/invalid.png) no-repeat 98% center;
box-shadow: 0 0 5px #d45252;
border-color: #b03535
}

/* === Form hints === */
.form_hint {
background: #d45252;
border-radius: 3px 3px 3px 3px;
color: white;
margin-left:8px;
padding: 1px 6px;
z-index: 999; /* hints stay above all other elements */
position: absolute; /* allows proper formatting if hint is two lines */
display: none;
}
.form_hint::before {
content: "\25C0";
color:#d45252;
position: absolute;
top:1px;
left:-6px;
}
.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #28921f;}
.contact_form input:required:valid + .form_hint::before {color:#28921f;}

/* === Button Style === */
button.submit {
background-color: #7399B4;
border: 1px solid #7399B4;
border-bottom: 1px solid #7399B4;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
color: white;
font-weight: bold;
padding: 6px 20px;
text-align: center;
}
button.submit:hover {
opacity:.85;
cursor: pointer;
}
button.submit:active {
border: 1px solid #3B6386;
}


Setelah Kalian Buat semuanya kalian bisa save dan jalankan di browser. Mudah bukan teman-teman hanya dengan HTML dan CSS kita bisa membuat validasi form yang sederhana. Sekian dulu tutorial dari saya semoga tutorial ini bermanfaat untuk kalian semua. Terima Kasih.

Paiton, 17 Oktober 2018

Mahasiswa Fakultas Teknik  Informatika Universitas Nurul Jadid
Mohammad Nuris


https://www.facebook.com/mohammad.nuris
https://www.instagram.com/zhang_ji_rui/
https://twitter.com/Nuris_09
https://mohammadnuris.blogspot.com