Form pada HTML

-
Kali ini saya akan menjelaskan mengenai form, dan fungsinya. Form adalah sebuah tag HTML yang digunakan untuk menginput nilai dari pengguna. Format penulisannya adalah sebagai berikut:

<form> </form>
Form pada HTML


Form seperti selembar kertas kosong yang kemudian harus dituliskan alamat tujuan dan metode pengiriman. Berikut ini tulisan jika sebuah form sudah berisi alamat tujuan dan metode pengiriman.

<form action="url" method="GET/POST">
   <!-- elemen form -->
</form>

Pada properti action url diisi sesuai dengan alamat file tujuan sedangkan method dipilih GET atau POST.
Setelah selembar form disiapkan dengan baik, selanjutnya anda tinggal menambahkan elemen form. Catatan, tag form tidak memberi efek tampilan di layar sedangkan elemen form akan tampil dilayar.

Ada banyak elemen form, elemen-elemen tersebut seperti:
  1. Input Type Text
  2. Input Type Number
  3. Textarea
  4. Select
  5. Radio
  6. Checkbox
  7. Submit fungsinya memulai pengiriman form/formulir
  8. Button fungsinya sebagai objek link
Kodenya seperti berikut:
  1. <input type="text" name="nama">
  2. <input type="number" name="jumlah">
  3. <textarea col="1" row="2" name="komentar"> Tulis..</textarea>
  4. <select name="negara">
    <option value="indonesia">Indonesia</option>
    <option value="malaysia">Malaysia</option>
    <option value="Singapura">Singapura</option>
    </select>
  5. <input type="radio" name="gender" value="L"> Laki-laki
    <input type="radio" name="gender" value="P"> Perempuan
  6. <input type="checkbox" name="hobi1" value="putsal"> Putsal
    <input type="checkbox" name="hobi2" value="renang"> Renang
  7. <input type="submit" value="Simpan">
  8. <input type="button" value="Batal">
Tampilannya seperti ini:
  5. Laki-laki Perempuan
  6. Putsal Renang
Properti name sangat penting bagi form, name inilah yang akan membawa nilai yang diinputkan maka perhatikan dengan baik penulisan name yang benar.

untuk membuat dan menjalankan form anda tidak butuh server (buka langsung di web browser), tetapi untuk mengabil datanya anda butuh server, seperti contoh ini menggunakan server apache dengan bahasa pemrograman PHP.

buat sebuah file dengan nama inputnama.php kodenya sebagai berikut:

<html>
 <head>
  <title>Input Nama</tile>
 </head>
 <body>
 <form action="aksi_inputnama.php" method="POST">
  <input type="text" name="nama">
  <input type="submit" value="proses">
 </form>
 </body>
<html>

buat sebuah file untuk menerima data dengan nama aksi_inputnama.php kodenya sebagai berikut:

<?php
 echo $_POST['nama'];
?>
Terimakasi telah membaca semoga bermanfaat.

Baca Juga Tips Belajar HTML



Popular posts from this blog

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

-
Image
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
Read more

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

-
Image
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php  . Buka file
Read more

Cara Membuat Kalkulator Dengan Java Script

-
Image
Kali ini saya akan membagikan tutorial cara membuat kalkulator sederhana dengan java script. Kita ketahui java script adalah bahasa pemrograman klien. Artinya kode program dapat dilihat dari web browser. Kelebihan bahasa java script ini halaman tidak perlu reload. <!--nama file calc.php--> <!DOCTYPE html> <html> <head> <title>Calculator</title> <style type="text/css"> .tombol{ background-color: deepskyblue; } .tabel{ background-color: gold; margin: 10px; padding: 10px; } </style> </head> <body> <form name="calculator"> <table style="background-color: " class="tabel"> <caption>Calculator</caption> <tr> <td>Angka 1</td><td>:</td><td><input type="number" name="angka1"></td> </tr> <tr> <td>Angka 2</td&
Read more