Belajar HTML Part 20 Cara Membuat Form di HTML Part 1

Hampir semua website pasti memiliki form yang digunakan melakukan interaksi dengan pengguna website tersebut, seperti form login, form registrasi, form transaksi dan masih banyak lagi form lain.

Dalam tutorial ini kita akan membahas mengenai bagaimana cara membuat form dengan menggunakan HTML, walaupun nantinya untuk pembuatan form tidak akan berfungsi maksimal jika hanya menggunakan HTML saja, anda perlu bahasa lain seperti PHP untuk memproses data yang akan dikirimkan ke database, ataupun anda menggunakan javascript untuk memberikan effect pada tampilan form yang anda buat, tetapi dalam tutorial ini kita akan bahas lebih detail di bagian form dengan menggunakan HTML saja.


Video Tutorial Belajar HTML – Membuat Form di HTML

Fungsi Tag form

ini adalah tag yang digunakan untuk mengawali dan mengakhiri form yang anda buat, untuk awal form anda harus memberikan tag <form> dan tag </form>.

didalam tag form ini terdapat beberapa attribute yang harus anda sertakan yaitu :

  • Attribute action : attribute ini digunakan untuk mengatur file apa yang akan dipanggil untuk memproses data dari form. value yang tertulis di attribute action ini biasanya adalah file PHP yang nantinya akan memproses inputan form.
  • Attribute method : attribute ini digunakan untuk mengatur metode apa yang digunakan untuk mengirimkan data form, value yang bisa anda berikan pada attribute ini adalah 2 yaitu get dan post. perbedaan dari 2 value ini jika anda menggunakan value get maka data yang dikirimkan browser akan terlihat pada url browser, metode ini biasanya digunakan untuk form yang datanya tidak terlalu rahasia seperti form pencarian, berbeda dengan get untuk value post, data yang dikirimkan tidak akan terlihat pada url di browser, metode ini digunakan untuk form yang datanya rahasia, seperti form untuk login, ataupun form transaksi.

baik untuk contohnya adalah seperti ini :

baik kita akan simpan semisal dengan nama form_html.html

lalu dibuka di browser :

tag_form

terlihat ada form login sederhana, form diatas saya menggunakan method post, maka jika form tersebut di isi usernamenya lalu di klik tombol loginnya, hasilnya adalah seperti gambar dibawah ini :

form_html_post

nah terlihat browser akan memanggil file dengan nama proses.php hal tersebut dikarenakan kita memberikan value proses.php pada bagian attribute action, dan coba anda perhatikan pada url web browser tidak terdapat data yang dikirimkan, hal tersebut karena kita menggunakan method post sehingga datanya tidak terlihat di url browser.

lalu coba kita ganti untuk skripnya menjadi menggunakan method=’get’

lalu kita coba simpan semisal dengan nama form_get.html lalu kita buka di browser.

tag_form

lalu coba isikan username semisal dengan nama ‘aris’ dan klik login, maka hasilnya adalah seperti berikut ini :

nah terlihat untuk bagian url pada browser terdapat inputan form yang dikirim setelah nama file yang ada pada attribute action, nah itu karena kita menggunakan method get pada bagian formnya, jadi bagaimana sudah paham kan apa perbedaan dari value get dan post didalam attribute method.



Membuat Inputan Text dan password

Inputan jenis ini yang paling banyak digunakan pada form, jenis inputan ini biasanya digunakan untuk mengisikan inputan seperti nama, ataupun nilai yang lain, yang menjadi pembeda adalah hanya tipenya saja,

jika nilai tipe adalah text maka nilai yang diinputkan oleh user akan terlihat, tetapi untuk inputan dengan tipe password nilai yang diinputakan user tidak akan terlihat.

penulisan dari inputan jenis ini adalah :

untuk tag input tidak memiliki tag penutup.

 

Attribute name pada tag input

attribute name adalah salah satu attribute yang sangat penting pada setiap inputan form, karena dengan attribute name setiap inputan akan diberikan nama untuk pemrosesan data.

contohnya adalah seperti berikut ini :

nah terlihat kita membuat 2 inputan :

  • tipe text dengan nama username
  • tipe password dengan nama pass_user

jika kita buka di browser hasilnya adalah seperti ini :

lalu coba kita isikan username dan passwordnya, lalu kita klik tombol login, maka hasilnya adalah sebagai berikut :

