Contoh Menggunakan Elemen Text Field

Elemen Text field (sering disebut juga text box) merupakan elemen kontrol yang paling banyak dijumpai dalam suatu form, seperti pada pengisian keyword untuk pencarian, pengisian nama, alamat email, dan sebagainya. Text field hanya dapat menampung satu baris teks, jika kita yang kita inginkan berjumlah lebih dari satu baris, maka kita perlu menggunakan element text area
  • Buka aplikasi text editor, notepad, atau adobe dreamweaver yang sering digunakan untuk teks editornya
  • Tuliskan kode berikut
<html>
<head>
<title>Elemen Text Field</title>
</head>
<body>
<h2>Menggunakan elemen TEXT FIELD</h2>
<form action="textfield.php" method="post">
<table border="0">
<tr>
    <td>Nama</td>
    <td><input type="text" name="nama" size="20"
    maxlength="25"/></td>
</tr>
<tr>
    <td>Email</td>
    <td><input type="text" name="email" size="25"
    maxlength="35" /></td>
</tr>
<tr>
    <td></td>
    <td><input type="submit" name="submit"
    value="Kirim" /></td>
</tr>
</table>
</form>
</body>
</html>

  • Simpan file dengan nama textfield.html. simpan di C:/xampp/htdocs/
  • Buatlah file baru, dan tuliskan kode berikut  
<?php
if (isset($_POST["submit"])){
$nama = $_POST["nama"];
$email = $_POST["email"];
if (isset($nama) && isset($email)) {
    echo "<h3>Data yang dimasukan: </h3>";
    echo "Nama : $nama<br/>";
    echo "Email : $email";
    }
}



  • Simpan file dengan nama textfield.php. simpan di C:/xampp/htdocs/
  • Jalankan browser dan masukan http://localhost/textfiled.html
  • Ketika di inputkan data seperti dibawah









  •  Makan akan tampil seperti ini









Keterangan :
Dalam file textfield.html, mula-mula kita memeriksa apakah tombol SUMBIT telah diklik atau belum. Kode yang di gunakan 


if (isset($_POST["submit"])){

. . .
}


Jika ya, maka nilai-nilai yang terdapat pada elemen text field akan ditangkap dan ditampung kedalam variable $nama dan $email. Kode yang di gunakan untuk keperluan ini adalah :



$nama = $_POST["nama"];
$email = $_POST["email"];





kita menggunakan $_POST karena metode yang digunakan untuk pengiriman data ke server adalah POST

Demikian tutorial ini, semoga bermanfaat













Tidak ada komentar:

Posting Komentar