auhtor

Andre Rio 06 Jul 2021

#9 Belajar Membuat Form Di HTML








Beelajar Membuat Form Di HTML - Pernakah kamu mengunjungi sebuah wesbite yang dimana kita di haruskan untuk login atau resgister akan di suruh mengisi data diri terlebih dahulu seperti Nama , Email , dan juga Password. Agar nantinya kita dapat login atau membuat akun pada website tersebut.



Form pada Html


img


Ada bermacam-macam tipe Form pada Html contohnya seperti Form message atau Form login dan sebagainya.

Namun perlu di ingat kita hanya membuat Form hanya Html saja yang berarti tidak termasuk membuat database nya, itu beda lagi materinya mungkin di pertemuan mendatang kita akan mempelajari hal tersebut.

Untuk membuat Form mengunkan Tag <form> yang didalam nya terdapat juga Tag <input>, <textarea>, <option>, <button>, <label>, dan <select>.



Tag Form


Dalam Tag <form> ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. dan biasanya nilai yang dikirem berupa alamat dari sebuah halaman untuk memproses data inputan. dan atribut yang kedua berupa method. method ini menjelaskan bagaimana data yang akan dikirim oleh web browser. nilai dari method ini biasnya Get atau Post.


Code:

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



Tag Input


Tag Input merupakan tag yang akan digunakan dalam form pengisian. tag Input ini mempunyai banyak sekali tipe yang bisa digunakan misalkan isian teks, password, checkbox, radiobutton, sampai dengan tombol submit berada dalam Tag <input>.

Sebagai contoh berikut merupakan tipe beberapa tipe dari Tag Inpput:

  • <input type="text"> Textbox yang bisa menerima inputan text misalkan username atau berupa inputan text yang pendek.

  • <input type="password"> Textbox yang menerima inputan text, akan tetapi text yang diinput akan di tampilkan sebagai tanda bintang atau titik, textbox ini biasanya digunakan untuk inputan password.

  • <input type="submit"> Inputan ini berupa tombol (button) yang nantinya memproses data inputan dari form tersebut.

  • <input type="checkbox"> Inputan berupa checkbox yang dapat di ceklis oleh user.

  • <input type="radio"> Inputan yang berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang disediakan. salah satu contoh penggunaan dari radio ini adalah jenis kelamain.


Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Form Pada Html</title>
 </head> 
 <body>
   <form>
    Username: <input type="text" name="username"></br>
  
   </form>
 </body>
</html>

Note: Atribut name name="nama" merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh web server.


Hasilnya:

img

Kita dapat menambahkan text di samping Tag <input> namun agar lebih baik mengunakan Tag Label contoh <label> Username </label>.


Menambahkan Password

Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Form Pada Html</title>
 </head> 
 <body>
   <form>
    Username: <input type="text" name="username"></br>
    Password: <input type="password" name="password"></br>
   </form>
 </body>
</html>


Hasilnya:

img

Pada saat kita memasukan inputan password maka akan secara otomatis di sembunyikan.



Tag Textarea




```html
<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Form Pada Html</title>
 </head> 
 <body>
   <form>
    Username: <input type="text" name="username"><br/>
    Password: <input type="password" name="password"><br/>
    <textarea> Message </textarea>
   </form>
 </body>
</html>


Hasilnya:

img



Tag Select


Tag <select> merupakan Tag yang digunakan untuk user memilih data yang sudah disediakan. Dalam penggunakan <select> selelau diikuti oleh <option> yang nantinya digunakan untuk membuat sebuah pilihan.


Code:

<select>
	<option>Otaku</option>
	<option>Wibu</option>
</select>
<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Form Pada Html</title>
 </head> 
 <body>
   <form>
    Username: <input type="text" name="username"><br/>
    Password: <input type="password" name="password"><br/>
    <textarea> Message </textarea><br/>
    <select>
    <option>Otaku</option>
    <option>Wibu</option>
    </select>
   </form>
 </body>
</html>


Hasilnya:

img


Untuk lebih jelasnya membuat form dengan menggunakan Html, contoh berikut ini:


Code

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Form Pada Html</title>
 </head> 
 <body>
    <form>
    nama : <input type="text" name="nama"><br/>
    alamat : <input type="text" name="alamat"></br/>
    password : <input type="password" name="pass"><br/>
    Jenis Kelamin : 
    <input type="radio" name="jk" value="laki-laki" checked /> 
      Laki - Laki
    <input type="radio" name="jk" value="perempuan" /> 
      Perempuan
    <br/>
    bahas pemograman yang dikuasai :
    <input type="checkbox" name="html"> HTML
    <input type="checkbox" name="css"> CSS
    <input type="checkbox" name="javascript"> Javascript
    <br/>
    kota asal :
    <select>
    <option>Jakarta</option>
    <option>Bitung</option>
    </select>
    <br/>
    pesan anda :
    <textarea>
    
    </textarea>
     <br/>
    <input type="submit" value="Kirim">
    </form>
 </body>
</html>


Hasilnya:

img



Beginilah cara membuat Form pada Html cukup sederhana bukan. Jika ingin mempercantik tampilnya bisa mengunakan Css.






🚀 Komentar




Banner