HTML merupakan hal yang bisa dikatakan urgent sekali untuk diketahui dalam pembuatan sebuah situs web. HTML memiliki banyak tag atau fungsi untuk dijadikan UI dalam sebuah situs web, salah satunya tag input.
Pada artikel kali ini kita akan mengenal lebih banyak tag input dan cara pembuatannya, oiya lupa. Juga hasil tampilannya 👌😁
Kita akan mengambil contoh tentang membuat sebuah form pendaftaran sederhana, yaitu dengan tampilan gambar dibawah ini :
Form gambar diatas diambil dari web ini, yang dibuat dengan Pemrograman Java
Langsung saja kita eksekusi dengan markup language HTML 🚀
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran HTML</title>
</head>
<body>
</body>
</html>
Baik, sampai sini kita akan menuliskan teks judulnya dulu
<body>
<center>
<b>FORMULIR PENDAFTARAN MAHASISWA BARU</b><br>
Tahun Akademik 2023/2024
</center>
</body>
Kita coba tampilkan hasilnya
Okey, berhasil untuk teks judulnya ya.
Input yang pertama kita akan buat adalah input text. Format penulisan untuk membuat form input teks adalah :
<input type="text" maxlength="30">
Kita tambahkan juga untuk labelnya, yaitu No. Pendaftaran. Menjadi :
<body>
<center>
<b>FORMULIR PENDAFTARAN MAHASISWA BARU</b><br>
Tahun Akademik 2023/2024
</center>
No. Pendafaran <input type="text" maxlength="30">
</body>
Kita lihat lagi bagaimana hasilnya sekarang :
Mari kita lanjutkan untuk bagian selanjutnya yaitu membuat opsi ( combobox ) :
Prodi yang diambil <select name="prodi" id="">
<option value="TI">Teknik Informatika</option>
<option value="SI">Sistem Informasi</option>
<option value="MI">Manajemen Informatika</option>
</select>
Combo box dalam HTML menggunakan tag <select>
Semakin banyak opsi yang ditawarkan, tambahkan saja sesuai dengan keinginan di bagian <option>
Tambahkan untuk baris "Nama Calon Mahasiswa"
Nama Calon Mahasiswa <input type="text" maxlength="30"><br>
Lalu bagian "Jenis Kelamin"
Jenis Kelamin <input type="radio" name="" id=""> Laki-Laki
<input type="radio" name="" id=""> Perempuan
Bagaimana hasilnya, check it out!
Kode lengkapnya bisa lihat :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran HTML</title>
</head>
<body>
<center>
<b>FORMULIR PENDAFTARAN MAHASISWA BARU</b><br>
Tahun Akademik 2023/2024
</center>
No. Pendafaran <input type="text" maxlength="30"><br>
Prodi yang diambil <select name="prodi" id="">
<option value="TI">Teknik Informatika</option>
<option value="SI">Sistem Informasi</option>
<option value="MI">Manajemen Informatika</option>
</select><br>
Nama Calon Mahasiswa <input type="text" maxlength="30"><br>
Jenis Kelamin <input type="radio" name="" id=""> Laki-Laki
<input type="radio" name="" id=""> Perempuan
</body>
</html>
Sampai bagian ini, sudah tinggal copy-paste saja ya kodenya untuk tempat lahir, tanggal dan seterusnya. Karena sama. Eits, tetapi khusus untuk tanggal lahir kita bisa ubah dengan kode :
Tanggal Lahir <input type="date">
Dengan hasil :
Tidak sama dengan contoh diatas ya 😁
Lanjutkan semuanya, sampai bisa menghasilkan tampilan mirip dengan Form Pendaftaran diatas. Kemudian tampilkan hasilnya di browser kita :
Tinggal tambahan untuk tombolnya, dibawah baris kode alamat email. Kita gunakan tag submit dan tag reset.
<input type="submit" value="Simpan"> <input type="reset" value="Batal">
Bagaimana hasilnya ?
Kode lengkap :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pendaftaran HTML</title>
</head>
<body>
<center>
<b>FORMULIR PENDAFTARAN MAHASISWA BARU</b><br>
Tahun Akademik 2023/2024
</center>
No. Pendafaran <input type="text" maxlength="30"><br>
Prodi yang diambil <select name="prodi" id="">
<option value="TI">Teknik Informatika</option>
<option value="SI">Sistem Informasi</option>
<option value="MI">Manajemen Informatika</option>
</select><br>
Nama Calon Mahasiswa <input type="text" maxlength="30"><br>
Jenis Kelamin <input type="radio" id=""> Laki-Laki
<input type="radio" id=""> Perempuan<br>
Tempat Lahir <input type="text"><br>
Tanggal Lahir <input type="date"><br>
Agama <select name="agama" id="">
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katholik">Katholik</option>
</select><br>
Alamat Lengkap <input type="text"><br>
No. Telepon <input type="text" name="phone"><br>
Alamat Email <input type="text"><br>
<input type="submit" value="Simpan"> <input type="reset" value="Batal">
</body>
</html>
Sip. Selesai syudah membuat form pendaftaran kita. Tapi tapi nggak enak dilihat, terlihat kurang rapi ya 👀
Bagaimana solusinya ? Tenaaaang!
Kita bisa menggunakan tag table untuk merapikan segala sesuatu dalam pembuatan situs web. Untuk penjelasannya akan dibahas pada artikel selanjutnya.
Terima kasih, mangatz ngulik!
🙆Tips : Cobalah untuk mengulik merapikan user interface form pendaftaran tersebut dengan table.
Tags:
HTML