coba perhatikan pada url browser, karena kita menggunakan method get, maka ada 2 nilai yang dikirim yaitu username=aris dan pass_user=’1234′ , nah untuk username dan pass_user ini adalah value name pada masing – masing input.

 

Attribute value

Attribute value digunakan untuk memberikan nilai default yang ada di tag input dengan type=’text’, attribute value ini bersifat optional jadi bisa anda tambahkan ataupun tidak.

contoh penggunaan attribute value adalah sebagai berikut :

maka ketika di buka di browser hasilnya sebagai berikut :

Coba anda perhatikan dibagian inputan username, saya memberikan value=’warungbelajar’ hal tersebut akan menyebabkan terdapat nilai otomatis pada bagian inputan text pada bagian username yaitu warungbelajar.

ketika anda langsung klik tombol login, maka form akan membaca bahwa nilai dari username adalah warungbelajar, karena kita memberikan nilai default value adalah ‘warungbelajar’.

 

Attribute size

Attribute ini digunakan untuk mengatur berapa ukuran panjang kotak inputan, satuan dari attribute size ini adalah pixel, baik langsung saja kita buat contoh skripnya :

maka jika kita akan akses di browser hasilnya adalah seperti ini :

terlihat ada 2 inputan text dengan ukuran lebar yang berbeda hal tersebut dikarenakan perbedaan pada bagian size di setiap inputan.

 

Attribute maxlength

Attribute ini digunakan untuk membatasi panjang karakter yang bisa inputkan pada kotak inputan, contoh penggunaan skripnya adalah seperti ini :

lalu kita coba buka di browser, dan coba menginputkan angka 1 – 10 maka yang terjadi adalah :

maxlength_form_html

kotak input pertama hanya bisa diisi oleh nilai 1 – 5, dan kotak kedua hanya dapat diisi oleh angka 1 – 7 hal tersebut dikarenakan nilai dari attribute maxlength yang telah kita set.

 

Attribute disabled dan readonly

kedua attribute tersebut memiliki fungsi untuk mengatur apakah inputan form dapat diisi ataupun tidak, penjelasan lebih spesifiknya adalah seperti ini :

  • readonly : attribute ini  digunakan untuk mengatur  user hanya boleh melihat form inputan, tanpa bisa mengedit atau menghapus isi didalam form inputan tersebut.
  • disabled : attribute ini digunakan untuk mengatur dan menonaktifkan fitur inputan form, fungsinya hampir sama dengan attribute readonly, yang berbeda jika anda menggunakan attribute ini maka warna form itu akan berwarna abu abu, dan tidak bisa di klik apapun pada kotak inputannya.

untuk contoh penggunaan skripnya adalah seperti berikut :

silahkan disimpan dan dibuka di browser maka hasilnya adalah sebagai berikut :

disabled_readonly_form_html

nah coba anda perhatikan ada 2 inputan :

  • username 1 saya gunakan attribute readonly, sehingga kita tidak bisa mengedit inputannya, user masih bisa mengcopy tulisan yang ada di kotak inputannya.
  • username 2 saya menggunakan attribute disabled, sehingga kita tidak bisa mengedit inputannya, dan inputannya berwarna abu abu seperti gambar diatas, user tidak bisa mengcopy tulisan yang ada di kotak inputannya

 

Attribute id dan class

selain attribute type,value,size,maxlength,readonly dan disabled anda bisa menambahkan attribute id dan class pada kotak inputan, attribute ini dapat anda gunakan untuk mengatur style css dan javascript di masing – masing kotak inputan form.

nah caranya seperti diatas semisal inputan diberikan id=’abc’ dan class=’def’

Nah Bagaimana Mudahkan untuk membuat bagian form, dalam tutorial selanjutnya kita akan membahas mengenai bagaimana cara untuk membuat checkbox pada bagian form HTML.

[stextbox id=”info”] Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]

3 thoughts on “Belajar HTML Part 20 Cara Membuat Form di HTML Part 1

    • December 12, 2017 at 9:54 am
      Permalink

      Sama sama mas,, semoga bisa membantu

      Reply
  • March 21, 2020 at 1:33 pm
    Permalink

    Thank you kak atas artikel yang membahas cara membuat form diHTML, penjelasannya sangat mudah dimengerti dan sangat bermanfaat bagi saya yang baru belajar. Semangat kak membuat artikel lainnya supaya bisa membantu orang lain. Perkenalkan nama saya Tamara Oktavia website kampus saya https://www.atmaluhur.ac.id/

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *