Membuat Formulir Pada HTML

Anda tentunya sudah tidak asing dengan istilah “form”. Form adalah sebuah daftar isi yang merupakan salah satu penampilan interaktif yang paling popular pada World Wide Web (WWW). Form atau daftar isian ini digunakan untuk meminta informasi dari user yang kemudian akan diolah. Secara umum, pengolahan form dilakukan pada dengan menggunakan script yang bersifat server – side.

Untuk beberapa keperluan tertentu, Anda tentunya membutuhkan penggunaan form di website yang Anda miliki misalnya form untuk survei, form biodata, form pendaftaran, form login, dan yang lainnya. Form memungkinkan pengguna berinteraksi dengan teks, grafik, atau yang lainnya yang ditampilkan pada browser.

Tag Form

Tag <form> adalah tag yang digunakan untuk mendefinisikan sebuah form. Jadi, sebuah form dibentuk oleh pasangan tag <form> ….. </form>. Pada tag <form> terdapat dua atribut yaitu atribut method dan action yang mempunyai fungsi sebagai berikut:

  • Method : Digunakan untuk menentukan cara mengirimkan data yang dimasukkan user ke web server (metode pengolahan form). Dimana terdapat dua metode yaitu GET dan POST. Metode POST mengirimkan seluruh data dari form yang terpisah dari URL. Sedangkan, metode GET mengirimkan data pada server dengan meletakkannya pada bagian akhir URL.
  • Action : Digunakan untuk menentukan lokasi atau URL dari file yang akan digunakan untuk mengolah form tersebut.


Tag Input

Tag <input> adalah tag yang digunakan untuk membuat elemen – elemen yang digunakan untuk meminta informasi dari user atau membuat kontrol kotak teks misalnya checkbox, textbox, button, radio button, dan yang lainnya. Penggunaan tag ini juga tidak memerlukan tag penutup. Selanjutnya, tag <input> memiliki beberapa atribut umum sebagai berikut:

  • name : Mendefinisikan nama pada elemen input. Atribut harus Anda tulis pada semua elemen kecuali elemen tipe clear dan submit.
  • maxlength : Menentukan jumlah karakter maksimal yang dapat dimasukkan pada suatu elemen input.
  • value : Menyatakan nilai default pada suatu elemen input. Untuk textbox, menentukan teks yang tertulis. Untuk checkbox atau radio, menentukan nilai item yang dipilih yang akan dikirim ke server. Sedangkan, untuk button submit dan reset, menentukan teks yang ditulis pada button.
  • size : Menentukan lebar dari elemen input dalam pixel dimana ukuran defaultnya adalah 20 pixel.
  • checked : Hanya digunakan pada tipe checkbox dan radio untuk menyatakan suatu item dipilih atau tidak (Penjelasan mengenai atribut checked akan dibahas di tutorial berikutnya).
  • type : Menentukan tipe input yang akan digunakan seperti text, radio dan yang lainnya.


Berikut contoh kode penulisan dan penggunaan tag <input> di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Form di HTML</title>
 </head>
 <body>
  <h4>Isilah formulir dibawah ini dengan baik dan benar ! </h4>
  <hr>
   <form action ="proses_input.php" method="get">
    NIM : <input type="text" name="nim" size="11px" maxlength="9"> <br><br>
    Alamat Rumah : <input type="text" name="alamat_rumah" size="40px"> <br><br>
    Email : <input type="text" name="email"> <br><br>
    No.Telepon : <input type="text" name="nomor_telepon"> <br><br>
     <input type="submit" value="SUBMIT">
     <input type="reset" value="RESET"> 
  </form>
 </body>
</html>

Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini :


Comments

Post a Comment

Popular posts from this blog

ERP ( Enterprise Resource Planning )

Image
Konsep Dasar ERP Posted on May 20, 2016 oleh Agung Brillian ERP singkatan dari 3 elemen kata yaitu, Enterprise (perusahaan/organisasi), Resource (sumber daya), Planning (perencanaan), 3 kata ini mencerminkan sebuah konsep yang berujung kepada kata kerja, yaitu “planning” yang berarti bahwa ERP menekankan kepada aspek perecanaan. ERP adalah sebuah system informasi perusahaan yang dirancang untuk mengkoordinasikan semua sumber daya, informasi dan aktifitas yang diperlukan untuk proses bisnis lengkap. Sistem ERP  didasarkan  pada database pada umumnya dan rancangan perangkat lunak modular.ERP merupakan software yang mengintegrasikan semua departemen dan fungsi suatu perusahaan ke dalam satu system yang dapat melayani semua kebutuhan perusahaan, baik dari departemen penjualan, HRD, produksi atau keuangan. Syarat terpenting dari system ERP adalah Integrasi. Integrasi yang dimaksud adalah menggabungkan berbagai kebutuhan pada satu softwa...
Read more

Membuat CV Dengan HTML

Image
Biasanya beberapa orang membuat CV menggunakan aplikasi pengolah kata (word processor), ada juga yang membuat CV menggunakan aplikasi pengolah gambar supaya CV menjadi lebih menarik. Kali ini saya mau berbagi cara membuat CV sederhana menggunakan HTML (Hyper Text Markup Language).  Berikut langkah-langkahnya, copy skript dibawah ini:  <html>   <head>     <title>Curriculum Vitae</title> <!-- Judul pada suatu web-->   </head>   <body bgcolor="#9E9E9E" width="800px"> <!-- Membuat body memiliki warna dengan menggunakan bgcolor -->   <div align="center">     <!-- Membuat rata tengah-->     <center>     <h1>     Curiculum Vitae</h1>     <!-- Membuat huruf menjadi besar (Ukuran H1) -->     </center>     <hr />     <h2>     Personal...
Read more

Menggunakal Tabel Pada HTML

Image
Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag <table>. <table>.....</table> Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di dalam tag table) <table> <tr></tr> </table> Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td> (table data) yang digunakan di dalam tag <tr>.  1. <table> 2. <tr> 3.      <td>No</td> 4.      <td>Nama</td> 5.      <td>Alamat</td> 6. </tr> 7. </table> Atribut pada tabel: <Table> : menyaakan tag untuk tabel <width> : untuk menyatakan seberapa besar/ lebar yang akan kita buat <border> : ketebalan garis pembatas tabel <tr> : menyatakan sebagai tag kolom <td> : menyatakan sebagai tag cell <cellspacing> : Atribut cellspacing menya...
Read more