Membuat Elemen Form dengan Adobe Dreamweaver

TextField

Digunakan untuk menuliskan teks.

Syntax:

<input type=”text” name=“nama_variabel” />

Keterangan:

  • input type=“text”, kode ini berarti tipe inputnya adalah teks.
  • name adalah nama variabel

Membuat TextField dengan Dreamweaver

Pada jendela design pilih menu Insert->Form->Text Field seperti terlihat pada gambar dibawah ini:

Maka akan tampil jendela berikut ini:

Lalu isi ID = “nm_siswa” dan Label=“Nama Siswa”

Maka pada jendela design akan tampil Text Field seperti dibawah ini:

Nama Siswa

Kode yang dihasilkan

<label>Nama Siswa
<input type=”text” name=”nm_siswa” id=”nm_siswa” />
</label>

Properties Text Field

Keterangan:

  • TextField digunakan untuk merubah nama variabel textfieldnya
  • Char Width digunakan untuk merubah ukuran textfield.
  • Max chars digunakan untuk membatasi panjang karakter
  • Single Line berarti kita akan membuat textfield
  • Multi line berarti kita akan membuat textarea.
  • Password berarti kita akan membuat teks untuk menginput password
  • Init val, adalah nilai default untuk textfield
  • Disabled berarti kotak textfield tidak bisa dirubah dan berwarna abu-abu
  • Read-only berarti kotak textfield hanya bisa dibaca dan tidak bisa dirubah
  • Class digunakan untuk memasukkan Style CSS

SELECT

Adalah tag HTML yang digunakan untuk membuat dan menampilkan pilihan dalam bentuk dropdown.

Syntax:

<select name=“nama_variabel” >
<option value=“php”>PHP</option>

</select>

Keterangan:

  • select digunakan untuk membuat kotak dropdown.
  • name adalah nama variabel dari select.
  • <option value=“php”>PHP</option>, kode ini digunakan untuk membuat pilihan yang mempunyai value=“php” dan menampilkan teks  PHP.

Membuat select dengan Dreamweaver

Contoh:

Saya ingin menampilkan pilihan kota, yaitu:

  • Jakarta
  • Bogor
  • Tanggerang
  • Bekasi

Cara Pembuatan

Pada jendela design klik menu Insert->Form->List/Menu

Maka akan tampil jendela seperti dibawah ini:

Lalu isi ID=”kota” dan Label=”Kota”

Maka akan menghasilkan menu dropdown seperti terlihat dibawah ini:

Kota

Properties dari SELECT

Keterangan:

  • List/menu digunakan untuk merubah nama variabel
  • Type digunakan untuk memilih tipe yaitu Menu atau List
  • List Values digunakan untuk menambahkan nilai pada SELECT
  • Initially selected adalah nilai default yang terpilih

Menambahkan nilai pada menu SELECT

Untuk menambahkan nilai pada menu SELECT maka kamu bisa klik properties List Values yang akan menampilkan gambar seperti dibawah ini:

Keterangan:

  • Item Label digunakan untuk menampilkan nilai pada browser
  • Value adalah nilai yang akan diberikan ke variabel SELECT jika Item Label dipilih

Isilah jendela List Values diatas seperti gambar dibawah ini:

Hasil:

Untuk melihat hasilnya maka kamu bisa klik gambar globe seperti terlihat pada gambar dibawah ini:

Maka pada browsermu akan tampil pilihan seperti terlihat dibawah ini:

Coba kamu pilih kota dari menu SELECT diatas.

Membuat Radio Button

Digunakan untuk membuat tombol bulat  dimana tombol bulat ini berisi beberapa pilihan dan kamu hanya bisa memilih satu pilihan saja.

Syntax:

<input type=”radio” name=”nama_variabel” value=”nilai_variabel”  /> Tulisan_yang_tampil

Keterangan:

  • input type=”radio”, kode ini berarti kita membuat radio button
  • name adalah nama_variabel
  • value adalah nilai dari variabel

Membuat Radio Button dengan Dreamweaver

Maka akan menghasilkan jendela berikut ini:

Keterangan:

  • Name adalah nama variabel
  • Label adalah teks yang ditampilkan di browser
  • Value adalah nilai dari radio button

Isilah jendela Radio Group diatas seperti terlihat pada gambar dibawah ini:

Lalu klik OK maka akan menghasilkan pilihan seperti dibawah ini pada jendela design:

Pria

Wanita

Textarea

Pada jendela design pilih menu Insert->Form->Text area seperti terlihat pada gambar dibawah ini:

Maka akan tampil jendela seperti dibawah ini:

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

2 Responses

  1. Satya says:

    mas Fahmi,saya ingin membuat form yang berisi file dinamis dimana nanti saya akan menggunakan check box untuk memilih salah satu konten dan saya ingin menghapusnya.kira” caranya gimana yah klw pake dreamweaver.Terima kasih tutorialnya.

  2. satria says:

    mas Fahmi, saya sedang menelusuri isi website anda, sangat bermanfaat sekali untuk pemula seperti saya,
    Terima kasih tutorialnya. Salam,

Leave a Reply

Your email address will not be published. Required fields are marked *