Contoh Menggunakan Elemen Text Area

Elemen text area memiliki fungsi yang sama seperti text field, yaitu untuk memasukan data teks. Perbedaannya, text area mampu menampung teks yang jumlahnya lebih dari satu baris. Elemen text area biasa digunakan sebagai kontrol untuk data keterangan, alamat, isi pesan e-mail, dan sebagainya. Berbeda dengan elemen  kontrol lain, text area tidak dibuat menggunakan tag <input>, melainkan tag <textarea> dan </textarea>.

  • Buka aplikasi text editor, notepad, atau adobe dreamweaver yang sering digunakan untuk teks editornya
  • Tuliskan kode berikut
<html>
<head>
<title>Elemen Text Area</title>
</head>
<body>
<h2>Menggunkan Elemen TEXT AREA</h2>
<form action="textarea.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>Website</td>
        <td><input type="text" name="website" size="40"
        maxlength="50" /></td>
      </tr>
    <tr>
        <td>Komentar</td>
        <td><textarea name="komentar"
        cols="40" rows="5"></textarea></td>
      </tr>
    <tr>
        <td></td>
        <td><input type="submit" name="submit"
        value="kirim" /></td>
  </tr>
</table>
</form>
</body>
</html>



  • Simpan file dengan nama textarea.html
  • buatlah file baru, dan tulisken kode berikut :
<?php
if (isset($_POST["submit"])){
    $nama = $_POST["nama"];
    $email = $_POST["email"];
    $website = $_POST["website"];
    $komentar = $_POST["komentar"];
    echo "<h3>Data yang dimasukan :</h3>";
    echo "<strong>Nama : </strong> $nama<br>";
    echo "<strong>Email : </strong> $email<br>";
    echo "<strong>Website : </strong> $website<br>";
    echo "<strong>Komentar : </strong> $komentar<br>";
}
?>

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



  • Dan hasilnya seperti ini









 


Keterangan :
Pada contoh diatas kita membuat kolom komentar dengan elemen text area, karena komentar yang user di masukan bisa saja lebih dari satu baris. Kode yang digunakan dalam contoh ini adalah :

<textarea name="komentar" cols="40" rows="5"></textarea>

Atribut cols menunjukan jumlah kolom dan atribut rows menunjukan jumlah baris yang ditampilkan

Tidak ada komentar:

Posting Komentar