Home > HTML5 > Lesson 1 HTML5

Lesson 1 HTML5

Wah udah lama mau nulis artikel tentang html5, mungkin ni saatnya karena nanggur dikit hehe, Sebenarnya Html5 itu sudah sangat support seperti animasi dan lain-lain sehingga bisa disebut flash next generation baiklah kita mulai saja ngodingnya

tes aja

<!DOCTYPE html>
<html>
<head>
<title>tes aja</title>

</head>
<body>
<h2>Tes HTML5</h2>
<form>

<label>User name:</label>
<input type=”text” id=”username” name=”username” placeholder=”Isi username Anda” pattern=”[A-Za-z0-9_]{3,3}” required autofocus/>

<label>Email address:</label>
<input type=”email” id=”email” name=”email” placeholder=”Isi Email Anda” required/>

<label>Repeat email address:</label>
<input type=”email” id=”email_repeat” name=”email_repeat” placeholder=”Ulangi Email” required
oninput=”check_udah_sama_belum(this)”/>

<label>Site</label>
<input type=”url” id=”ite” name=”site” placeholder=”site Anda” required/>
<br/><br/>
<input type=”submit” value=”Submit data” />
<br/> atau <br/>
<input type=”submit” value=”Submit data tanpa validasi” formnovalidate/>
</form>

<script>
function check_udah_sama_belum(input) {
if (input.value != document.querySelector(‘#email’).value) {
input.setCustomValidity(‘Wah, email addres harus sama gan’);
} else {
// input is valid — reset the error message
input.setCustomValidity(”);
}
}
</script>
</body>
</html>

outputnya akan seperti ni

Nah mari kita bahas aja yuk codingannya

pertama kalau di HTML5 sih ada perbedaan tata cara penulisannya contoh

<!DOCTYPE HTML>

<html>

<body>

……..

</body>

</html>

lalu pada codingan

< input type=”text” id=”username” name=”username” placeholder=”Isi username Anda” pattern=”[A-Za-z0-9_]{3,3}” required autofocus/>

biasa kalau di html kyak fb gtu sebelum diketik status ada kata2 what’s on your mind? itu menggunakan script placeholder kemudian pattern ini seperti kondisi maksud dari A-Za-z0-9_ berarti huruf A-Z, a-z, 0-9 dan _ diijinkan untuk digunakan, lali {3,3} ini mempunyai arti 3 pada bilangan pertama minimum karakter yang diisi dan bilangan kedua itu maksimum bilangan yang bisa dimasukkan, berarti pada kali ini minimum dan maksimumnya 3, lebih dari itu akan ditolak, kemudia ada scrip required autofocus berarti pada saat browser di refresh atau diakses untuk maka pointer ketik akan menuju kolom itu secara otomatis

kemudian

<input type=”email” id=”email_addr_repeat” name=”email_addr_repeat” placeholder=”Ulangi Email” required

oninput=”check_udah_sama_belum(this)”/>

ada kata oninput = “check_udah_sama_belum(this)” ini akan berhubungan dengan javascript sedikit

udah kepalang basah lebih sekalian saja lihat ini

<script>

function check_udah_sama_belum(input) {

if (input.value != document.querySelector(‘#email’).value) {

input.setCustomValidity(‘Wah, email addres harus sama gan’);

} else {

// input is valid — reset the error message

input.setCustomValidity(”);

}

}

</script>

nah hehe triknya gampang saja kok sama seperti javascript biasa polanya javascript ini diinisialisasi oleh heck_udah_sama_belum sehingga isinya bisa kita atur-atur dikit, biasa tuk validasi kita selalu menggunakan perintah ini input.setCustomValidity kenapa input? karena method yg dilakukan input kecuali click inget ya hehee easy kan? see u until next tutorial

Categories: HTML5
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: