Validasi Formulir (Form) di HTML5 untuk pemrograman PHP

Validasi Formulir HTML

Validasi Formulir (Form) itu sangat - sangatlah penting. tanpa valiasi didalam formulir (form) website akan sering diisengin orang dengan inputan yang asal-asalan, user (pengguna) akan sembarangan input kewebsite kita sehingga dapat menyebabkan error kedalam website kita. yang lebih parahnya adalah website kita bisa terhack oleh orang lain jika tidak menerapkan validasi terserbut.

Dahulu validasi Formulir dilakukan menggunakan javascript namun semakin berkembangnya zaman validasi bisa dilakukan melalui HTMLnya secara langsung. Didalam HTML5 validasi formulir( form) sangat mudah diterapkan. validasi-validasi yang bisa dilakukan dengan html langsung diantaranya adalah:

1. Validasi type inputan pada formulir(form). untuk validasi type inputan secara lengkap artikelnya dapat di lihat disini "Type Form didalam HTML"
2. Batas inputan (minimal & maksimal) .
3. Validasi formulir data tidak boleh kosong.
4. Validasi formulir data tidak boleh diisi.
5. Validasi Jenis file pada formulir.
6. Validasi menggunakan pola pettern dalam formulir

Sekarang mari kita bahas satu per satu materinya secara menyeluruh.

Contoh Dan Penjelasan Validasi Formulir HTML

1. Validasi Formulir Batas inputan (Minimal & Maksimal)

Validasi formulir batas inputan (minimal & maksimal) didalam html biasanya digunakan untuk inputan bertype Number atau nomor. misalnya untuk inputan tinggi badan, mereka menginputkan -26 atau 9999. tentunya inputan tersebut sangat tidak masuk akal masa tinggi badannya minus atau bisa mencapai 9999. oleh karena itu kita harus memberikan batas minimal dan maksimalnya. 

Untuk validasi Formulir dengan type Number Caranya adalah dengan menggunakan atribut Min dan Max

Contohnya adalah sebagai berikut:

 

     

    <form action="">

        <input type="number" name="tinggi" min="50" max="300"/>

        <input type="submit" value="input" />

    </form>

Keterangan:

Dari kode Html Diatas kita akan membatasi nilai minimumnya adalah 50 dan maksimalnya adalah 300

Bagaimana jika inputannya typenya adalah teks, untuk type teks caranya adalah dengan menambahkan atribut minlength dan maxlength

contohnya adalah sebagai berikut.

     

     <form action="">

        <label for="name">Name (4 to 8 characters):</label><br>

        <input type="text" id="name" name="name" required minlength="4" maxlength="8">

    </form>

Keterangan:

Dari contoh diatas kita membatasi minimal karakter yang diinputkan 4 karakter dan maksimalnya adalah 8 karakter.

2. Validasi Inputan Data tidak Boleh kosong

terkadang beberapa field didalam formulir html diwajibkan harus diisi terlebih dahulu sebelum dikirim ke server . untuk memaksa user harus mengisi data keinputan agar tidak kosong maka dihtml5 biasanya menggunakan perintah required. Cara penggunaannya adalah sebagai berikut.

     

    <form action="">

        <input type="text" name="name" required/>

        <input type="email" name="email" required />

        <input type="submit" value="daftar" />

    </form>

       

Keterangan

perintah required digunakan untuk memkasa bahwa inputan tersebut harus diisi. kalau tidak akan menampilkan popup error.

3.validari formulir data tidak boleh diisi.

validasi ini biasanya digunakan ketika akan edit data. saat edit data biasanya ada beberapa data yang tidak boleh diisi oleh user. misalnya ketika kita ingin user tidak mengedit username maka kita cukup menambahkan atribut disable didalam htmlnya, sehingga user dipaksa tidak bisa merubah data tersebut.

untuk memaksa user tidak merubah data yang tidak boleh diisi menggunakan perintah disable pada atribut Htmlnya.

Contohnya adalah sebagai berikut:

     

    <form action="">

        <input type="text" name="username" value="darsonoaja" disabled/>

    </form>

Keterangan

fungsi dari atribut disable adalah memaksa user agar tidak bisa input ke formulir.

hasil dari kode diatas adalah sebagai berikut :

4. Validasi jenis File pada Formulir Form Html5

validasi jenis ini sangat penting terutama pada saat upload sebuah dokumen. misalkan saja jika kita ingin mengupload file dalam bentuk document, tapi karena dalam pembuatan web kita tidak divalidasi maka bisa saja orang yang berniat jahat mengirimkan file script jahat ke inputannya. akibatnya web kita bisa diambil alih oleh mereka atau bisa jadi websitenya menjadi error.

untuk melakukan validasi jenis dokumen kita cukup menambahkan attribut accept pada input type file.

Contohnya adalah sebagai berikut:

     

    <form action="">

        <input type="file" accept="application/*" name="file"><br>

        <input type="submit" value="upload" />

    </form>

Keterangan

pada contoh diatas pada attribut accept kita menggunakan mime type application/* artinya adalah kita akan mengambil semua jenis file yang berbentuk dokumen seperti pdf, doc excel dan lain sebagainya yang ada didalam komputer kita.

untuk keseluruhan kode mime dapat dilihat disini

bagaimana dengan jenis file berupa image?

untuk validasi formulir inputan berupa image , pada atribut accept ganti dengan mime berupa image/*. 

contohnya adalah sebagai berikut

     

    <form action="">

        <input type="file" accept="image/*" name="file"><br>

        <input type="submit" value="upload" />

    </form>

Keterangan

pada contoh diatas pada attribut accept kita menggunakan mime type image/* artinya adalah kita akan mengambil semua jenis file yang berbentuk gambar seperti png, jpg, gif dan lain sebagainya yang ada didalam komputer kita.