RSS Feed
Twitter
Sebuah form diibaratkan sebagai sebuah formulir layaknya kita mengisi formulir di sebuah kertas. Di dalamnya pasti memuat dua bagian, bagian pertanyaan dan bagian jawaban. Bagian jawaban juga terbagi atas beberapa bentuk misalnya dengan menulis teks atau kita tinggal memilih (centang) jawaban yang sudah tersedia. Form dalam sebuah HTML juga demikian, terdiri dari bentuk jawaban yang berbeda-beda, atau biasa disebut dengan elemen. Elemen-elemen form dalam HTML misalnya berupa button, checkbox, option, select, text, dan textarea.
Berikut ini merupakan contoh penulisan syntax HTML tanpa menggunakan CSS. CSS merupakan sekumpulan set elemen-elemen yang digunakan untuk memperindah desain suatu layout HTML. Penggunaan CSS akan dijelaskan pada tutorial selanjutnya.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beautiful CSS-HTML Form</title>
</head>
<body>
<font size="+2"><b>Form Registrasi Sederhana (Dengan Berbagai Contoh Input)</b></font>
<br /><br />
<form action="proses.php">
<table>
<tr>
<td id="indeks"><label for="nama"><b>Nama</b></label></td>
<td><input type="text" name="nama" /></td>
</tr>
<tr>
<td id="indeks"><label for="tgllahir"><b>Tanggal Lahir </b></label></td>
<td><input type="text" name="tgllahir" /></td>
</tr>
<tr>
<td id="indeks"><label for="alamat"><b>Alamat</b> </label></td>
<td><input type="text" name="alamat" /></td>
</tr>
<tr>
<td id="indeks"><label for="email"><b>Email</b> </label></td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td id="indeks"><label for="password"><b>Password </b></label></td>
<td><input type="password" name="pin" maxlength="20" size="20"/></td>
</tr>
<tr>
<td id="indeks"><label for="kelamin"><b>Jenis Kelamin</b></label> </td>
<td><input type="radio" name="kelamin" value="Laki-Laki"/><label for="Laki-Laki">Laki-Laki</label>
<input type="radio" name="kelamin" value="Perempuan" /><label for="Perempuan">Perempuan</label></td>
</tr>
<tr>
<td id="indeks"><label for="minat"><b>Minat </b></label></td>
<td><input type="checkbox" name="minat" /><label for="politik">Politik</label><br />
<input type="checkbox" name="minat" /><label for="hiburan">Hiburan</label><br />
<input type="checkbox" name="minat" /><label for="sejarah">Sejarah</label><br />
<input type="checkbox" name="minat" /><label for="olahraga">Olahraga</label><br />
<input type="checkbox" name="minat" /><label for="teknologi">Teknologi</label>
</td>
</tr>
<tr>
<td id="indeks"><label for="pendidikan"><b>Pendidikan Terakhir </b></label></td>
<td>
<select name="pendidikan">
<option>SD</option>
<option>SMP</option>
<option>SMA</option>
<option>S1</option>
<option>S2</option>
<option>S3</option>
</select>
</td>
</tr>
<tr>
<td id="indeks"><label for="file"><b>Upload Foto </b></label></td>
<td><input type="file" name="picture" id="picture" accept="image/jpeg, image/gif"/></td>
</tr>
</table>
</form>
</body>
</html>
Hasil yang diperoleh tampak sebagai berikut :
12 comments:
Kalau bikin tabel bergaris bisa pake cara diatas kah? pake komponen apa lagi y?
@satrio : iya bisa, pake komponen tag table terus diberi style tabel bergaris...
Kalau bkin sintax action buat form regiatrsi gmn gan???biar ada di database data yg di input user
gan proses.php isinya tentang apa ?
terima kasih sudah berbagi ilmunya.
form htmlnya sederhana tapi bagus dan mudah dipahami, terima kasih
Halo kak selamat malam . Artikel nya sangat singkat dan mudah dimengerti kak . Tapi saran saya tolong tambahin penjelasan tentang atribut dan elemennya terlebih dahulu kak supaya lebih mudah dalam mengerjakan . Terimakasih kak atas artikelnya ditunggu lagi kedepannya artikel2 selanjutnya ya kak perkenalkan nama Roki Abdul Jalil, Nim 1922500192, kelompok SI2K , link kampus link kampus https://www.atmaluhur.ac.id/
Makasih gan atas ilmunya. Artikelnya mantap, sederhana untuk dipahami dan langsung ke inti masalah. Semoga update terus gan, ane gak sabar nunggu yang terbarunya. sekarang saya sudah mengerti cara membuat form dengan html.
Perkenalkan, nama saya Ricki Tri Putra, mahasiswa dari STMIK Atma Luhur Pangkalpinang, jurusan Sistem Informasi. Kalo ada waktu kunjungin juga ya web kami di : https://www.atmaluhur.ac.id/ Terima Kasih gan. Salam sukses untuk kita semua.
Terima Kasih gan Artikelnya. Sebelumnya saya tidak mengerti bagaimana prosedur membuat form di HTML. Setidaknya sekarang agan telah memberi gambaran bagaimana sih form yang kita buat di html itu. untuk kedepanya saya harap bisa update trus ya gan artikelnya mengenai html.
Perkenalkan nama saya Andika Aprianus
Kunjungi Website kampus kami di Link ini https://www.atmaluhur.ac.id/
artikel yang bagus sekali kak, saya sekarang jadi paham bagaimana cara membuat form/formulir di html,dan artikelnya juga mudah dipahami dan dimengerti. Semoga kedepannya kakak dapat berkarya lagi dalam membuat artikel yang sangat bermanfaat bagi saya dan juga orang lain.Perkenalkan nama saya Reza Anggraini (1922500196) dari kelompok SI2K dan kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/
artikel yang bagus sekali kak, saya sekarang jadi paham bagaimana cara membuat form/formulir di html,dan artikelnya juga mudah dipahami dan dimengerti. Semoga kedepannya kakak dapat berkarya lagi dalam membuat artikel yang sangat bermanfaat bagi saya dan juga orang lain.Perkenalkan nama saya Reza Anggraini (1922500196) dari kelompok SI2K dan kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/
artikel yang bagus sekali kak, saya sekarang jadi paham bagaimana cara membuat form/formulir di html,dan artikelnya juga mudah dipahami dan dimengerti. Semoga kedepannya kakak dapat berkarya lagi dalam membuat artikel yang sangat bermanfaat bagi saya dan juga orang lain.Perkenalkan nama saya Reza Anggraini (1922500196) dari kelompok SI2K dan kunjungi juga website kampus kami di https://www.atmaluhur.ac.id/
Posting Komentar