Belajar HTML Part 23 - Form

Senin, 12 Maret 2018

Belajar HTML Part 23 - Form

HTML Form

Apa itu form?

Form atau bisa juga disebut sebagai daftar isian merupakan salah satu elemen dalam HTML yang digunakan untuk memasukan atau menginput data pada sebuah website.

Form sangat berguna dalam sebuah website, karena dengan adanya form sebuah halaman web menjadi web interaktif dan dinamis. Form juga merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.

Contoh form sederhana:

<!DOCTYPE html>
<html>
<body>

<form>
  Nama Depan:<br>
  <input type="text" name="namadepan">
  <br>
  Nama Belakang:<br>
  <input type="text" name="namabelakang">
  <br><br>
  <input type="submit" value="Submit">
</form> 

</body>
</html>

Gambar berikut adalah hasilnya:

Berikut adalah contoh form pendaftaran sederhana:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Form</title>
</head>
<body>

<h2>Contoh Form Pendaftaran</h2>

<form action=" form.html" method="get">
Nama: <input type="text" name="nama">
<br>
Email: <input type="text" name="email">
<br>
Password: <input type="password" name="Password" >
<br>
Jenis Kelamin : 
<input type="radio" name="jenis_kelamin" value="Laki-Laki" checked> Laki-Laki
<input type="radio" name="jenis_kelamin" value="Perempuan"> Perempuan
<br>
Hobi: <input type="checkbox" name="ngoding" checked> Ngoding
      <input type="checkbox" name="main_game"> Main Game
      <input type="checkbox" name="menulis"> Menulis
      <input type="checkbox" name="sepak_bola"> Sepak Bola
<br>
Asal:
 <select name="asal" >
     <option value="Kota Gorontalo" selected>Gorontalo</option>
     <option value="Kota Manado">Sulawesi Utara</option>
     <option value="Kota Palu">Sulawesi Tengah</option>
     <option value="Kota Kendari" >Sulawesi Tenggara</option>
     <option value="Kota Makassar" >Sulawesi Selatan</option>
 </select>
<br>
Komentar:
<textarea name="komentar" rows="4" cols="20">
Masukkan komentar Anda disini!
</textarea>
<br>
<input type="submit" value="Daftar" >
</form>

</body>
</html>

Gambar berikut adalah hasilnya:

Demikian pembahasan singkat mengenai form di HTML. Untuk belajar mengenai elemen-elemen form, input type pada form, dan atribut form, pelajari pada tutorial selanjutnya!
Semoga bermanfaat!

Sumber: https://www.w3schools.com