Belajar membuat Form dengan HTML

Hai sobat blogger !!! Kali ini saya akan sharing tentang belajar membuat Form dengan HTML. Tapi sebelum itu buat kalian yang belum tau dan ingin mengetahui nya maka kita mulai dari awal, biar sobat gak bingung saat membuat nya.



Pengenalan Form

Form,, sebenarnya artinya sama dengan yang ada yaitu Formulir.. Tapi dalam konteks ini Form akan berbentuk input digital. Form sendiri adalah Kesatuan dari beberapa Input Field yang memiliki tujuan proses.. gimana ? bingung ?,, haha Sebenarnya Form sendiri mengumpulkan data - data User dari Input yang bisa diubah Value (isinya) oleh User.. ahhh,, tambah bingung.. gini aja Kalian kalo mau daftar Facebook harus ngisi Registrasi kan.. atau Kalo mau Login, harus ngisi User/Email dan Password kan,, nahh tempat kalian ngisi data - data itu disebut Form.Dalam penerapannya di HTML, form selalu ditulis seperti ini

<Form Action="URL Tujuan" Method="Post" enctype="multipart/form-data"> Input Field </Form>

Penjelasan : Form dimulai dengan Tag <form> dan ditutup dengan </form> , Lalu ada Action, Yaitu adalah lokasi data akan dikirim, setelah kalian menekan tombol Submit (Register, Sign In, Sign Up Dll).. Kalo Method adalah metode pengiriman, ada 2 method, yaitu POST danGET.. nah bedannya kalo Metode pengiriman Get, dia akan langsung menampilkan data yang di input kedalam URL, contoh, inget gak, kalo kalian Googling, nah pas kalian masukan Kata kunci, terus kalian tekan “Search/Cari” pasti URL yang di addressnya akan panjang (liat Gambar), nahh kalo Metode Post, dia akan di sembunyikan, Contoh kalo Login Facebook, setelah memasukan Email dan Password terus kalian tekan Login / Sign In, kalian langsung di alihkan ke Akun kalian kan, tapi URLnya gak keliatan, tiba2 dari http://facebook.com jadi http://facebook.com/home.php aja kan,, gak ada data yang kalian input,, jadi metode Post lebih aman untuk data2 pribadi, sedangkan di beberapa kasus metode Get berguna, Seperti google, biar User bisa share alamat pencariannya kepada yang lain, gak usah capek2 ngetik lagi kan.

Klo enctype="multipart/form-data" digunakan jika kita ingin memasukan Field dengan tipe File, seperti Upload Photo, Video, Lagu atau File lainnya, diharuskan menggunakan ini. Ini akan memberi informasi lebih, bahwa Form yang digunakan adalah Form data, kalo kalian tidak menambahkan atribute ini, gw yakin File kalian gak akan terupload / terunggah.
  
Input Field Dasar

Okeh kita lanjut ke pembahasan berikutnya,, Setelah kalian mengerti dasar pembuatan Tag Form diatas sekarang kita akan mencoba membuat Input Field. Ada banyak jenis Form. namun gw kasih dasar tagnya dulu.. kayak begini..

<Input type="Tipe" name="Nama Field" id="ID Field" value="Isi Field (Jika ada)">

Nahh kalo diatas adalah tag dasar Input Field / Bidang Inputan (masukan), tapi ada beberapa tipe inputan yang memiliki Tag berbeda, tapi kita akan bahas yang ini dulu,, Tag input field dimulai dengan tag Input tapi gak perlu di tutup seperti Tag HTML yang lainya,, nah kalo atribute type="Tipe" di wajibkan, karena untuk memberi informasi jenis input apa yang ingin digunakan, nah liat tabel dibawah untuk lebih jelas Tipe - tipe inputan. kalo Name dan Id digunakan untuk memberi nama / identitas objek inputan ini, dan nanti digunakan untuk informasi objek di Javascript atau bahkan menjadi nama Variabel di PHP., dan ini harus / wajib digunakan jika form ingin diproses. Nah yang terakhir Value digunakan untuk memberikan Nilai kepada inputan, dan akan ditampilkan di browser.
   Dan berikut adalah jenis-jenis tipe inputan :

