Cara Membuat Form - HTML

Untuk proses pengiriman atau mendapatkan data dari user bisa menggunakan tag <from>. Ada beberapa jenis elemen dalam tag ini. Antara lain input, checkbox, select, radi, button textarea, dan lainnya. Untuk kali ini saya akan membahas element-element yang sering digunakan seperti yang disebutkan di atas.

Untuk menerapkan HTML ini dengan cara
<form>
Elemen form
</form>
Mari kita bahas satu-persatu cara dan kegunaan elemen dalam tag form

TEXT INPUT


Elemen ini sangat penting dan sering digunakan untuk mengumpulkan data. Dan biasa digunakan untuk proses login yang membutuhkan data pendek. Penerapannya bisa dilihat pada skrip di bawah ini:

<form>
Nama depan : <br />
<input type="text" name="nama_depan">
<br />
Nama Belakang : <br />
<input type="text" name="nama_belakang">
</form>
 Hasilnya akan tampil seperti di bawah ini
Nama depan :

Nama Belakang :
Selanjutnya untuk bisa mengirimkan data tersebut bisa dengan menambahkan input type button pada skrip di atas tadi. Penerapannya bisa lihat seperti dalam contok skrip di bawah ini
<form>
Nama depan : <br />
<input type="textname="nama_depan">
<br />
Nama Belakang : <br />

<input type="textname="nama_belakang">
<br />

<input type="button" value="KIRIM">
</form>
 Hasilnya akan tampak seperti di bawah ini:
Nama depan :

Nama Belakang :


Mari kita bahas setiap elemen dan atribute di dalamnya agar bisa lebih memahami penggunaanya. Pertama skrip ini diapit oleh tag <form> yang menjadi penanda sebuah formulir HTML. Ditambahkan dengan judul form yang berupa "Nama Depan dan Belakang" di setiap awal input form. Tag <input> adalah penanda sebuah elemen input dengan tipe "text" dengan nama "nama_depan". Penamaan input ini sangat penting untuk membedakan setiap data yang dikirim. Nama bisa berupa apa saja.

Itu adalah format sederhana, ada beberapa atribut lain yang bisa digunakan untuk mengatur penggunaan form input. antara lain

size : mengatur panjang ukuran inptu
maxlength : batas karakter yang bisa diinput
placeholder : memberi catatan pada input form

Mari kita coba terapkan dalam input form dengan skrip di bawah ini:
<form>
Nama depan : <br />
<input type="textname="nama_depan" size=6>
<br />
Nama Belakang : <br />

<input type="textname="nama_belakang" size=5 placeholder="Tuliskan" maxlength=10>
<br />

<input type="buttonvalue="KIRIM">
</form>
Dari skrip di atas akan menghasilkan form seperti di bawah ini:
Nama depan :

Nama Belakang :


Silahkan coba mengisi form di atas untuk melihat hasil sesuai batasan yang dijelaskan. Pada form input "Nama Belakang" dibatasi hanya bisa diisi sampai 10 karakter saja dengan menggunakan atribut maxlength.  placeholder berguna untuk memberi catatan dalam form seperti kata contoh "Tuliskan" pada input kedua. Untuk memberi ukuran panjang form menggunakan atribut size. atribut ini hanya sampai nilai 7. Jika ingin mengatur lebih variatif lagi ukuran inputnya bisa menggunakan CSS. tampilannya bisa diatur lebih fleksibel sesuai yang diinginkan.

Perlu diketauhi, formulir di atas belum bisa digunakan untuk mengirim data. Untuk proses lebih dalam lagi harus diterapkan dengan skrip PHP. Ini pelajaran tingkat lanjut dari bahasa pemrograman. Kita akan pelajari dikesempatan lain jika Anda sudah menguasai HTML sepenuhnya. Karena PHP adalah bahasa berbeda yang digunakan untuk mengolah data.

Cukup sekian dulu pelajaran mengenai form ini. Jenis form lainnya kita bahas pada artikel selanjutnya. Sampai jumpa