Skip to main content

Cara Menambahkan Formulir dengan KompoZer

Cara membuat website webpage dengan KompoZer dan Nvu (Juni 2025)

Cara membuat website webpage dengan KompoZer dan Nvu (Juni 2025)
Anonim

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.

Buat Formulir Baru

KompoZer memiliki alat formulir yang kaya yang dapat Anda gunakan untuk menambahkan formulir ke halaman web Anda. Anda mengakses alat formulir dengan mengklik tombol Form atau menu drop-down yang disertakan di toolbar. 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 Bentuk 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 pengendali formulir jika Anda tidak memasukkannya.
  5. Pilih metode digunakan untuk mengirimkan data formulir ke server. Dua pilihannya adalah GET dan POST. Anda perlu mengetahui metode mana yang dibutuhkan oleh skrip.
  6. Klik baik dan formulir ditambahkan ke halaman Anda.

Tambahkan Bidang Teks ke Formulir

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 lanjut ke Bentuk pada bilah alat dan pilih Field Form dari menu drop-down.
  3. Jendela Form Field Properties akan terbuka. Untuk menambahkan bidang teks, pilih Teks dari menu drop-down 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 Lebih Properti / Lebih Sedikit Properti tombol atau dengan menekan tombol Edit Tingkat Lanjut, tetapi untuk sekarang, kami hanya akan memasukkan nama bidang.
  5. Klik baik dan bidang teks muncul di halaman.

Tambahkan Area Teks ke Formulir

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 panah bawah lanjut ke Bentuk di bilah alat dan pilih Teks Daerah 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 dikirimkan 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 baik dan area teks muncul di formulir.

Tambahkan Kirim dan Atur Ulang Tombol ke Formulir

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 lanjut ke Bentuk di bilah alat dan pilih Tentukan Tombol 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 Menyerahkan mengetik.
  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 dalam kotak berlabel Nilai, masukkan teks yang seharusnya muncul di 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.

Itu Setel ulang tombol dapat ditambahkan ke formulir menggunakan proses yang sama, tetapi pilih Setel ulang dari Mengetik bidang bukan Menyerahkan.

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.