Dhadiansyah Blog: Membuat Form HTML

Minggu pagi ga ada kerjaan, pengen belajar tentang technical writer bingung apa yang mau dipelajarin? Padahal udah tinggal besok panggilan interview buat jadi technical writer di salah satu Bank swasta di Jl. MT Haryono Jakarta Timur. Sambil cari-cari referensi di mbah Google buat belajar jadi technical writer, sekalian lanjut belajar bikin form di HTML aja lah.

Form HTML fungsinya untuk meng-input atau memasukan data yang akan dikirim dan di proses ke server. Tag <form>...</form> ini paling penting untuk pembuatan web dinamis. Di dalam tag form terdapat satu atau beberapa element seperti "<input>" "<label>" "<select>" "<textarea>" dan lain-lain. Di sini ane belajar garis besarnya aja atau yang paling sering digunakan untuk membuat website.

<input>

Tag <input> merupakan tag atau element yang paling sering digunakan agar user bisa memasukan data/input data. Element tersebut memiliki beberapa atribut seperti accept, align, name, type, value dan lain-lain. Dengan tag <input> tersebut kita dapat membuat Text Box, Password Box, Check Box, Radio Button, Submit, Reset dan lain-lain.

* Text Box

Textbox digunakan agar user dapat menginput data yang berupa text. Contoh penggunaan:

Nama Depan: <input type="text" name="nama_depan">

Nama Belakang: <input type="text" name="nama_belakang">

* Password Box

Password box digunakan untuk user menginput password. Contoh penggunaan:

* Check Box

Checkbox digunakan agar user dapat memilih satu atau beberapa pilihan. Contoh penggunaan:

<input type="checkbox" name="komik" value="Naruto">Naruto

<input type="checkbox" name="komik" value="OnePiece">One Piece

<input type="checkbox" name="komik" value="Bleach">Bleach

* Radio Buttons

Radio Buttons berfungsi agar user hanya memilih satu pilihan. Contoh penggunaan:

<input type="radio" name="Jenis_Kelamin" value="Pria">Pria

<input type="radio" name="Jenis_Kelamin" value="Wanita">Wanita

* Submit Button

Submit Button berfungsi untuk mengirim form yang telah di isi oleh user ke server. Contoh penggunaan:

* Reset Button

Reset button digunakan untuk menghapus atau membuat form yang telah di isi user kembali ke nilai default. Contoh penggunaan:

<label>

Tag <label> berfungsi untuk mendefinisikan sebuah label untuk element <input>. Untuk attribut "for" dari tag <label> harus sama dengan attribut id element terkait. Contoh penggunaan:

<label for="nama_depan">Nama Depan</label>

<label for="nama_belakang">Nama Belakang</label>

<select>

Tag <select> digunakan untuk membuat list drop down biasanya di dalam tag tersebut terdapat element <option> sebagai list yang bisa dipilih oleh user. Untuk contoh penggunaan bisa di lihat di bawah:

<option value="">Silahkan Pilih</option>

<textarea>

Tag <textarea> berfungsi untuk menyimpan atau menampung karakter. Ukuran text area dapat kita tentukan dengan mengubah attribute cols (jumlah kolom) dan rows (jumlah baris). Berikut contoh penggunaan text area:

<textarea rows="4" cols="50">Deskripsikan diri anda</textarea>

Nih form sederhana beserta gambar hasil jadinya yang ane bikin dari penjelasan sederhana di atas, agak panjang snytax-nya dan selamat menikmati meng-coding. Jangan di copy-paste, usahain di ketik ulang aja biar ada yang nyangkut-nyangkut di otak, hehehe:

<html>

<head>

<title>Belajar Form</title>

</head>

<body>

<form>

<label for="nama_depan">Nama Depan</label>

<label for="nama_belakang">Nama Belakang</label>

<input type="text" name="nama_belakang" id="nama_belakang"><br>
Jenis Kelamin

<label for="wanita">Wanita</label><br>

<label for="pendidikan">Pendidikan Terakhir</label>

<option value="">Silahkan Pilih</option>

</select><br>

Komik Favorit

<label for="Naruto">Naruto</label>

<label for="One_P">One Piece</label>

<label for="bleach">Bleach</label>

<label for="Death_N">Death Note</label>

<label for="Fairy_Tail">Fairy Tail</label>

<label for="Conan">Conan</label>

<label for="Hunter">Hunter X Hunter</label><br>

<textarea rows="4" cols="50" id="deskripsi">Deskripsikan diri anda

</textarea><br><br>

</form>

</body>

</html>

Dari contoh gambar di atas, agak sedikit berantakan tapi bisa di rapihin pake tag <table>. Untuk yang masih bingung tentang tag <table> bisa di klik Cara Membuat Tabel HTML. Nih ane sekalian bikin form yang udah dirapihin pake element Table.

<html>

<head>

<title>Belajar Form</title>

</head>

<body>

<form>

<table>

<tr>

<td><label for="nam_dep">Nama Depan</label></td>

</tr>

<tr>

<td><label for="nam_bel">Nama Belakang</label></td>

</tr>

<tr>

<td>Jenis Kelamin</td>

</td>

</tr>

<tr>

<label for="wanita">Wanita</label>

</td>

</tr>

<tr>

<td><label for="pendidikan">Pendidikan Terakhir</label></td>

<option value="">Silahkan Pilih</option>

</td>

</tr>

<tr>

<td>Komik Favorit</td>

<label for="Naruto">Naruto</label>

<label for="One_P">One Piece</label>

<label for="bleach">Bleach</label>

<label for="Death_N">Death Note</label>

<label for="Fairy_T">Fairy Tail</label>

<label for="Conan">Conan</label>

<label for="Hunter">Hunter X Hunter</label><br>

</td>

</tr>

<tr>

<td><textarea rows="4" cols="50">Deskripsi diri anda</textarea>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

Akhirnya kelar juga belajar tentang form di HTML. Tapi kalo di submit tulisannya bakalan ilang semua karna belum di bikin halaman buat menampilkan hasilnya. Untuk cara membuat tampilan halamanya akan dibuat pada tulisan selanjutnya, hehehe. Udah nemu juga buat jadi technical writer yang harus dipelajarin tentang SDLC (Systems Development Life Cycle), ERD (Entity Relationship Diagram) dan lain-lain yang pernah dipelajarin di masa-masa kuli ah dulu, sekarang ya udah lupa lah, hahaha. ~~Salam semangat buat para cewek-cewek Sexy di luar sana.~~

Dhadiansyah Blog

Pages

Membuat Form HTML

No comments:

Post a Comment