sebelum nya Say Hello dulu buat para blogger yang sudah mau meluangkan sedikit waktu nya untuk membuka blog Saya yang sangat sederhana ini. mungkin gak perlu banyak basa-basi, to the point aja ya...hehe
sesuai dengan judul nya, di Sini saya hanya akan menulis cara pembuatan Form sederhana pada HTML 5, tanpa menggunakan database, hanya form saja. kebetulan yang Saya post kali ini adalah menjadi Tugas Kuliah juga jadi selain niat nya untuk memenuhi permintaan Dosen sekalian bisa sambil berbagi juga hehehe (alibi). Untuk yang sudah pernah membuat form login dengan HTML 5, jika ada kesalahan dalam penulisan ini tolong segera dikoreksi.
Form Biodata
Kecamatan:
No Telephone :
Alamat Web :
E-mail :
Bagaimana kita memulai nya untuk membuat seperti di Atas?
1. Siapkan lembar kerja baru pada aplikasi Notepad atau Notepad++, tidak disarankan menggunakan Dreamwever karena kata Dosen saya itu tidak menjadikan kita pintar dan berkembang :D
2. Langkah berikut nya adalah ketik source code seperti ini untuk menampilkan teks "Form Biodata",
<!DOCTYPE html>
<html>
<head>
Form Biodata
</head>
</html>
3. Untuk membuat Form, code pertama yaitu,
<form action="" method="get"> dan di tutup dengan </form> sama seperti HTML versi sebelumnya
4. Selanjutnya untuk membuat Form Nama kita ketikkan,
Nama : <input type="text" name="nama_anda" size="25" value="" />
input type=”text”, maksudnya di sini adalah input yang akan dilakukan untuk mengisi form nama yang berupa teks, kalau berupa nomor inputannya adalah "number" tapi untuk input type "number" hanya support pada browser Google Chrome saja, pada Mozilla seperti nya belum mendukung setau saya,
name=”nama_anda”, ini adalah attribut dari nama,
size=”25”, untuk menambah panjang isian pada form.
5. Form Tempat/Tanggal Lahir,
Tempat/Tanggal lahir : <input type="date" name="Tempat/Tanggal_Lahir" />
input type=”date”, yaitu akan menampilkan pilihan tanggal, bulan dan tahun.
6. Form Jenis Kelamin
Jenis Kelamin : <input type="text" name="Jenis Kelamin" size="25" />
7. Form Alamat
Alamat : <input type="text" name="Alamat" size="25" />
untuk Form Alamat sama seperti Form Nama di atas
8. Form Kecamatan
<select name="Kecamatan">
<option values="1">Sumberbaru</option>
<option values="2">Tanggul</option>
<option values="3">gambirono</option>
<option values="4">Bangsalsari</option>
<option values="5">Rambipuji</option>
</select>
select name=”” dan option value=”” adalah elemen yang berbeda, “select name=”” itu adalah attributnya sedangkan “option value=”” adalah pilihan jika kita klik combobox kecamatan maka akan tampil pilihan kecamatan seperti Sumberbaru, Tanggul dll.
9. Form Nomor Telephone
No Telephone : <input type="tel" name="No_Telp" size="25" />
input type=”tel”, yaitu input untuk no telp, biasanya inputan berupa angka tapi saya coba huruf juga bisa. aneh memang! :D
10. Form Alamat Web
Alamat Web : <input type="url" name="Alamat_Web" size="25" />
input type : url = inputan berupa link/alamat web. apabila agan memasukkannya asal-asalan maka ketika disubmit akan mendapat peringatan bahwa harus memasukkan url yang benar seperti http://www.facebook.com/
11. Form E-Mail
E-mail : <input type="email" name="Email" size="25" />
input type =”email”, data yang agan inputkan berupa email, jika agan menginput Selain E-Mail maka akan mendapat peringatan bahwa yang harus diinputkan adalah email yang benar seperti xxxxxyyyyy@gmail.com
12. Tombol Action: Submit & Reset
<input type="submit" /> <input type="reset" />
13. Langkah Terakhir
Simpan source code di atas dengan nama form.html. Setelah disimpan, kemudian jalankan file tersebut menggunakan aplikasi browser, misal: Mozilla Firefox atau sejenisnya. Setelah file form.html dipanggil, kemudian akan tampil form seperti di atas! Selamat ber-eksperimen kawan!
Nama : Aditya Achmad. P
NIM : 1110651046
Jurusan : T. Informatika (di salah satu Universitas terkemuka di Jember) :D
terima kasih banyak atas infonya... :)
BalasHapussama2 bro.. :D
BalasHapusKok tulisan nama, jenis kelamin, dll itu gak ada ya? adanya cuman kotak2nya doang?? tolong penjelasannya kalo bisa kontakan mas, sya ada tugas buat website -_-
BalasHapuswasdasdas
BalasHapus