HIMANIFO UNIMMA
 Membuat Form di HTML Web Programming 

14:00:00, 15 November 2020

Web Programming

MEMBUAT FORM DI HTML

Formulir di HTML digunakan untuk mengumpulkan input pengguna, kemudian data tersebut dikirim ke server untuk diproses. Form di HTML dapat kita buat dengan tag <form>. 
Tag ini memiliki beberapa atribut yang harus diberikan, seperti:
1. action: url yang akan memproses form
2. method: metode pengiriman data.

Contoh membuat form sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Form di HTML</title>
</head>
<body>
<p>Note: form tidak memiliki elemen.</p>
<form action="http://localhost/prosess.php" method="GET">
<!-- elemen form di sini -->
</form>
</body>
</html>

Try Here >>

Pada contoh diatas, kita akan menyuruh file http://localhost/prosess.php untuk memproses data form. Ini nanti akan kita pelajari di PHP.
Kode HTML di atas, tidak akan menghasilkan apa-apa. Karena kita belum membuat elemen form-nya.
Ada beberapa jenis elemen yang sering digunakan pada form, diantaranya:
1. <label>
2. <input>
3. <select>
4. <textarea>

1. ELEMENT LABEL

Elemen <label> mendefinisikan label untuk beberapa elemen formulir.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Label Form di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="nama_buku"> Input Nama Buku: </label>
  <input type="text" name="nama_buku"/>
</form>
</body>
</html>

Try Here >>

2. ELEMENT INPUT

Element <input> adalah ruas yang dapat diisi dengan data.  
Field memiliki beberapa atribut yang harus diberikan:
1. type: type dari field.
2. name: nama field yang akan menjadi kunci dan variabel di dalam program.

Contoh membuat element input sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="nama_buku"> Nama Buku: </label>
  <input type="text" name="nama_buku"/>
</form>
</body>
</html>

Try Here >>

Ada beberapa jenis type yang sering digunakan pada input , diantaranya:
1. <input type="text">
2. <input type="number">
3. <input type="email">
4. <input type="password">
5. <input type="date">
6. <input type="time">
7. <input type="checkbox">
8. <input type="radio">
9. <input type="file">
10. <input type="submit">

2.1 ELEMENT INPUT TYPE TEXT

<input type = "text"> untuk input teks satu baris.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Text di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="nama_buku"> Nama Buku: </label>
  <input type="text" name="nama_buku"/>
</form>
</body>
</html>

Try Here >>

2.2 ELEMENT INPUT TYPE NUMBER

<input type = "number"> untuk input yang harus berisi angka.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Number di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="nomor_buku"> Nomor Buku: </label>
  <input type="number" name="nomor_buku"/>
</form>
</body>
</html>

Try Here >>

2.3 ELEMENT INPUT TYPE EMAIL

<input type = "email"> untuk input yang harus berisi email.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Email di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="email_anda"> Email Anda: </label>
  <input type="email" name="email_anda"/>
</form>
</body>
</html>

Try Here >>

2.4 ELEMENT INPUT TYPE PASSWORD

<input type = "password"> untuk input text yang akan disamarkan (ditampilkan sebagai tanda bintang atau lingkaran).
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Password di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="password_anda"> Password Anda: </label>
  <input type="password" name="password_anda"/>
</form>
</body>
</html>

Try Here >>

2.5 ELEMENT INPUT TYPE DATE

<input type = "date"> untuk input yang harus berisi tanggal.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Date di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="tanggal_lahir"> Tanggal Lahir: </label>
  <input type="date" name="tanggal_lahir"/>
</form>
</body>
</html>

Try Here >>

2.6 ELEMENT INPUT TYPE TIME

<input type = "time"> untuk input yang harus berisi waktu.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Time di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="jam_tidur"> Jam Tidur: </label>
  <input type="time" name="jam_tidur"/>
</form>
</body>
</html>

Try Here >>

2.7 ELEMENT INPUT TYPE CHECKBOX

<input type = "checkbox"> untuk input kotak centang memungkinkan kita memilih opsi lebih dari satu dari sejumlah opsi yang tersedia.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Checkbox di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <input type="checkbox" name="opsi[]" value="Sepeda">
  <label for="opsi">  Aku Memiliki Sepeda </label><br>
  <input type="checkbox" name="opsi[]" value="Mobil">
  <label for="opsi">  Aku Memiliki Mobil </label><br>
  <input type="checkbox" name="opsi[]" value="Pesawat">
  <label for="opsi">  Aku Memiliki Pesawat </label><br>
</form>
</body>
</html>

Try Here >>

2.8 ELEMENT INPUT TYPE RADIO

<input type = "radio"> untuk input yang memungkinkan kita memilih hanya salah satu opsi dari sejumlah opsi yang tersedia.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Radio di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <input type="radio" name="opsi" value="Sepeda">
  <label for="opsi">  Aku Memiliki Sepeda </label><br>
  <input type="radio" name="opsi" value="Mobil">
  <label for="opsi">  Aku Memiliki Mobil </label><br>
  <input type="radio" name="opsi" value="Pesawat">
  <label for="opsi">  Aku Memiliki Pesawat </label><br>
</form>
</body>
</html>

Try Here >>

2.9 ELEMENT INPUT TYPE FILE

<input type = "radio"> untuk input pilih file dan tombol "Jelajahi" untuk mengunggah file.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type File di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="unggah_file"> Pilih file: </label>
  <input type="file" name="unggah file"/>
</form>
</body>
</html>

Try Here >>

2.10 ELEMENT INPUT TYPE SUBMIT

<input type = "submit"> untuk tombol mengirimkan data formulir ke penangan formulir.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Input Form Type Submit di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
  <label for="email_anda"> Email anda: </label>
  <input type="email" name="email_anda"/>
  <label for="password_anda"> Password anda: </label>
  <input type="password" name="password_anda"/>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Try Here >>

3. ELEMENT SELECT

Elemen <select> mendefinisikan daftar drop-down yang memungkinkan kita memilih hanya salah satu opsi dari sejumlah opsi yang tersedia.
Contoh:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Select Form di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
<label for="warna_favorit"> Warna favoritmu: </label>
<select name="warna_favorit">
  <option value="merah"> Merah </option>
  <option value="kuning"> Kuning </option>
  <option value="hijau"> Hijau </option>
</select>
</form>
</body>
</html>

Try Here >>

4. ELEMENT TEXT AREA

Elemen <textarea> untuk input teks lebih dari satu baris.
Elemen ini memiliki atribut sebagai berikut:
1. rows: menentukan jumlah baris yang terlihat di textarea
2. cols: menentukan lebar yang terlihat di textarea

Berikut contoh element text area:

<!DOCTYPE html>
<html>
<head>
<title>Membuat Text Area Form di HTML</title>
</head>
<body>
<form action="http://localhost/prosess.php" method="GET">
<label for="komentar_anda"> Komentar anda: </label>
<textarea name="komentar_anda" rows="10" cols="30">
Himanifo adalah website favorit saya.
</textarea>
</form>
</body>
</html>

Try Here >>

MUDAH KAN ?? SELANJUTNYA..

Pengenalan PHP Web Programming | HIMANIFO UNIMMA →

Jika ada pertanyaan bisa gabung diskusi dibawah atau kontak langsung
Mail :
ajiwahyu12592@gmail.com

#Himanifo Unimma
#Membuat Form Di HTML
#Belajar Web Programming
#Himpunan Mahasiswa Jurusan Teknik Informatika

Gabung Diskusi