Belajar membuat form pada HTML panduan lengkap
Oke kita mulai saja pada pembahasannya.
Lalu apa sajakah point-point pembahasannya? Silahkan teman- teman lihat point-point pembahasan dibawah ini:
- Kerangka HTML dasar
- Membuat Bullet pada HTML
- Membuat List angka pada HTML
- Membuat Judul
- Pengerapan tag <p>
- forum input, (text, button, radio, checkbox, textarea).
- Hyperlink
Oke, setelah kalian mengetahui point-point pembahasannya tentunya itu akan mempermudah dalam belajar dan memahami tutorial kali ini.
Studi Kasus
Pada studi kasus kali ini kita akan membuat 3 file dengan nama (index.html , form.html, welcome.html).
Untuk hasil dari tutorial kali ini, silahkan kalian perhatikan gambar dibawah ini.
Hasil 1:
Pada gambar hasil pertama diatas merupakan hasil yang akan kita buat pada pada file pertama yaitu index.html
Hasil 2:
Pada gambar hasil ke 2 diatas merupakan hasil yang akan kita buat pada file kedua yaitu file form.html
Hasil 3:
Pada file ketiga kita akan membuat tampilan seperti gambar diatas pada file welcome.html
Oke sekarang kita mulai pada tahap pembahasan, silahkan kalian ikut pembahasan dibawah ini.
1. Halaman pertama file index.html
Membuat kerangka dan Judul
Pada file index.html ini kita terlebih dahulu akan membuat judul halaman serta bagaimana penerapan tag <h1>, <h2> dan tag <p>. Silahkan perhatikan gambar berikut.
Untuk scriptnya, silahkan perhatikan script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>HTML Challenge</title>
</head>
<body>
<h1>Forumkoding</h1>
<h2>Website/ Media Developer Santai Berkualitas</h2>
<p>Belajar dan Berbagi agar hidup ini semakin santai berkualitas</p>
</body>
</html>
Pembahasan script:
- <!DOCTYPE html> = merupakan inisial dari html5 karena sublime ataupun vs code sekarang sudah support pada html5, namun jika kalian menghapus kode tersebut tidak masalah dan tidak perpengaruh apa-apa untuk pengembangan website yang masih sederhana.
- <html> = tag tersebut digunakan untuk membuat kerangkat html supaya document html dapat dikenali
- <title> = tag title ini digunakan untuk menampilkan judul pada bagian atas ketika kalian mengakses halaman suatu website.
- <h1>/ <h2> = tag tersebut digunakan untuk membungkun kata atau kalian yang akan kita jadikan sebagai judul. sebagain besar angka pada tag maka semakin kecil huruf yang akan tampil. contoh: pada script diatas tulisan Forumkoding lebih besar jika dibandingkan dengan penggunaan tag <h2>.
- <p> = pada tag p digunakan untuk membuat suatu paragraf, jika kita membuat kalimat namun tidak menggunakan tag p maka sama saja. namun ketika kita ingin memberikan style atau mengganti jenis tulisan maka tag ini sangat berguna.
Selanjutkan kita akan membuat bullet pada HTML. silahkan kalian perhatikan penjelasan dibawah ini.
Membuat Bullet Pada HTML
Pada gambar diatas kita dapat melihat, terdapat tiga buah bullet. Lalu bagaimana cara untuk membuatnya?
Silahkan kalian perhatikan script dibawah ini:
<h3>Benefit Belajar di forumkoding</h3>
<ul>
<li>Mendapatkan banyak pengetahuan yang bermanfaat</li>
<li>Sharing knowledge</li>
<li>Diperuntukan untuk calon web developer terbaik</li>
</ul>
Penjelasan Script:
Pada gambar diatas kita dapat melihat terdapat tiga buah data yang ditampilkan dengan mengunakan list angka dan terdapat hyperlink, lalu bagaiman cara kita membuatnya?
- <h3> = tag tersebut digunakan untuk membuat judul dengan ukuran yang tidak begitu besar
- <ul> = tag tersebut sangat perperan tenting dalam membuat simbol bullet pada html yang tentunya diikuti oleh tag <li>.
- <li> = tag ini digunakan untuk menampilkan data-data yang ingin ditampilkan dalam bentuk list.
Selanjutnya tahap terakhir dalam membuat tampilan halaman pertama, kita akan membuat list, tidak menggunakan bullet tetapi menggunakan angka.
Membuat List Angka Pada HTML
Silahkan kalian perhatikan script dibawah ini:
<h3>Cara mendaftar</h3>
<ol>
<li>Mengunjungi Website ini</li>
<li>Mendaftar di <a href="form.html">Form Sign Up</a></li>
<li>Selesai!</li>
</ol>
Penjelasan script:
- <h3> = digunakan untuk membuat judul dengan ukuran yang tidak terlalu besar.
- <ol> = tag ini digunakan untuk dapat menampilkan angka berupa list yang tentunya diikuti oleh tag <li>.
- <li> = tag ini digunakan untuk menampilakan data dalam bentuk list
Untuk script lengkapnya pada tampilan pertama, silahkan teman- teman perhatikan script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>HTML Challenge</title>
</head>
<body>
<h1>Forumkoding</h1>
<h2>Website/ Media Developer Santai Berkualitas</h2>
<p>Belajar dan Berbagi agar hidup ini semakin santai berkualitas</p>
<h3>Benefit Belajar di forumkoding</h3>
<ul>
<li>Mendapatkan banyak pengetahuan yang bermanfaat</li>
<li>Sharing knowledge</li>
<li>Diperuntukan untuk calon web developer terbaik</li>
</ul>
<h3>Cara mendaftar</h3>
<ol>
<li>Mengunjungi Website ini</li>
<li>Mendaftar di <a href="form.html">Form Sign Up</a></li>
<li>Selesai!</li>
</ol>
</body>
</html>
Selanjutkan kita akan membuat halaman form pada html, silahkan teman- teman perhatikan pembahasan dibawah ini:
2. Halaman Kedua File form.html
Pembuatan Kerangka
Untuk membuat form pada halaman ke dua, pertama kita akan membuat kerangka html seperti gambar berikut:
Untuk scriptnya silahkan perhatikan kembali script dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>HTML Challenge</title>
</head>
<body>
<h1>Buat Account Baru!</h1>
<h3>Sign Up Form</h3>
<div class="input_text">
<form action="welcome.html">
</form>
</div>
</body>
</html>
Penjelasan Script:
- <div> = tag div digunakan untuk membuat bagian-bagian pada HTML, tag ini sering dipakai ketika pembuatan suatu halaman yang sudah komplex
- <form> = tag ini digunakan untuk membuat aksi pada form, karena pada file kedua ini kita akan membuat form. maka tentunya kita wajib untuk mempelajari pengguna form terlebih dahulu.
Pembuatan Input Type Text
Input tipe text ini digunakan untuk dapat menginputkan berikut huruf, kata, ataupun kalimat, untuk hasil penerapan. Silahakan perhatikan gambar dibawah ini:
Lalu bagaimana cara untuk membuatnya?, silahkan teman- teman perhatikan script dibawah ini:
<p><label>First name:</label></p>
<p><input type="text" name="first_name"></p>
<p><label>Last name:</label></p>
<p><input type="text" name="last_name"></p>
Penjelasan Script:
- <label> = label digunakan untuk membuat penamaan pada form input, ini digunakan supaya penamaan tersusun dengan rapi.
- <input type="text'> = digunakan untuk membuat form inputan berupa text.
Pembuatan Input Radio
pada pembuatan input radio digunakan untuk memilih antara satu dari banyaknya data yang disediakan. silahkan perhatikan gambar berikut:
Lalu bagaiman untuk dapat membuat input tipe radio tersebut?. silahkan teman- teman perhatikan kode dibawah ini:
<p>Gender:</p>
<input type="radio" name="gender" value="Male">Male</br>
<input type="radio" name="gender" value="Female">Female</br>
<input type="radio" name="gender" value="Other">Other
Penjelasan Script:
- <input type="radio"> = digunakan untuk dapat memilih salah satu dari beberapa data yang disediakan. untuk contoh penerapannya pada jenis kelamin seperti diatas.
- name = pada input type radio name yang digunakan harus sama tentunya supaya fungsinya berjalan dengan apa yng diharapkan.
Membuat Select Option
Select option digunakan untuk menampilkan data data dengan cara memilih salah satu, setiap data tersebut mempunya value-value yang berbeda. Silahakan perhatikan gambar dibawah ini:
Dalam gambar diatas, terlihat data bahasa dari beberapa negra yang ditampilkan, untuk script pembuatannya silahkan teman- teman ikuti script dibawah ini:
<p>Nationality:</p>
<select name="nationality">
<option value="indonesian">Indonesian</option>
<option value="Singaporean">Singaporean</option>
<option value="malaysian">Malaysian</option>
<option value="australian">australian</option>
</select>
Penjelasan Script:
- <select> = tag tersebut digunakan untuk membuat menu select supaya dapat menampung data data yang akan ditampilkan.
- <option> = tag ini digunakan untuk menyimpan data supaya dapat dipilih.
Pembuatan CheckBox
CheckBox ini digunakan untuk dapat memilih data lebih dari satu, untuk lebih jelas silahkan perhatikan gambar dibawah ini:
Pada gambar diatas terlihat, admin memilih 2 bahasa yaitu indonesi dan inggris, lalu bagaiman untuk dapat membuatnya?
Silahkan perhatikan kode berikut:
<p>Language Spoken:</p>
<input type="checkbox" name="indonesia">Bahasa Indonesia</br>
<input type="checkbox" name="english">English</br>
<input type="checkbox" name="other">Other
Penjelasan Script:
- <input type="checkbox"> = digunakan untuk membuat tombol checkbox yang dapat memilih lebih dari satu data.
- </br> = digunakan untuk melakukan enter pada HTML.
Membuat TextArea dan Button
Textarea digunakan untuk dapat menginputkan data yang banyak dapat satu kolom, sedangkan button digunakan untuk memberi aksi. Untuk penerapannya silahkan perhatikan gambar berikut:
Nah pada bagian dibawah terlihat ada kolom kotak, serta button. Lalu bagaiman untuk membuatnya? silahkan teman- teman perhatikan script dibawah ini:
<p>Bio:</p>
<textarea name="bio" cols="35" rows="10"></textarea><br>
<input type="submit" name="signup" value="Sign Up">
Penjelasan Script:
- <textarea> = pada tag tersebut digunakan untuk membuat inputan dengan data yang diinputkan banyak.
- <a href=""> = digunakan untuk membuat link
- <input type="button"> = digunakan untuk membuat tombol aksi.
Sebetulnya kita sudah membuat aksi pada <form action=""> untuk dapat memberikan aksi pada tombol button.
3. Halaman Ketiga File welcome.html
Untuk halaman ketiga ini, maka akan tampil seperti gambar berikut ini:
Untuk scriptnya silahkan perhatikan script berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>HTML Challenge</title>
</head>
<body>
<h1>SELAMAT DATANG!</h1>
<P><h2>Terima kasih telah bergabung di Forumkoding</h2></P>
</body>
</html>
Oke, Kita telah belajar banyak hal pada tutorial kali ini, mudah-mudahan tutorial yang admin sampaikan dapat bermanfaat untuk pembaca.
Terimakasih telah berkunjung dan membaca tutorial kali ini, Semoga bermanfaat -- salam Success:)
By: Muhammad Rizal Supriadi
