Alhamdulillah kali ini penulis sudah mulai memperoleh koneksi wifi yang gacor, sehingga kita bisa kembali melanjutkan semangat belajar untuk menjadi seorang front end web development. Bahasa inggris teman-teman tidak bagus? Tenang saja, penulis juga demikian, tapi yakin sajalah jika melihat videonya pasti kalian akan paham dengan yang diajarkan. Tapi eitss kali ini penulis akan membuatnya dalam bentuk narasi teks pada artikel yak.
Jadi baru saja penulis belajar tentang pondasi untuk menjadi seorang front end web develompment yang dimana kali ini penulis sampai pada bab semantic dalam HTML, jadi sedikit banyak belajar tag-tag yang ada dalam HTML, seperti itu. Oya disini penulis ngga akan banyak teori karena ini ilmu praktek, sebab dari kemaren penulis sudah mempelajarinya akan tetapi ketika lepas tangan dari videonya penulis sama sekali blank. Asumsi penulis ini haru diperaktekan dan didokumentasikan.
Nah baiklan dalam video tersebut seperti biasa, awalnya kita diminta membuat file baru dalam sublime kemudian save dengan nama form.html. Selanjutnya buatlah struktur html page standar, disublime tinggal ketik <htm kemudian enter maka jika fitur auto completion sudah aktif akan langsung muncul script standarnya. Selanjutnya pada bagian title beri nama Form page. Contohnya seperti dibawah.
<!DOCTYPE html>
<html><head>
<title>Form Page</title>
</head>
<body>
</body>
</html>
Setelah itu kita membuat form tags <form></form> dalam body tag. <form> berfungsi untuk menampung berbagai macam element yang berkaitan dengan suatu form. Selanjutnya didalam tag <form> dipilih tag <fieldset> untuk menampung semua element yang ada dalam form tersebut. Tag <fieldset> berfungsi sebagai pengelompok berbagai macam objek form menjadi satu kelompok, contohnya seperti dibawah.
<form>
<fieldset>
</fieldset>
</form>
</body>
Berikutnya kita akan membuat berbagaimacam isi form seperti firstname, lastname, gender yang terdiri dari male dan female, lalu ada juga Country of Origin, Notes dan yang terakhir tombol registrasi untuk mensubmit.
Firstname dan lastname menggunakan input type berupa text agar menjadi suatu kolom isian yang dapat diisi user.
<label>Lastname:</label><input type="text" name=""> <br>
Kemudian Gender menggunakan input type berupa radio yang fungsinya kurang lebih seperti multiple choice dimana kita memilih satu dari beberapa pilihan.
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<br>
Sedangkan Country of Origin menggunakan tag select yang didalamnya berisi beberapa option seperti France, Italy dan United Kingdom.
<select>
<option>France</option>
<option>Italy</option>
<option>United Kingdom</option>
</select>
<br>
Untuk Notes menggunakan tag <textarea> agar dapat menampung karakter lebih banyak dengan ukuran cols="80" dan rows="10"
<textarea cols="80" rows="10">
</textarea>
<br>
<br>
dan yang terakhir tombol register menggunakan input type submit dengan value namanya.
<input type="submit" value="Please Register">
Semua menggunakan tag <br> untuk memberi jarak dan semua ditulis dalam tag <fieldset>
Penulisan lengkap seperti dibawah ini disertai dengan output yang dihasilkan.
<!DOCTYPE html>
<html>
<head>
<title>Form Page</title>
</head>
<body>
<form>
<fieldset>
<label>Firstname:</label><input type="text" name=""> <br>
<label>Lastname:</label><input type="text" name=""> <br>
<label>Gender:</label>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female
<br>
<label>Country of Origin</label>
<select>
<option>France</option>
<option>Italy</option>
<option>United Kingdom</option>
</select>
<br>
<label>Notes:</label>
<textarea cols="80" rows="10">
</textarea>
<br>
<br>
<input type="submit" value="Please Register">
</fieldset>
</form>
</body>
</html>
Update!!
Agar apa yang ditulis dalam teks memperoleh hasil maka beri nama pada setiap inputnya seperti firsname, lastname, country pada tag <select> dan notes pada tag <textarea>, kemudian menambahkan value pada input yang berupa radio button, value gender berupa male dan female. Dan terakhir methodnya jangan lupa diganti post, untuk proses selanjutnya biasanya akan diserahkan pada kaka kaka back-end nya.
jadi untuk code lengkapnya
<!DOCTYPE html>
<html>
<head>
<title>Form Page</title>
</head>
<body>
<form method="POST">
<fieldset>
<label>Firstname:</label><input type="text" name="firstname"> <br>
<label>Lastname:</label><input type="text" name="lastname"> <br>
<label>Gender:</label>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
<br>
<label>Country of Origin</label>
<select name="country">
<option>France</option>
<option>Italy</option>
<option>United Kingdom</option>
</select>
<br>
<label>Notes:</label>
<textarea name="notes" cols="80" rows="10">
</textarea>
<br>
<br>
<input type="submit" value="Please Register">
</fieldset>
</form>
</body>
</html>
0 Komentar