Belajar HTML (Part 3)

Haii guys

Dipertemuan ini saya melanjutkan pembahasan tentang Belajar HTML (Part 3). Dari kalian ada gak sih yang ngedumel belajar HTML aja pake part-part segala? karena Belajar HTML tuh asik,panjang juga alias ga sedikit, kalo misalnya nih dilompatin sayang dong nanti nangis hehehe...

okey lanjutin yukk...


Tag from inputan HTML
<from>..........<form>
 = Tag untuk pemrosesan

Di dalam tag <form> ada beberapa elemen pendukung :
<input>
<select>
<option>
<textarea>
.....dsb

Attribute pada tag <form> :
1. Action = menuju ke link pemrosesan
    ex: <form action="proses.html">

2. Method = get (mengambil nilai) atau post (mengirim nilai)
    ex: <form method="get">

3. Enctype = encording type, saat di gunakan method post
    ex: <form enctype="multipart/form data">

4. Multipart/form-data = digunakan bila pemrosesan sebuah form mengandung file/gambar

5. Name = penamaan folder
    ex: <form name="f biodata">

6. Target = menentukan tempat setelah pemrosesan
    ex: <form target="_blank">

Form akan membuka tab baru di browser setelah pemrosesan

Tag <input>

Attribute pada tag <input> :
1. Name = penamaan tag
2. Disabled = menonaktifkan tag
3. Width = mengatur lebar tag (gambar)
4. Height = mengatur tinggi tag (gambar)
5. Size = lebar kolom inputan
6. Maxlength = mengatur jumlah maksimum karakter
7. Placeholder = keterangan text dalam tag
8. Required = tag harus di isi
9. Readonly = hanya bisa di baca, tidak bisa di rubah
10. Value = isi/nilai dari tag
11. Type = tipe inputan
ex:
<input type="password">
Attribute type pada tag <input>:
text,radio,checkbox,file,submit,reset,password

Langkah-langkah belajar tabel :

- Buatlah file baru : formulir.html simpan dalam folder "lat 1"
- Ketikkan struktur dasar HTML pada file tsb:
  <html>
  <head>
  </head>
  <body>
  </body>
  </html>
- Masukkan codingan pembuatan formulir
 <html>
 <head>
         <title>CONTOH FORMULIR<title>
 </head>
 <body>
 <h2>FORMULIR PENDAFTARAN</h2>
 <form action="proses.html" method="post"
 enctype="multipart/form data"
 name="form_reg">
 Nama Lengkap : <input type="text"
 name="nama_lengkap" size="15" maxlength="15" placeholder="Masukkan Nama Lengkap Anda">
<br>
 Jenis Kelamin : <input type="radio" name="jekel" value="pria">Pria
                           <input type="radio" name="jekel" value="wanita">Wanita
<br>
 Hobi : <input type="checkbox" name="hobi" value="Sepak Bola">Sepak Bola
            <input type="checkbox" name="hobi" value="Memanah">Memanah
<br>
 Foto : <input type="file" name="foto">
<br>
<br>
 Status : <select name="status" size="1">
             <option value="">-- Pilih --</option>
             <option value="Menikah">Menikah</option>
             <option value="Belum Menikah">Belum Menikah</option>
             </select>
 <br>
 <br>
 Alamat : <textarea name="alamat" rows="5" cols="50"></textarea>
 <br>
 <br>
<input type="submit" value="SIMPAN" name="bsimpan">
<input type="submit" value="BATAL" name="bbatal">
 </form>
 </body>
 </html>

Langkah 1 Menambahkan form Nama Lengkap pada formulir pendaftaran

(catatan: type bisa menggunakan text atau password, size dan maxlength ukurannya bisa di ubah sesuai kebutuhan masing-masing, lalu placeholder bisa di ubah sesuai selera yang diinginkan )

Menggunakan Value

Hasil codingan 

Hasil coding menggunakan Value

A.1

 (A.1 menampilkan nama tanpa harus mengetik di web browser.

 Menggunakan value pengganti placeholder)

Hasil A.1

(Hasil codingan A.1 nama sudah terpampang tanpa harus mengetik terlebih dahulu tetapi pada gambar di atas nama masih dapat dirubah ketika akan mengetik di form nama)

 A.2

(Sama  seperti A.1 tapi perbedaannya nama terlihat tetapi jika kita klik form nama maka akan muncul "Please fill out this field" / "Harap isi bidang ini" atau nama yang sudah tertera akan hilang) 

Hasil coding A.2

Langkah 2 menambahkan form jenis kelamin 

Hasil coding

Langkah 3 membuat form hobi

 kita bisa memilih hobi lebih dari satu atau tidak sama sekali 

Langkah 4 Menyisipkan foto pada formulir pendaftaran

Hasil coding

Langkah 5 menambahkan form status,alamat,inputan simpan dan batal 

Hasil coding 

Sampai disini dulu ya pembahasan cara membuat formulir pendaftaran melalui HTML.
Maaf jika blog atau ketikan saya kurang dimengerti. Semoga bermanfaat..!!


SEE THE NEXT POST!!









Monkey D Luffy