loading...

Friday, May 13, 2016

Cara Membuat Form Input Biodata Menggunakan HTML5 (Desain Website)

Baca Juga

Assalamualaikum.

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 :

Form Input HTML5

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:

  1. […] 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 […]

    ReplyDelete
  2. […] 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 […]

    ReplyDelete
  3. […] ,  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 […]

    ReplyDelete

Artikel Lainnya

loading...