Pada kesempatan kali ini saya akan coba posting tentang cara membuat form dengan HTML5. Bagi anda yang belum tau dengan HTML5 silahkan browsing dulu di situs lain. =D
Pada tutorial kali ini kita tidak akan menggunakan CSS, jadi hanya inti2nya saja dan sudah pasti tampilannya tidak menarik, jika ingin tampilannya menarik silahkan kreasikan sendiri. =D
Sekarang mari kita mulai, silahkan buka Notepad anda terlebih dahulu, kemudian ketikkan Koding berikut :
<! DOCTYPE html>
<head>
<title>Cara Membuat Form Dengan HTML5</title>
</head>
<body>
<!-- Berikut koding untuk membuat Form -->
<form action="proses.php" method="POST" enctype="multipart/form-data"> <!--Awal-->
Nama Lengkap : <input type="text" name="nama" required> <br><br> <!-- attribut <br> berfungsi untuk pindah baris -->
Alamat : <input type="text" name="alamat" required> <br><br>
Jenis Kelamin : <input type="radio" name="jk" value="Laki-Laki" required>Laki-Laki <input type="radio" name="jk" value="Perempuan" required>Perempuan <br><br>
Anak Ke : <input type="number" max="15" min="1" name="anakke" required> <br><br>
Agama : <select name="agama"><option>Islam</option><option>Kristen</option><option>Hindu</option><option>Budha</option></select> <br><br>
Warna Kesukaan Anda : <input type="color" name="warna"> <br><br>
Email : <input type="email" placeholder="emailanda@gmail.com" name="email" required> <br><br>
Password : <input type="password" name="password" required> <br><br>
Foto : <input type="file" name="foto" required> <br><br>
Tentang Anda : <textarea rows="4" cols="20" name="tentang" required></textarea> <br><br>
<input type="submit" name="simpan" value="SIMPAN"><input type="reset" value="RESET">
</form> <!--Akhir-->
</body>
</html>
Jika sudah silahkan simpan dengan nama index.html , kemudian jalankan di browser anda. Kalau di browser saya nih hasilnya :
Untuk Fungsi attribut2 yang telah kita gunakan diatas silahkan anda cari referensinya di situs lain atau coba2 aja sendiri. =D
Pada kesempatan berikutnya saya akan posting cara membuat database dan tabel menggunakan phpmyadmin untuk menyimpan hasil inputan di atas.
3 comments:
[…] saya sudah posting tentang cara membuat form input biodata menggunakan html5 dan Kesempatan kali ini saya akan posting cara membuat koneksi ke database menggunakan bahasa […]
[…] saya telah posting tentang cara membuat form input biodata menggunakan html5, Pada kesempatan kali ini saya akan posting cara membuat database dan table baru menggunakan […]
[…] , sekarang jalankan file index.html yang kita buat kemarin jika belum ada silahkan lihat cara membuat form input biodata dengan html5 (Pastikan file index.html tersebut anda simpan pada direktori C://wamp/www/), kemudian ketikkan url […]
Post a Comment