Formulir ditentukan melalui elemen form. Semua elemen yang berada di dalam form akan menjadi bagian dari formulir yang bersangkutan.
<form> … </form>
Pada tag pembuka <form>, atribut action diperlukan. Dengan atribut ini, kita menentukan apa yang akan dilakukan dengan data formulir tersebut. Umumnya, ini merujuk pada aplikasi PHP.
<form method="post" action="form.php"> … </form>
Perhatikan bahwa file yang ditentukan benar-benar bisa ditemukan. Jadi, kalian harus menetapkan path yang benar.
Sebagai gantinya untuk script, kalian juga dapat menyediakan alamat email.
<form method="post" action=mailto:kontakt@psd-tutorials.de method="post" enctype="text/plain"> … </form>
Pada kasus ini, data formulir dikirim melalui email. Namun, ini tidaklah elegan, oleh karena itu hampir selalu menggunakan metode script. Tetapi, jika tidak memiliki script, formulir juga dapat dikirim melalui email.
Atribut penting lainnya untuk elemen form adalah method. Melalui atribut ini, kita menentukan metode pengiriman HTTP untuk konten formulir. Dua varian berbeda tersedia.
• post = Data formulir dikirim dalam dua langkah ke alamat yang ditentukan. Pertama-tama, browser akan menghubungi alamat yang ditentukan. Jika berhasil, data formulir akan dikirim ke script.
• get = Dengan metode ini, data formulir ditambahkan di akhir URL yang dinyatakan dalam atribut action. Data formulir juga bisa terlihat di baris alamat browser.
Yang menjadi pertanyaan adalah, metode mana yang sebaiknya digunakan untuk pengiriman data formulir. Pada dasarnya, kalian dapat menggunakan keduanya. Namun, terutama untuk data besar dan unggah file ke server, sebaiknya gunakan metode post.
Kotak Formulir Sederhana
Hingga kini, hanya kerangka luar formulir yang telah ditentukan. Namun, formulir sendiri belum terlihat di browser.
<form method="post" action="form.php"> … </form>
Sekarang, saatnya mengisi formulir dengan konten/kehidupan.
Jenis bidang yang paling sering digunakan adalah bidang input satu baris. Ini digunakan misalnya untuk menyimpan nama, nama depan, dan alamat email. Bidang input satu baris didefinisikan sebagai berikut:
<input type="text" name="vorname" />
Pada elemen input, diberikan kombinasi atribut-nilai type="text". Selain itu, setiap bidang input harus diberi pengenal internal. Pengenal ini harus bersifat unik dalam dokumen. Ini penting terutama saat penanganan data formulir menggunakan script. Jangan gunakan spasi dan karakter khusus dalam pengenal.
Jika melihat hasilnya di browser, akan seperti berikut:
Meskipun tampak biasa, ternyata saat di-klik pada kotak teks, sudah bisa memasukkan teks.
Agar pengunjung tahu apa yang harus dimasukkan ke dalam kotak teks, tentu saja diperlukan label.
Nama Depan: <input type="text" name="vorname" />
Juga di sini, saat dilihat di browser, mendapatkan hasil yang diharapkan.
Dengan atribut size, kalian dapat menentukan lebar bidang.
Nama Depan: <input type="text" name="vorname" size="30" /> <br /> Kode Pos: <input type="text" name="plz" size="5" />
Atribut size menentukan lebar bidang yang diinginkan.
Nilai 5 mengindikasikan lima karakter. Dalam konteks ini, atribut maxlength juga menarik. Karena melalui sana, dapat ditentukan jumlah maksimum karakter yang diperbolehkan untuk dimasukkan ke dalam bidang. Berikut adalah contohnya:
Nama Depan: <input type="text" name="vorname" size="30" maxlength="40" />
Jika angka yang diberikan pada atribut maxlength lebih besar dari atribut size, saat masukan melebihi panjang, akan otomatis melakukan scroll di bidang tersebut.
Melalui atribut value, kalian dapat memberikan nilai awal untuk bidang tersebut.
Nama Depan: <input type="text" name="vorname" value="Nama Anda" />
Nilai yang diberikan kepada value adalah untuk mengisi bidang secara default.
Pengguna dapat menghapus nilai yang sudah diisikan.
Kalian bisa mencegah nilai dari bidang dihapus. Dimana kita mendefinisikan sebuah input field yang pada dasarnya bukan lagi merupakan input field. Sebenarnya, bidang semacam ini sering digunakan untuk output. Ini mungkin menarik misalnya untuk menampilkan nilai yang didapat dari script. Bayangkan misalnya sebuah kalkulator. Namun, Anda juga dapat mengisikan manual suatu bidang dengan teks tertentu yang tidak dapat diubah oleh pengunjung. (Catatan: Tanda Euro tidak akan ditampilkan dengan benar dalam tampilan PDF).
<input name="preis" type="text" value="€ 699.-" readonly />
Untuk menjadikan suatu bidang hanya-baca, maka atribut readonly diberikan kepadanya. Berikut adalah hasilnya:
Teks yang sudah ditentukan langsung terlihat. Namun, tetap tidak dapat dihapus.
Definisikan Bidang Kata Sandi
Kalian pasti familiar dengan bidang kata sandi. Di mana pun, ketika kalian mendaftar, kalian harus memasukkan sebuah kata sandi. (Umumnya harus dimasukkan dua kali).
Data yang dimasukkan ke dalam input field tidak terlihat, tetapi secara otomatis akan digantikan dengan bintang/titik oleh peramban. Keuntungan dari metode ini: Orang-orang yang mungkin memperhatikan saat kalian memasukkan kata sandi, tidak bisa menguraikannya. Namun, sebaiknya jangan mengira bahwa bidang kata sandi secara otomatis aman. Sesungguhnya, kata sandi akan dikirim dalam teks biasa saat mengirimkan formulir melalui HTTP biasa.
Bidang kata sandi didefinisikan sebagai berikut:
<input type="password" name="passwort" />
Atribut type diberi nilai password. Berikut adalah hasilnya.
Jika kalian mengetik di sana, maka browser akan langsung menyamarkan saat pengetikan.