• text = Input karakter, teks langsung
• password = Input untuk password atau kode rahasia
• file = Input untuk file, browse file, unggah photo atau file
• button = Button / tombol multifungsi di dalam form
• submit = Untuk mengirim / submit form ke actionnya 
• reset = Mereset form kembali
• checkbox = Opsional lebih dari satu
• radio = Opsional yang hanya memperbolehkan 1 pilihan
• image = Menggunakan image sebagai field untuk mesubmit dan lainnya
• hidden = Input tersembunyi

Name Input ( Sama )

<input type="radio" name="gender" value="Male"> Male<br>
<input type="radio" name="gender" value="Female"> Female

Maka hasilnya seperti dibawah ini, coba kalian pilih salah satunya, terus pilih yang lain, maka pilihan pertama langsung uncheck kan,, jadi dia cuma bisa satu, karena masih satu jenis pertanyaan :

 

Name Input ( Berbeda )

<input type="radio" name="gender1" value="Male"> Male<br>
<input type="radio" name="gender2" value="Female"> Female

Sekarang kalian coba, pilih kedua - duannya, maka Input Radio akan mengijinkan kalian me-check ke duannya, karena dia merasa bahwa satu dengan yang lainnya tidak dalam satu substansial yang sama..

Gimana ? ngertikan tentang input type radio,, sekarang gw akan jelaskan input type checkbox, nahh yang ini memperbolehkan kalian memilih lebih dari satu opsi dalam substansial yang sama, jadi kalian bisa milih lebih dari 1 pilihan,, namun penggunaannya masih sama dengan type radio, kalian harus menggunakan name yang sama untuk yang ini,, contoh seperti dibawah :

Nahh, yang terakhir adalah input Image, buat apaan siihh ini, ini sama kayak button, bisa digunakan untuk keperluan tertentu, namun tampilannya bisa digunakan gambar,

Text Area

Input jenis ini biasa digunakan untuk memasukan Teks / Karakter yang lebih dari 1 line atau satu baris aja, seperti mengisi Alamat, Bio, Deskripsi, Artikel / Berita dan lainnya.. nahh penggunaan tagnya adalah sebagai berikut

<textarea name="Nama" cols="30" rows="5">Value</textarea>

Nahh keterangannya sebagai berikut, Tag dimulai dari <textarea> dan ditutup </textarea>, sedangkan Value diapit oleh keduannya, tidak sama dengan input field sebelumnya, value berada diluar (bukan atribute dari tag),, Nahh untuk lebarnya, pake cols masukin aja nilainya, ingat satuannya bukan Pixel tapi Karakter jadi kalo cols nya 30, berarti 30 karakter kesamping, nah kalo tingginya pake rows dan yang ini satuannya line / baris, jadi kebawah tingginya berapa baris dari value.. gituu.. gimana ngerti kan,, nahh contoh textarea seperti dibawah ini :

Text di ketikan disini (value)…

Select List

Nahh, kalo yang ini,, inget gak kalo kalian masukin tanggal lahir, bulan lahir atau tahun, pasti di pilih seperti list, di click muncul dropdown kebawah kan,, nahh itu namanya input Select,, seperti textarea, dia dimulai dari buka Tag <select> dan ditutup </select>, valuenya diapit, tapi setiap list dibuat didalam Tag <option value="Value">Label Value</option>, okeehh contohnya kayak dibawah nihhh…

<select name="Nama">
<option value="male">Laki - Laki</option>
<option value="female">Perempuan</option>
</select>

Nah sekian dulu postingan saya tentang membuat Form dengan HTML ,moga2 ja bisa buat tambahan refrensi aja bgi yg belum tau ok Broo !!!!