Belajar HTML5 - Cara Membuat Form Input Data

Tutorial Hari Ini

Pengantar Cara Membuat Form
Memahami Elemen Pada Form
Mempercantik Tampilan Form
Pembahasan Materi Selanjutnya
Penutup

Pengantar Cara Membuat Formulir

Setiap website tentunya akan dilengkapi dengan input data, tutorial hari ini tentang Cara Membuat Formulir/Form Input Data dengan HTML5. Halo sahabat semua, apa khabar? Tutorial hari ini merupakan kelanjutan dari tutorial sebelumnya. Salah satu fungsi formulir adalah untuk pendataan, apakah data dari pengunjung atau data dari website tersebut, atau yang lainnya, misalkan untuk Form Login ke website sebagai pengelola data atau untuk pendataan user dsb. Pada suatu website form wajib ada minimal untuk pendataan kontak dan pengunjung serta pendaftaran user. Berikut adalah TAG-TAG untuk mendifinisikan atau membuat sebuah formulir.

Baca juga: HTML Element Reference

Daftar TAG Untuk Formulir

TAG Form

Fungsi atau Kegunaan

TAG ini, berfungsi untuk mendeklarasikan/membuat sebuah form HTML untuk input pengguna.

TAG ini, berfungsi untuk membuat kontrol input.

TAG ini, berfungsi untuk membuat kontrol input multibaris (text area).

TAG ini, berfungsi untuk membuat sebuah tombol navigasi.

TAG ini, berfungsi untuk membuat sebuah daftar drop-down.

TAG ini, berfungsi untuk membuat sebuah pilihan yang dalam daftar drop-down.

TAG ini, berfungsi untuk membuat pilihan dalam daftar drop-down.

TAG ini, berfungsi untuk membuat sebuah label untuk sebuah elemen <input>.

TAG ini, berfungsi untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>

TAG ini, berfungsi untuk menentukan daftar pilihan yang telah ditetapkan untuk kontrol input.

TAG ini, berfungsi untuk merepresentasikan daftar pilihan(opsi) yang diberikan pada sebuah input control dengan daftar pilihan yang sebelumnya sudah terdefinisi (predefined options).

TAG ini, berfungsi untuk membuat key-pair generator kolom input.

TAG ini, berfungsi untuk menerima hasil penghitungan.

Memahami Elemen Pada Formulir

Untuk membuat sebuah Formulir atau Form menggunakan beberapa elemen, tergantung dari keperluan. Salah satu elemen pada HTML yang paling banyak digunakan pada Form adalah <input>. Berikut ini merupakan elemen-elemen yang diperlukan untuk input pada sebuah Form, Elemen <input> dapat ditampilkan dengan banyak cara, tergantung pada atribut type yang digunakan, sebagai contoh:

<input type="text"> Menampilkan bidang input teks satu baris.

<input type="radio"> Menampilkan tombol pilihan (untuk memilih

salah satu dari banyak pilihan).

<input type="checkbox"> Menampilkan kotak centang (untuk tidak

memilih atau memilih lebih dari satu).

<input type="submit"> Menampilkan tombol untuk mengirim

(untuk mengirimkan isi dari formulir).

<input type="button"> Menampilkan tombol navigasi & dapat diklik.

Latihan-1: Membuat Form Standar untuk input data pada suatu Formulir dan menggunakan elemen standar <input> yang paling banyak digunakan scriptnya, sbb:

<!-- Nama File: latihan.html ->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Latihan Kesatu</title>

</head>

<body>

<form>

<label for="ndepan">Nama Depan:</label><br>

<label for="nbelakang">Nama Belakang:</label><br>

<label for="alamat">Alamat Sekarang:</label><br>

</form>

</body>

</html>

Hasil:

Penjelasan:

»TAG<form></form>, berfungsi untuk mendefinisikan/menciptakan sebuah form

»TAG<label></label>, berfungsi untuk memberikan keterangan pada sebuah text yang akan ditampilkan, dengan atribut for=”name”, dimana nilai name=dapat diganti dengan kebutuhan yang terkait dengan labelnya.

»TAG<input>, adalah sebuah elemen untuk mengontrol yang dimasukkan dimana memiliki atribut type(untuk tipe data), id dan name(untuk penamaan)

Baca juga: HTML Forms

Latihan-2: Membuat Form Standar untuk input data dengan menggunakan elemen standar <input> dan untuk atribut type="radio", size(untuk memberikan panjang field), placeholder (untuk memberikan keterangan text yang diinput) juga yang banyak digunakan pada sebuah Form input data scriptnya, sbb:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Latihan Kedua</title>
</head>
<body>
<h3><b>:: Data Mahasiswa Baru ::</b></h3>
<form>
<label for="nama">Nama Lengkap:</label><br>
<input type="text" id="nama" name="nama" size ="30"

    placeholder="isi nama lengkap"/><br>
   <label for="kelamin">Jenis Kelamin:</label><br>
   <input type="text" id="kelamin" name="kelamin" size ="30"

     placeholder="isi jenis kelamin"/><br>
   <label for="tlahir">Tanggal Lahir:</label><br>
   <input type="date" id ="tlahir" name ="tlahir" size ="30"

     placeholder="-pilih tanggal-"/><br>
   <label for="alamat">Alamat Sekarang:</label><br>
   <input type="text" id="alamat" name="alamat" size ="30"

     placeholder="isi alamat sekarang"/><br>
   <label for="kota">Kota:</label><br>
   <input type="text" id ="kota" name ="kota" size ="30"

