Cara menggunakan html form submit value

Question

Untuk beberapa keperluan tertentu, Anda tentunya membutuhkan penggunaan form di website yang Anda miliki misalnya form untuk survei, form biodata, form pendaftaran, form login, dan yang lainnya.

Table of Contents Show

Elemen input type=”password”
Elemen input type=”submit”
Radio Button
Tombol Submit
Atribut name
Bagaimana membuat form pada HTML?
Tag apa saja yang dapat digunakan dalam pembuatan form?
Jelaskan apa itu form pada HTML?
Apa tag HTML yang benar untuk membuat text input field?

Form memungkinkan pengguna berinteraksi dengan teks, grafik, atau yang lainnya yang ditampilkan pada browser. Form memiliki beberapa tipe elemen input seperti text, radio, submit dan yang lainnya. Sebelumnya, kita sudah membahas tentang elemen input type text. Nah, pada pembahasan kali ini, saya akan menjelaskan tentang penggunaan elemen input tipe password dan submit pada form di HTML. Untuk lebih jelasnya, mari simak penjelasan dibawah ini :

Elemen input type=”password”

Elemen input tipe password digunakan untuk membuat kotak teks tetapi semua teks yang ditulis ditampilkan dalam karakter lain seperti “*” untuk memberikan keamanan pada seluruh data yang dimasukkan.

Elemen input type=”submit”

Elemen input tipe submit digunakan untuk membuat tombol dimana tombol itu berguna untuk mengirimkan data form ke server untuk diolah. Adapun sintaks dari elemen tipe ini secara umum yaitu :

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

Untuk memperjelas sintaks diatas, saya akan jelaskan kembali kegunaan atribut value yang sudah dibahas pada tutorial sebelumnya. Atribut value pada elemen input tipe submit yang berupa button digunakan untuk menentukan teks yang ditulis pada button tersebut, jika tidak menuliskan atribut value juga tidak apa-apa.

Agar Anda lebih memahami penggunaan dari kedua tipe elemen input diatas, berikut dibawah ini contoh kode penulisan dan penggunaan kedua tipe elemen input tersebut di HTML :

<!DOCTYPE html>
<html>
 <head>
  <title>Penggunaan Tipe Input Password dan Submit di HTML Forms</title>
 </head>
 <body>
  <h4>Isilah formulir dibawah ini dengan baik dan benar ! </h4>
  <hr>
   <form action="proses_input.php" method="get">
    Nama Depan : <input type="text" name="nama_depan"> <br><br>
    Nama Belakang : <input type="text" name="nama_belakang"> <br><br>
    Email : <input type="text" name="email"> <br><br>
    Password : <input type="password" name ="password" maxlength="20"> <br><br>
    <input type="submit" value="SUBMIT">
  </form>
 </body>
</html>

Setelah kode diatas dijalankan pada browser maka akan tampil seperti gambar dibawah ini :

Nah, gambar diatas adalah contoh form yang belum diisi (masih kosong). Agar Anda dapat melihat perbedaan tampilan data pada kotak teks password, lihat contoh gambar dibawah ini :

Nah, apa yang akan terjadi ketika tombol submit Anda klik ? Setelah Anda klik tombol submit maka akan menuju pada URL atau lokasi dari file yang akan mengolah data di form tersebut. Pada contoh diatas, data pada form akan diolah oleh file proses_input.php ( Note : file proses_input.php adalah file kosong karena hanya merupakan contoh saja). Berikut contoh gambar addres bar web page setelah tombol submit di klik :

Nah, sekarang mari perhatikan addres bar pada gambar diatas. Sebelumnya, kita membuat form dengan menggunakan method GET. Method GET akan menampilkan data form yang akan dikirim di bagian akhir URL yang selanjutnya akan ditampung oleh action.

Jadi semua data yang Anda masukkan di form akan ditampilkan di address bar setelah URL seperti yang ditunjukkan oleh gambar address bar diatas. Sekian materi penggunaan element input type password dan input type submit pada form HTML. Semoga bermanfaat.

Editor: Muchammad Zakaria

“If you’re doing your best, you won’t have any time to worry about failure.” H. Jackson Brown, Jr.

Form adalah tag atau elemen HTML khusus yang digunakan untuk mengumpulkan data dari pengguna. Data yang diinput oleh pengguna dikirimkan ke server untuk diproses atau dihitung.

Tutorial sebelumnya : HTML Head

Tag form

Form HTML menggunakan tag form.

<form>
.
form elements
.
</form>

Form HTML berisi tag-tag HTML yang biasa digunakan untuk mengumpulkan data dari pengguna. Tag HTML ini biasa juga disebut dengan form elemen. Contoh form elemen adalah elemen atau tag input text, checkbox, radio button, submit button dan lain-lain. Tutorial ini mencoba membahas beberapa contoh form elemen. Tutorial selanjutnya akan membahas lebih detil untuk setiap jenis form element.

Referensi Belajar Form HTML

Tag Input

Tag input adalah elemen yang paling banyak dipakai di dalam form HTML. Tag input ditampilkan dengan berbagai variasi tergantung dengan jenis dan kegunaannya. Berikut beberapa contoh tag input.

<input type=”text”> untuk menampilkan satu baris input text.
<input type=”radio”> untuk menampilkan pilihan input berbentuk radio button.
<input type=”checkbox”> untuk menampilkan pilihan input berbentuk checkbox.
<input type=”submit”> untuk menampilkan input dalam bentuk tombol submit.
<input type=”button”> untuk menampilkan input dalam bentuk tombol.

Input Text

Input text berguna untuk membuat tag input yang menerima data text dalam satu baris. Di bawah ini contoh form yang berisi input text.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Tag Label

Tag label diperlihatkan pada contoh di atas. Tag label digunakan untuk memberikan label atau penjelasan pada setiap form elemen. Atribut for pada label harus sama dengan atribut id pada form elemen yang dijelaskan.

Radio Button

Radio button berguna untuk membuat input data berupa pilihan. Hanya satu input data yang bisa dipilih dengan menggunakan radio button.

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

Checkbox

Checkbox berguna untuk membuat input data berupa pilihan. Berbeda dengan radio button, pengguna bisa memilih satu atau lebih pilihan input data dengan menggunakan checkbox.

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

Tombol Submit

Tombol submit digunakan untuk mengirimkan data pada setiap form elemen ke URL tertentu pada server. Atribut action pada form berisi URL server tujuan pengiriman data.

<form action="/tutorial/html/action_page.html">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

Atribut name

Atribut name diperlukan untuk semua tag input yang berada di dalam form. Nilai atribut name biasanya mempunyai nilai yang sama dengan atribut id. Apabila tombol submit ditekan maka server akan menerima data dari dokumen HTML. Data ini berasal dari data yang diinput pengguna pada setiap form elemen. Server memerlukan atribut name untuk mengidentifikasi data yang diterima. Apabila atribut name tidak dicantumkan pada suatu form elemen, maka server akan gagal mengambil data dari form elemen tersebut. Contoh di bawah adalah cara penulisan form elemen yang salah, karena tidak mencantumkan atribut name pada input text.

<form action="/tutorial/html/action_page.html">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

Tutorial selanjutnya : Atribut Form HTML
Daftar tutorial : Tutorial Belajar HTML

Bagaimana membuat form pada HTML?

Untuk membuat form menggunakan bahasa HTML dapat mengunakan element HTML yaitu <form> … </form>. Dalam element form tersebut, harus ditambahkan element lain sesuai dengan jenis inputan yang dipakai yaitu element <input>, <label>, <textarea>, <select>, dan <button>. Kesemua element tadi akan kita bahas satu persatu.

Tag apa saja yang dapat digunakan dalam pembuatan form?

untuk proses penginputan data dari form akan kita bahas di materi PHP, MYSQL, dan JavaScript. tag yang digunakan untuk membuat form ini adalah <form> yang didalamnya bisa berupa <input>, <textarea>,<opstion> dan <select>.

Jelaskan apa itu form pada HTML?

Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web. Elemen Form dapat terdiri dari check box, radio button, menu, text box, text area, dan button.

Apa tag HTML yang benar untuk membuat text input field?

Salah satu tag yang sering digunakan untuk membuat field di HTML adalah tag <input>. Kode di atas akan menghasilkan field yang digunakan untuk mengisi nama.