Cara Menambahkan Formulir dengan KompoZer

01 06

Tambahkan Formulir Dengan KompoZer

Ada banyak waktu ketika Anda membuat halaman web di mana Anda perlu memproses masukan yang dikirimkan oleh pengguna seperti halaman login, pembuatan akun baru, atau untuk mengajukan pertanyaan atau komentar. Input pengguna dikumpulkan dan dikirim ke server web menggunakan formulir HTML. Formulir mudah ditambahkan dengan alat bawaan KompoZer. Semua jenis bidang formulir yang didukung HTML 4.0 dapat ditambahkan dan diedit dengan KompoZer, tetapi untuk tutorial ini kami akan bekerja dengan teks, area teks, kirim dan reset tombol.

02 06

Buat Formulir Baru Dengan KompoZer

KompoZer memiliki alat formulir yang kaya yang dapat Anda gunakan untuk menambahkan formulir ke halaman web Anda. Anda mengakses alat formulir dengan mengklik tombol Formulir atau menu drop-down yang disertakan di bilah alat. Perhatikan bahwa jika Anda tidak menulis skrip penanganan formulir Anda sendiri, Anda perlu mendapatkan beberapa informasi untuk langkah ini dari dokumentasi atau dari programmer yang menulis skrip. Anda juga dapat menggunakan formulir mailto tetapi tidak selalu berfungsi .

1. Posisikan kursor Anda di lokasi yang Anda inginkan agar formulir Anda muncul di halaman.
2. Klik tombol Formulir di bilah alat. Kotak dialog Properti Bentuk terbuka.
3. Tambahkan nama untuk formulir. Nama digunakan dalam kode HTML yang dibuat secara otomatis untuk mengidentifikasi formulir dan diperlukan. Anda juga perlu menyimpan halaman Anda sebelum Anda dapat menambahkan formulir. Jika Anda bekerja dengan halaman baru yang belum disimpan, KompoZer akan meminta Anda untuk menyimpan.
4. Tambahkan URL ke skrip yang akan memproses data formulir di bidang URL Aksi. Formulir penangan biasanya skrip yang ditulis dalam PHP atau bahasa sisi server yang serupa. Tanpa informasi ini, halaman web Anda tidak akan dapat melakukan apa pun dengan data yang dimasukkan oleh pengguna. KompoZer akan meminta Anda memasukkan URL untuk form handler jika Anda tidak memasukkannya.
5. Pilih Metode yang digunakan untuk mengirimkan data formulir ke server. Dua pilihannya adalah GET dan POST. Anda perlu mengetahui metode mana yang dibutuhkan oleh skrip.
6. Klik OK dan formulir ditambahkan ke halaman Anda.

03 06

Tambahkan Bidang Teks Ke Formulir Dengan KompoZer

Setelah Anda menambahkan formulir ke halaman dengan KompoZer, formulir akan diuraikan di halaman dalam garis putus-putus berwarna biru muda. Anda menambahkan kolom formulir Anda di dalam area ini. Anda juga dapat mengetikkan teks atau menambahkan gambar, seperti yang Anda lakukan pada bagian lain dari halaman. Teks berguna untuk menambahkan petunjuk atau label untuk membentuk bidang untuk memandu pengguna.

1. Pilih tempat yang Anda inginkan ke bidang teks untuk masuk ke dalam area formulir yang digariskan. Jika Anda ingin menambahkan label, Anda mungkin ingin mengetikkan teks terlebih dahulu.
2. Klik panah bawah di samping tombol Form pada toolbar dan pilih Field Form dari menu drop down.
3. Jendela Form Field Properties akan terbuka. Untuk menambahkan bidang teks, pilih Teks dari menu tarik turun berlabel Jenis Bidang.
4. Berikan nama ke bidang teks. Nama digunakan untuk mengidentifikasi bidang dalam kode HTML dan skrip penanganan formulir membutuhkan nama untuk memproses data. Sejumlah atribut opsional lainnya dapat dimodifikasi pada dialog ini dengan mengubah tombol More Properties / Fewer Properties atau dengan menekan tombol Advanced Edit, tetapi untuk saat ini kami hanya akan memasukkan nama field.
5. Klik OK dan kolom teks muncul di halaman.

04 06

Tambahkan Area Teks Ke Bentuk Dengan KompoZer

Terkadang, banyak teks harus dimasukkan pada formulir, seperti pesan atau bidang pertanyaan / komentar. Dalam hal ini, bidang teks tidak tepat. Anda dapat menambahkan bidang bentuk bidang teks menggunakan alat formulir.

1. Posisikan kursor Anda dalam bentuk garis di mana Anda ingin area teks Anda menjadi. Jika Anda ingin mengetikkan label, sering kali ada baiknya untuk mengetikkan teks label, tekan enter untuk pindah ke baris baru, lalu tambahkan kolom formulir, karena ukuran area teks pada halaman membuatnya canggung untuk label berada di sebelah kiri atau kanan.
2. Klik tanda panah ke bawah di samping tombol Form pada toolbar dan pilih Text Area dari menu drop down. Jendela Properti Area Teks akan terbuka.
3. Masukkan nama untuk bidang bidang teks. Nama mengidentifikasi bidang dalam kode HTML dan digunakan oleh skrip penanganan formulir untuk memproses informasi yang dikirim pengguna.
4. Masukkan jumlah baris dan kolom yang Anda inginkan area teks untuk ditampilkan. Dimensi ini menentukan ukuran bidang di halaman dan berapa banyak teks yang dapat dimasukkan ke dalam bidang sebelum bergulir perlu terjadi.
5. Opsi lanjutan lainnya dapat ditentukan dengan kontrol lain di jendela ini, tetapi untuk saat ini nama dan dimensi bidang sudah cukup.
6. Klik OK dan area teks muncul di formulir.

05 06

Tambahkan A Kirim dan Atur Ulang Tombol Ke Bentuk Dengan KompoZer

Setelah pengguna mengisi formulir di halaman Anda, perlu ada beberapa cara agar informasi dikirimkan ke server. Selain itu, jika pengguna ingin memulai kembali atau membuat kesalahan, akan sangat membantu untuk menyertakan kontrol yang akan mengatur ulang semua nilai formulir ke default. Kontrol bentuk khusus menangani fungsi-fungsi ini, yang disebut tombol Kirim dan Atur Ulang masing-masing.

1. Tempatkan kursor Anda di dalam area formulir yang diuraikan di mana Anda ingin tombol kirim atau reset untuk menjadi. Paling sering, ini akan terletak di bawah sisa ladang di formulir.
2. Klik panah bawah di samping tombol Form pada toolbar dan pilih Define Button dari menu drop down. Jendela Properties Tombol akan muncul.
3. Pilih jenis tombol dari menu drop-down bertuliskan Type. Pilihan Anda adalah Kirim, Atur Ulang dan Tombol. Dalam hal ini kita akan memilih jenis Kirim.
4. Beri nama pada tombol, yang akan digunakan dalam HTML dan bentuk kode penanganan untuk memproses permintaan formulir. Pengembang web biasanya menamai bidang ini "kirim."
5. Di kotak berlabel Value, masukkan teks yang seharusnya muncul pada tombol. Teks harus singkat tetapi deskriptif tentang apa yang akan terjadi ketika tombol ditekan. Sesuatu seperti "Kirim," "Kirim Formulir," atau "Kirim" adalah contoh yang bagus.
6. Klik OK dan tombol muncul di formulir.

Tombol Reset dapat ditambahkan ke form menggunakan proses yang sama, tetapi pilih Reset dari field Type daripada Submit.

06 06

Mengedit Formulir Dengan KompoZer

Mengedit formulir atau formulir di KompoZer sangat mudah. Cukup klik ganda pada bidang yang ingin Anda edit, dan kotak dialog yang sesuai muncul di mana Anda dapat mengubah properti bidang sesuai dengan kebutuhan Anda. Diagram di atas menunjukkan bentuk sederhana menggunakan komponen yang dibahas dalam tutorial ini.