Anak Males – Kali ini kita akan belajar membuat form di html. Kemarin kita sudah belajar membuat list html.
Web tidak hanya bertujuan untuk menyajikan informasi saja. Selain menyajikan informasi, web juga dapat digunakan untuk mengumpulkan data atau informasi dari pengunjung.
Salah satu cara untuk mengumpulkan data dari pengunjung melalui situs web adalah dengan menggunakan formulir.
Formulir web mirip dengan formulir yang ada di dunia nyata. Setelah diisi, formulir tersebut dapat diproses dengan menggunakan program komputer tertentu.
Pada tutorial ini, kita akan mempelajari cara membuat form di HTML. Namun, kita tidak akan membahas cara memproses data yang diisi pada form tersebut.
Mengolah data yang dikumpulkan melalui form merupakan topik pembahasan tersendiri. Oke, mari kita mulai belajar membuat form di HTML.
Cara Membuat Form HTML
Form HTML adalah elemen HTML yang digunakan untuk mengumpulkan data dari pengguna. Form terdiri dari elemen-elemen seperti input, button, dan select yang digunakan untuk mengumpulkan informasi dari pengguna.
Form dapat dikirimkan ke server melalui metode HTTP seperti GET atau POST. Form dapat digunakan untuk berbagai macam tujuan, seperti pengisian formulir pendaftaran, pemesanan produk, atau pencarian informasi.
Berikut ini adalah contoh sederhana form HTML:
<form action="/submit-form" method="post">
....
</form>
Dalam contoh di atas, elemen form memiliki atribut action yang menentukan URL tujuan form ketika dikirim, dan atribut method yang menentukan metode HTTP yang digunakan untuk mengirim form.
Elemen input digunakan untuk mengumpulkan data dari pengguna, dan elemen button digunakan untuk mengirim form ke server. Ada banyak tipe elemen input yang tersedia, seperti text, email, password, dan lain-lain, yang dapat digunakan sesuai dengan kebutuhan.
Apa itu Field
Field pada HTML adalah elemen HTML yang digunakan untuk mengumpulkan data dari pengguna. Field dapat berupa elemen input, select, atau textarea, yang digunakan untuk mengumpulkan informasi dari pengguna.
Field dapat dikirimkan ke server melalui form HTML dengan menggunakan metode HTTP seperti GET atau POST.
Contoh elemen field pada HTML adalah sebagai berikut:
Input field, Elemen input digunakan untuk mengumpulkan data dari pengguna dalam bentuk teks, angka, atau tipe data lainnya. Berikut ini adalah contoh elemen input untuk mengumpulkan data nama pengguna:
<label for="name">Nama:</label>
<input type="text" id="name" name="name">
Select field, Elemen select digunakan untuk menampilkan daftar pilihan yang dapat dipilih oleh pengguna. Berikut ini adalah contoh elemen select untuk mengumpulkan data negara asal pengguna:
<label for="country">Negara Asal:</label>
<select id="country" name="country">
<option value="indonesia">Indonesia</option>
<option value="malaysia">Malaysia</option>
<option value="singapore">Singapore</option>
</select>
Textarea field, Elemen textarea digunakan untuk mengumpulkan data dalam bentuk teks yang lebih panjang. Berikut ini adalah contoh elemen textarea untuk mengumpulkan data alamat pengguna:
<label for="address">Alamat:</label><br>
<textarea id="address" name="address" rows="4" cols="50"></textarea>
Cara Membuat Form Login HTML
Untuk membuat form login sederhana dengan HTML, pertama-tama buka aplikasi text editor seperti Notepad atau visual studio code. Kemudian, ketikkan kode HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Form Login</title>
</head>
<body>
<h1>Form Login</h1>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Kemudian, simpan file tersebut dengan nama yang sesuai dan ekstensi .html, misalnya “form-login.html”. Buka file tersebut di browser web untuk melihat hasilnya.
Untuk menambahkan fungsi login yang sesungguhnya, Anda perlu menambahkan kode JavaScript atau menggunakan server-side programming language seperti PHP atau Ruby untuk memproses data yang dikirim dari form tersebut.
Cara Membuat Form Contact HTML
Untuk membuat form contact sederhana dengan HTML, pertama-tama buka aplikasi text editor seperti Notepad atau Visual studio code. Kemudian, ketikkan kode HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Form Contact</title>
</head>
<body>
<h1>Form Contact</h1>
<form>
<label for="name">Nama:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="subject">Subject:</label><br>
<input type="text" id="subject" name="subject"><br>
<label for="message">Pesan:</label><br>
<textarea id="message" name="message" rows="5" cols="40"></textarea><br><br>
<input type="submit" value="Kirim">
</form>
</body>
</html>
Kemudian, simpan file tersebut dengan nama yang sesuai dan ekstensi .html, misalnya “form-contact.html”. Buka file tersebut di browser web untuk melihat hasilnya.
Untuk menambahkan fungsi yang memproses data dari form tersebut dan mengirimkannya ke alamat email tertentu, Anda perlu menambahkan kode JavaScript atau menggunakan server-side programming language seperti PHP atau Ruby.
Membuat Form Register HTML
Untuk membuat form register sederhana dengan HTML, pertama-tama buka aplikasi text editor seperti Notepad atau TextEdit. Kemudian, ketikkan kode HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Form Register</title>
</head>
<body>
<h1>Form Register</h1>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br>
<label for="password2">Konfirmasi Password:</label><br>
<input type="password" id="password2" name="password2"><br><br>
<input type="submit" value="Daftar">
</form>
</body>
</html>
Kemudian, simpan file tersebut dengan nama yang sesuai dan ekstensi .html, misalnya “form-register.html”. Buka file tersebut di browser web untuk melihat hasilnya.
Untuk menambahkan fungsi yang memproses data dari form tersebut dan menyimpan data tersebut ke dalam database atau mengirimkan email verifikasi, Anda perlu menambahkan kode JavaScript atau menggunakan server-side programming language seperti PHP atau Ruby.
Penutup
Baiklah mungkin kita cukupkan untuk belajar html kali ini, sampai jumpa di tutorial html lainnya.