Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul 3

    Diunggah oleh

    Dyaz SFA
    18 tayangan5 halaman
    Dokumen ini membahas validasi input menggunakan HTML5. Terdapat contoh form validasi untuk nama, usia, email, situs web, dan kata sandi. Setiap input memiliki aturan tersendiri seperti pola huruf untuk nama, rentang angka untuk usia, format email, dan panjang minimal 8 karakter untuk kata sandi. HTML5 memungkinkan pembuatan form interaktif dengan validasi otomatis sesuai tipe data.

    Deskripsi Asli:

    modul 3

    Judul Asli

    MODUL 3

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen ini membahas validasi input menggunakan HTML5. Terdapat contoh form validasi untuk nama, usia, email, situs web, dan kata sandi. Setiap input memiliki aturan tersendiri seperti pola huruf untuk nama, rentang angka untuk usia, format email, dan panjang minimal 8 karakter untuk kata sandi. HTML5 memungkinkan pembuatan form interaktif dengan validasi otomatis sesuai tipe data.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    18 tayangan5 halaman

    Modul 3

    Diunggah oleh

    Dyaz SFA
    Dokumen ini membahas validasi input menggunakan HTML5. Terdapat contoh form validasi untuk nama, usia, email, situs web, dan kata sandi. Setiap input memiliki aturan tersendiri seperti pola huruf untuk nama, rentang angka untuk usia, format email, dan panjang minimal 8 karakter untuk kata sandi. HTML5 memungkinkan pembuatan form interaktif dengan validasi otomatis sesuai tipe data.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    MODUL III

    Validasi HTML5
    LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

    Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Berbasis Web yang


    Dibimbing oleh Kartika Candra Kirana, S.Pd., M.Kom.

    Oleh:
    Adityaz Shofyan Fajri Al Hafiizh
    (170535629567)
    S1 Teknik Informatika ’17 Off A

    UNIVERSITAS NEGERI MALANG


    FAKULTAS TEKNIK
    JURUSAN TEKNIK ELEKTRO
    SEPTEMBER 2018
    Validasi HTML5

    A. KOMPETENSI DASAR
    • Memahami konsep dasar active web page,
    • Mampu menghasilkan halaman web yang interaktif,
    • Mampu memanfaatkan validasi data menggunakan HTML5

    B. STUDI KASUS
    Syntaks StudiKasus1.html:
    <h4>Nama : Adityaz Shofyan F.</h4>
    <h4>NIM : 170535629567</h4>
    <h4>S1 TEKNIK INFORMATIKA A</h4>

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

    <head>
    <title>Rumah3</title>
    </head>

    <body>
    </br>

    <h2>Studi Kasus : Validasi Input HTML5 </h2>


    <form action="" method="post">
    <table border=0>
    <tr>
    <td>Nama</td>
    <td>: <input type="text" name="name" pattern ="[a-zA-Z/s]+" size =
    30 placeholder="Isikan Nama Anda" required /></td>
    </tr>

    <tr>
    <td>Usia</td>
    <td>: <input type="number" name="age" placeholder="" min=17
    max=30 required />(Usia min 17-30)</td>
    </tr>

    <tr>
    <td>Email</td>
    <td>: <input type="Email" name="email" size = 30
    placeholder="nama_email@host.com" required /></td>
    </tr>
    <tr>
    <td>Web</td>
    <td>: <input type="URL" name="web" size = 40 placeholder="http://"
    required /></td>
    </tr>
    <tr>
    <td>Password</td>
    <td>: <input type="Password" name="password" pattern = ".{8,}" size
    = 23 placeholder="Semua karakter, min 8" required
    /><strong><i>(Bonus)</strong></i></td>
    </tr>
    <tr>
    <td></td>
    <td>
    &nbsp&nbsp<input type="submit" value="Submit" />
    </td>
    </tr>

    </table>

    </form>

    </body>

    </html>
    Output :

    Penjelasan:
    Form diatas adalah form dengan pengaturan agar data yang diisikan valid, pada data
    nama hanya boleh menggunakan sebuah huruf saja dan tidak ada nomer maupun
    symbol, kita menggunakan pattern ="[a-zA-Z/s]+". Jadi dengan syntax ini, kita bisa
    menggunakan hanya huruf dan spasi untuk nama kita.

    Lalu, data kedua yaitu Usia. Untuk usia menggunakan type number, dengan minimal
    17 dan maximal 30. Jadi kita hanya bisa menginput umur diantara 17 tahun dan 30
    tahun.

    Selanjutnya, pada data Email. Kita menggunakan type email untuk data tersebut,
    jadi kita hanya bisa menginput hanya dengan standard email yang benar, email yang
    benar adalah email yang mengandung atau megarahkepada host dan domain ynag benar.
    Untuk data web, menggunakan type web dengan placeholder http:// agar user tahu
    bahwa inoput harus berbentuk web.seperti http://Domain.com/
    Terkahir adalah data password. Data password ini kita menggunakan type password,
    dengan pattern = ".{8,}", jadi kita mempunyai minimal password 8 kata. Kita juga
    menggunakan placeholder agar user tahu bahwa minimal password adalah 8 kata. lalu
    untuk bonus kita tinggal mengira ukuran setiap baris. Jadi setelah menulis kata bonus,
    kita menyesuaikan ukuranya dengan ukuran atau panjang baris nama dan email.

    C. KESIMPULAN
    Jadi, didalam tabel ini kita bisa menggunakanya untuk metode input atau validasi, dan
    didalamnya ada banyak bentuk input, dan bermacam – macam tipe. Seperti jika kita
    memilih type password, maka bentuk yang akan dimasukkan adalah bentuk password,
    jika memilih type email, maka bentuknya harus email. Dan juga kita bisa mengatur
    panjang kotak isian yang akan kita gunakan juga. Jadi di HTML5, diweb ini user lebih
    berinteraksi dengan user. Jadi beda dengan versi lainnya.

    D. DAFTAR PUSTAKA
    Modul 3

    Anda mungkin juga menyukai