list="datakota" placeholder="-pilih salah satu-"/>
<datalist id="datakota">
<option value="Bandung">
<option value="Bogor">
<option value="Cimahi">
<option value="Cirebon">
<option value="Cicalengka">
</datalist>
</form>
</body>
</html>

Penjelasan:

»Pada TAG <input>, sudah diberikan tambahan pada atribut size ="30" dan placeholder="isi nama lengkap" sebagai kontrol untuk mempermudah user menginput data, selain itu pada atribut type(sudah ada yang menggunakan tipe "date" dan tipe "radio").

Hasil:

Mempercantik Tampilan Pada Form

Untuk mempercantik tampilan Formulir atau Form sebelum menambahkan CSS (Cascading Style Sheets) dapat menggunakan tambahan TAG <legend>, TAG <table> atau yang lainnya.

Latihan-3: Membuat Formulir untuk input data dengan menambahkan selain elemen standar <input> dan untuk atribut type="radio" dan size, dapat menggunakan TAG <legend>, TAG <fieldset>, dan TAG <datalist> untuk type="radio" dan untuk form sudang menggunakan <form method=" " dan action=" ". Scriptnya, sbb:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Latihan Ketiga</title>

</head>

<body>

<h3><b>Input | Update Data Mahasiswa Baru</b></h3>

<legend>| Data Mahasiswa |</legend>

<label for="nama">Nama Depan:</label><br>

<label for="jk">Jenis Kelamin:</label><br>

<label for="tlahir">Tanggal Lahir:</label><br>

<label for="alamat">Alamat Sekarang:</label><br>

</datalist>

</fieldset>

<p>

</p>

</form>

</body>

</html>

Hasil:

Latihan-4: Membuat Formulir untuk input data dengan menambahkan TAG <table>, pada elemen standar <input> dan masih menggunakan atribut type="radio" dan size, dapat juga menggunakan TAG <legend>, TAG <fieldset>, dan TAG <datalist> juga untuk form ini menggunakan type="file" yang berfungsi untuk membuka sebuah file gambar. Scriptnya, sbb:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Latihan Keempat</title>
</head>
<body>
<h2><b>Input-Update Data Mahasiswa</b></h2>
<form method ="post" action="">
<fieldset>
<legend>| Data Mahasiswa |</legend>
<table>
   <tr>
    <td>Nama Lengkap </td>
    <td>: <input type="text" name="nama" size ="40" placeholder=

   "isi nama lengkap" required></td>
   </tr>
   <tr>
       <td>Alamat Sekarang</td>
       <td>: <input type="text" name="alamat" size ="40"

         placeholder="isi alamat lengkap" required></td>
   </tr>
   <tr>
       <td>Tanggal Lahir</td>
       <td>: <input type="date" name="tgllahir" size ="40"

        placeholder="isi tanggal" required></td>
   </tr>
   <tr>
       <td>Jenis Kelamin </td>
       <td>: <input type="radio" name="jk" value="Pria"

required>Pria
<input type="radio" name="jk" value="wanita"

         required>Wanita</td>
   </tr>
   <tr>
       <td>Agama </td>
       <td>: <select name="agama">
           <option>Islam</option>
           <option>Kristen</option>
           <option>Hindu</option>
           <option>Budha</option>
       </select>
       </td>
   </tr>
   <tr>
       <td>Asal Sekolah</td>
       <td>: <input type="text" name="asalsekolah" size ="40"

         placeholder="isi asal sekolah"></td>
   </tr>
   <tr>
       <td>Email Anda</td>
       <td>: <input type="email" name="email" size ="40"

         placeholder="email@apasaja" required> </td>
   </tr>
   <tr>
       <td>Photo Diri </td>
       <td>: <input type="file" name="foto" required> </td>
   </tr>
   <tr>
       <td><input type="submit" name="kirim" value="Kirim"></td>

   </tr>
   </table>
  </fieldset>
</form>
</body>
</html>

Hasil:

Catatan: untuk membuka atau menjalankan dari latihan3 sebaiknya di browser, karena kalau menggunakan editor PSPad ada beberapa yang ngak mau tampil seperti, type="radio", type="date", dll.

Materi Selanjutnya

Penutup

Sekian pembahasan tutorial hari ini "Cara Membuat Form Input Data" untuk melengkapi dari pembahasan sebelumnya pembuatan aplikasi web sederhana yang menggunakan TAG-TAG HTML5. Selanjutnya akan dibahas tentang penggunaan CSS. Sekian dan terima kasih sudah mengikuti terus tutorial diblog ini, semoga bermanfaat. Salam.

I Ketut Darmayuda I Ketut Darmayuda

geriatama

Belajar HTML5 - Cara Membuat Form Input Data

Posting Komentar untuk "Belajar HTML5 - Cara Membuat Form Input Data"

Menu Halaman Statis