Belajar Pemula - Cara Membuat Form dengan HTML dan CSS
Form adalah elemen HTML yang berfungsi untuk meminta informasi dari user misalnya form login untuk meminta informasi username dan password dari user untuk proses login, form pendaftaran untuk meminta informasi detail tentang user agar bisa mendaftar, form input data untuk disimpan di database dan lain sebagainya.
Data yang didapat dari form akan diproses oleh server dengan menggunakan bahasa pemrograman web misalnya PHP, ASP, atau lainnya. Namun, pada kesempatan kali ini saya akan membahas mengenai pembuatan form melalui HTML beserta CSS nya.
HTML (Hypertext Markup Languange) adalah bahasa pengkodean yang menghasilkan dokumen Hypertext yang akan ditampilkan oleh halaman web, untuk memudahkan penggunaanya kepada para developer web dalam bahasa markup.
CSS (Cascading Syle Sheet) ialah kode pemrograman yang bekerjasama dengan dokumen HTML untuk mendefinisikan bagaiman suatu halamn web ditampilkan, yang bertujuan untuk menghias, dan mengatur tampilan/layout halaman suatu web agar menjadi elegan dan menarik.
Cara Membuat Form di HTML
Dalam pemuatan form di HTML bisa menggunakan notepad, sublime text, visual studio code, dll. Semuanya memiliki fungsi dan kegunaan yang tidak jauh berbeda atau bahkan bisa dibilang sama saja. Kali ini saya ingin membuat Formulir Pendaftaran Mahasiswa Baru dengan menggunakan visual studio code. Untuk lebih lengkapnya bisa langsung simak penjelasannya.
Berikut langkah-langkah proses pembuatannya :
1. Membuat folder sebagai tempat penyimpanan file HTML dan CSS.
2. Buka visual studio code. Kemudian klik file lalu klik open folder kemudian pilih folder sesuai dengan yang sudah kalian buat. Lalu buat file baru dengan nama "index.html"
3. Pada file HTML yang sudah dibuat, buat title terlebih dahulu. Title ini disesuaikan dengan akses judul yang akan kalian inginkan. Contohnya saya membuat title "Formulir Pendaftaran Mahasiswa Baru".
<!DOCTYPE html>
<html>
<head>
<title>Formulir Pendaftaran Mahasiswa Baru</title>
<link rel="stylesheet" href="style.css">
</head>
4. Buat tulisan dengan menggunakan marquee pada bagian atas formulir pendaftaran. Fungsi marquee ini yaitu untuk membuat tulisan menjadi berjalan seperti animasi.
<body>
<div class="name">
<div class="container">
<h2><marquee>LET'S BE A PART OF THE PELITA BANGSA UNIVERSITY
<i>"True Knowledge, Faith in God, and Godly Character"</i></marquee></h2>
</div>
</div>
5. Membuat judul formulir "FORMULIR PENDAFTARAN MAHASISWA BARU" menggunakan heading3.
<div class="form">
<div class="container">
<h3>FORMULIR PENDAFTARAN MAHASISWA BARU</h3>
6. Membuat kolom pengisian biodata mahasiswa dengan heading 4.
<h4>Biodata Mahasiswa</h4>
- Input type text
Type text digunakan untuk membuat field untuk teks biasa. Tidak ada pembatasan huruf jadi dapat diisi angka, huruf, dan karakter. Contoh untuk menanyakan nama dan nim. Untuk membuat tulisan keterangan pada kolom menggunakan "placeholder".
<tr>
<td>Nama</td>
<td><input type="text" name="NAMA" placeholder="Nama Lengkap"></td>
</tr>
<tr>
<td>NIM</td>
<td><input type="text" name="nim" placeholder="No. Pendaftaran"></td>
</tr>
<tr>
- Input type radio
Type radio berfungsi untuk membuat pilihan berupa bulatan.
Untuk membuat radio button di html tag <input> harus lebih dari 1 dan menggunakan type radio. Setiap tag harus memiliki name yang sama dan tag tersebut harus ditambahkan atribut value yang berisi data yang akan dikirimkan. Misalnya untuk membuat field jenis kelamin.
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" value="L" name="jenis_kelamin">Laki-laki
<input type="radio" value="P" name="jenis_kelamin">Perempuan
</td>
</tr>
- Input type date
Type date untuk membuat kolom isian tanggal. Saat user mengisinya maka akan ada tampilan kalender untuk mempermudah mengisinya.
<tr>
<td>Tanggal Lahir</td>
<td><input type="date" name="tanggal"></td>
</tr>
- Input type textarea
tag <textarea> digunakan untuk membuat field berupa text namun dengan ukuran yang lebih besar. Perbedaannya dengan input type text adalah pada ukurannya.
Penggunaan pada halaman web biasanya untuk menginputkan teks yang lebih banyak seperti paragraf atau bahkan konten tulisan 1 halaman. Berbeda dengan input type text yang hanya digunakan untuk menginputkan 1 kalimat.
<tr>
<td>Alamat</td>
<td>
<textarea name="alamat" cols="30" rows="4"></textarea>
</td>
</tr>
- Input type select option
Select option dibuat menggunakan tag <select> dengan atribut name. Lalu di dalam select ditambahkan daftar pilihan-pilihan menggunakan tag <option> dengan atribut value. Agar lebih jelas berikut contohnya :
<tr>
<td>Program Studi</td>
<td>
<select name="prodi">
<option value="">Pilih</option>
<option value="MI">Teknik Komputer</option>
<option value="SI">Teknik Elektronika</option>
<option value="TI">Teknik Informatika</option>
<option value="TD">Teknik Industri</option>
<option value="HI">Hubungan Internasional</option>
<option value="MB">Manajemen Bisnis</option>
</select>
</td>
</tr>
- Input type file
Type file untuk membuat form upload file. Tampilan field ini berupa tombol jika di-klik maka akan menampilkan file browser untuk memilih file nama yang akan diupload.
<tr>
<td>Foto 3x4</td>
<td>
<input type="file" name="dokumen">
</td>
</tr>
7. Membuat kolom pengisian data sekolah dengan heading 4. Caranya sama dengan pembuatan biodata mahasiswa, hanya tinggal disesuaikan dengan kolom yang dibutuhkan saja.
<form>
<h4>Data Sekolah</h4>
<form>
<table>
</tr>
<td>SLTA/Sederajat</td>
<td>
<input type="radio" name="SLTA[]" value="WNI">Negeri
<input type="radio" name="SLTA[]" value="WNA">Swasta
<td>
</tr>
<tr>
<td>Nama STLA/Sederajat</td>
<td><input type="text" name="Nama SLTA" ></td>
</tr>
<tr>
<td>Tahun Lulus</td>
<td><input type="text" name="Tahun Lulus" ></td>
</tr>
<tr>
<td>Jurusan</td>
<td><input type="text" name="Jurusan" ></td>
</tr>
</table>
<form>
8. Membuat kolom pengisian biodata orang tua/wali dengan heading 4. Caranya sama dengan pembuatan biodata mahasiswa dan data sekolah, hanya tinggal disesuaikan dengan kolom yang dibutuhkan saja.
<form>
<h4>Biodata Orang Tua/Wali</h4>
<form>
<table>
<tr>
<td>Nama</td>
<td><input type="text" name="NAMA" placeholder="Nama Lengkap"></td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>
<select name="pekerjaan">
<option value="">Pilih</option>
<option value="TB">Tidak Bekerja</option>
<option value="N">Nelayan</option>
<option value="P">Petani</option>
<option value="PT">Peternak</option>
<option value="PNS">PNS/TNI/Polri</option>
<option value="KS">Karyawan Swasta</option>
<option value="WS">Wiraswasta</option>
<option value="PN">Pensiunan</option>
</select>
</td>
</tr>
</tr>
<td>Pendidikan Terakhir</td>
<td>
<input type="radio" name="Pendidikan Terakhir" value="SMP">SD/Sederajat<br>
<input type="radio" name="Pendidikan Terakhir" value="SMP">SMP/Sederajat<br>
<input type="radio" name="Pendidikan Terakhir" value="SMP">SMA/Sederajat<br>
<input type="radio" name="Pendidikan Terakhir" value="SMP">Diploma/Sarjana<br>
<td>
</tr>
<tr>
<td>Alamat</td>
<td>
<textarea name="alamat" cols="30" rows="4"></textarea>
</td>
</tr>
<tr>
<td>Jumlah Penghasilan</td>
<td><input type="text" name="NAMA" ></td>
</tr>
<tr>
<td>Nomor NPWP</td>
<td><input type="text" name="NAMA" ></td>
</tr>
9. Membuat button from.
Untuk membuat tombol dalam form butuh element <button>. Ada dua tipe button yaitu :
- Submit, yaitu ketika diklik akan mengirimkan value dari name data yang dikirim.
- Reset, yaitu ketika diklik akan menghapus semua data yang telah diisi di formulir.
</tr>
<td><input type="submit" name="Kirim" value="Submit"></td>
<td><input type="reset" name="reset" value="Reset"></td>
</tr>
Penambahan Style dengan CSS
body {
background-image: url(backgrounds.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 100%;
padding-top: 30px;
padding-bottom: 50px;
}
h2 {
font-family: 'Poppins', sans-serif;
text-align: center;
padding: 0%;
}
h3 {
font-family: 'Poppins', sans-serif;
text-align: center;
padding-bottom: 20px;
padding-top: 20px;
}
h4 {
padding-left: 155px;
}
table {
padding-left: 155px;
}
table tr td {
padding-bottom: 8px;
padding-right: 52px;
}
.form .container {
width: 55%;
background-color: rgba(255, 177, 8, 0.226);
box-shadow: 0 0 10px 6px rgba(255, 196, 0);
margin: auto;
color: white;
padding-bottom: 20px;
padding-top: 2px;
}
.name .container {
width: 100%
margin: auto;
color: white;
}
Setelah semua kode sudah dibuat, coba tampilkan hasilnya dengan browser. Silahkan memodifikasi dan mengkreasikan sesuai dengan kebutuhan dan keinginan kalian. Semoga bisa bermanfaat dan membantu.
0 komentar:
Posting Komentar