Belajar Html Bab 14 : Cara Menciptakan Form Di Html - Calon Teknisi | Free Download BIOS

Calon Teknisi | Free Download BIOS

Free download BIOS, Schematic, Boardview & Kursus Teknisi Laptop Online Interaktif.

Belajar Html Bab 14 : Cara Menciptakan Form Di Html

Share This
Form dipakai untk mengumpulkan data dari pengunjung WEBsite. Mulai dari form pencarian, login, pendaftaran dan lain sebagainya.

HTML tidak sanggup memproses data yang dikumpulkan dari form tersebut, alasannya ialah HTML hnya dipakai untk menformat dokumen bukan untk memproses data.

Untuk memproses data dari form tersebut kita sanggup mengunakan bahasa pemrogmemory raman WEB ibarat JavaScript, PHP dan bahasa pemrogmemory raman WEB lainnya. Untuk pembahasan lebih lanjut Saya akan membahasnya di tutorial JavaScript dan PHP.



Pembahasan Tag <form>

Tag <form> dipakai untk mendefinisikan sebuah form, yang diawali dengan <form> dan diakhiri dengan </form>. Tag <form> membutuhkan bbrapa atribut untk sanggup berfungsi ibarat seharusnya.

 

Atribut action

Atribut pertama adlah action, yang dipakai untk menentukan lokasi kemana form tersebut akan dikirimkan. Biasanya nilai dari atribut ini adlah sebuah alamat dari halman PHP yang dipakai untk memproses data dari form tersebut.

 

Atribut method

Atribut kedua adlah method, yang berfungsi untk menentukan gimana data form tersebut akan dikirimkan oleh broser. Nilai dari atribut ini yaitu post dan get.

Jika kita mengisi atribut method dengan get maka data dari form tersebut akan terlihat pada URL broser, biasanya dipakai untk form pencarian. Jika mengisi dengan nilai post maka data dari form tersebut tidak akan terlihat pada URL broser, biasanya dipakai untk data yang sensitif contohnya ibarat yusername dan password.

Berikut ini pola dari penggunaan atribut di tag <form> :

<form action="proses.php" method="post">...</form>



Tag label

Tag label dipakai untk memberi keterangan pada setiap input yang ada.

Berikut ini pola penggunaan tag label :
<label for="name"> <!-- keterangan input --> </label>
Pada pola arahan tag <label> diatas terdapat atribut for berfungsi untk mencari name yang sesuai dengan isi nilai dari atribut tersebut.



Atribut name

Setiap tag inputan di dalam form harus menambahkan atribut name biar sanggup diproses oleh WEB server nantinya. Di dalam halman proses ibarat PHP dan sebagainya, nilai dari atribut name inilah yang akan menjadi variable form.

Contoh penggunaan atribut name :

<label for="nama">Nama lengkap :</label> <input type="text" name="nama"> <label for="email">Email Anda :</label> <input type="email" name="email"> 



Mengenal Tag <input>

Tag <input> sering dipakai di dalam form, alasannya ialah mempunyai banyak tipe. Seperti textbox, text password, button, checkbox, radio, submit dan lain-lainnya. Tapi kali ini Saya tidak akan membahas semua tipe yang ada di tag <input>.

Berikut ini atribut dari tag <input> :

Text Box

Textbox dipakai untk mendapatkan inputan berupa teks pendek, biasa dipakai untk yusername dan sebagainya.

Contoh penggunaan textbox di HTML :

<label for="nama">Nama lengkap :</label> <input type="text" name="nama">

 

Text Password

Hampir sama dengan textbox namun teks yang di input tidak akan terlihat, yang terlihat berupa bulutan hitam. Biasa dipakai untk inputan yang sensitif ibarat password dan sebagainya.

Contoh penggunaan text password di HTML :

<label for="sandi">Kata sandi :</label> <input type="password" name="sandi">

 

Submit

Nilai dari submit ini akan menampilkan sebuah tombol yang jikalau di klik akan memproses seluruh data dari form tersebut.

Contoh penggunaan submit di HTML :

<input type="submit" value="Kirim">




Text Area

Sama halnya dengan text, namun textarea sanggup diisi teks yang lebih dari satu baris, sangat cocok dipakai untk inputan teks yang panjang ibarat alamat, deskripsi dan sebagainya. Panjang dan baris textarea sanggup di atur melalui atribut rows dan cols atau sanggup melalui CSS.

Contoh penggunaan tag <textarea> di HTML :

<label for="pesan">Pesan :</label> <textarea rows="10" cols="25" name="pesan"></textarea>




Combo Box

Combo box adlah inputan yang telah tersedia nilainya, dan pengguna hnya sanggup menentukan dari nilai yang sudah tersedia. Untuk mendefinisikan sebuah combo box sanggup memakai tag <select>, untk pilihannya memakai tag <option>.

Contoh arahan HTML untk menciptakan combo box :

<label for="kota">Sekarang Anda berada di kota :</label> <select name="kota">  <option>Jakarta</option>  <option>Bandung</option>  <option>Surabaya</option> </select>


Tag <option> mempunyai atribut selected yang di gunakan biar tag <option> berisi nilai awal. Contoh penggunaannya sebagai berikut :

<label for="kota">Sekarang Anda berada di kota :</label> <select name="kota">  <option>Jakarta</option>  <option>Bandung</option>  <option selected>Surabaya</option> </select>




Membuat Sebuah Form Utuh

Kita akan memasukkan seluruh arahan tag yang telah dibahas sebelumnya ke dalam tag <form>. Silahkan buka text editor teman kemudian ketikan arahan dibawah ini :

<!DOCTYPE html> <html> <head>  <title>Belajar Membuat Form di HTML</title> </head> <body> <form action="proses.html" method="get">  <p><label for="nama">Nama lengkap :</label>  <input type="text" name="nama"></p>    <p><label for="sandi">Kata sandi :</label>  <input type="password" name="sandi"></p>    <p><label for="kota">Sekarang Anda berada di kota :</label>  <select name="kota">  <option>Jakarta</option>  <option>Bandung</option>  <option>Surabaya</option>  </select></p>    <p><label for="pesan">Pesan :</label>  <textarea rows="10" cols="25" name="pesan"></textarea></p>    <p><input type="submit" value="kirim"></p> </form> </body>

Jika sudah diketik silahkan Save dengan nama form.html, kemudian buka di broser. Silahkan tekan tombol Kirim, maka tampilannya akan ibarat gambar dibawah ini :


Perhatikan pada atribut action Saya menulis nilainya adlah form.html dan nilai dari atribut method yaitu get, sehingga pada ketika Anda menekan tombol Kirim maka akan muncul URL dari data form yang sudah di isi sebelumnya setips otomatis di addres bar. URL ibarat dibawah ini :

file:///D:/Belajar%20HTML/proses.html?nama=Abdi&sandi=katasandi&kota=Jakarta&pesan=Mari+belajar+HTML+di+mas-abdi.blogspot.com

Lihat URL diatas, setiap nilai akan dibatasi dengan huruf "&" sedangkan spasi diganti dengan "+".

Untuk pembahasan tips memproses inputan form akan dibahas di Tutorial PHP yang nantinya akan Saya buatkan.
Sumber https://mas-abdi.blogspot.com/

No comments:

Post a Comment