HIMANIFO UNIMMA
Membuat Form di HTML Web Programming
14:00:00, 15 November 2020
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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