Tag Pada HTML Part 3 : Forms dan Input Tag

Tag Pada HTML Part 3 : Forms dan Input Tag

19:59
Assalamu'alaikum poinreaders,
Melanjutkan materi sebelumnya tentang "Tag Pada HTML Part 2 : Formatting Tag", kali ini saya akan membahas materi mengenai forms dan input tag, yaitu tag yang digunakan untuk pengumpulan data seperti data identitas diri, data perusahaan, dll. Oke untuk lebih jelasnya langsung saja simak ulasannya...

Tag Pada HTML Part 3 : Forms dan Input Tag

1. <form>

Fungsi :
Mendefinisikan sebuah form HTLM untuk input pengguna.
Format Penulisan :
<form>...</form>

Atribut :
Atribut value Keterangan Deskripsi
accept tipe_file optional Menentukan daftar jenis file (dipisahkan dengan koma) yang akan diterima oleh server.
accept-charset character_set optional Menentukan pengkodean karakter yang akan diterima oleh server sebelum form dikirim.
action URL wajib Menentukan alamat (URL) yang memproses data form ketika dikirim.
autocomplete on
of		 optional Menentukan apakah inputan secara otomatis akan melengkapi konten yang sebelumnya telah ditulis atau tidak.
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 optional Menentukan bagaimana bentuk-data harus dikodekan ketika mengirim data ke server (hanya berlaku untuk metode "POST").
method get
post		 wajib Menentukan metode HTTP yang digunakan oleh browser untuk mengirimkan data form.
name text optional Menentukan nama sebuah form.
novalidate novalidate optional Menentukan bawha form tidak harus divalidasi ketika dikirim.
target _blank
_self
_parent
_top		 optional Menentukan tempat dari respon yang diterima setelah mengirim form.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag form</title>
</head>
<body>

 <form action="" method="post">
Nama depan : <input type="text" name="nama_depan"><br>
Nama belakang : <input type="text" name="nama_belakang"><br>
<input name="kirim" type="submit" value="kirim data">
</form>

 <?php if($_POST['kirim']){ ?>
nama depan : <?=$_POST['nama_depan'];?><br>
nama belakang : <?=$_POST['nama_belakang'];?>
<?php } ?>

 </body>
</html>
Hasil :
Nama depan :
Nama belakang :

nama depan :
nama belakang :
2. <input>

Fungsi :
Mendefinisikan sebuah inputan (masukkan).
Format Penulisan :
<input>

Atribut :
Atribut value Keterangan Deskripsi
accept file_extension
audio/*
video/*
image/*
media_type		 optional Menentukan jenis file yang akan diterima oleh server (hanya untuk inputan "file").
align left
right
top
middle
bottom		 optional Menentukan penyelarasan masukan gambar (hanya untuk inputan yang bertipe "image").
alt text optional Menentukan teks alternatif pada gambar (hanya untuk inputan yang bertipe "image").
autocomplete on
off		 optional Menentukan apakah inputan secara otomatis melengkapi konten yang sebelumnya telah ditulis atau tidak.
autofocus autofocus optional Menentukan bahwa sebuah form harus fokus pada element <input> yang memiliki atribut autofocus ketika halaman dimuat.
checked checked optional Untuk menyeleksi tag <input> ketika halaman pertama kali dimuat (hanya untuk inputan yang bertipe "checkbox" atau "radio").
dirname inputname.dir optional Menentukan arah teks yang akan dikirim.
disabled disabled optional Menonaktifkan tag <input>.
form from_id optional Menentukan satu atau lebih form (diisi berdasarkan atribute "id" pada tag <form>).
formaction URL optional Menentukan URL dari file yang akan memproses inputan ketika form dikirim (hanya untuk inputan bertipe "submit" dan "image").
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 optional Menentukan bagaimana bentuk data harus dikodekan ketika mengirimkannya ke server (hanya untuk inputan bertipe "submit" dan "image").
formmethod get
post		 optional Mendefinisikan metode HTTP untuk mengirimkan data (hanya untuk inputan bertipe "submit" dan "image").
formnovalidate formnovalidate optional Mendefinisikan bahwa element-element pada form tidak harus divalidasi ketika data form dikirimkan.
formtarget _blank
_self
_parent
_top
framename		 optional Menentukan tempat dari respon yang diterima setelah mengirim form(hanya untuk inputan bertipe "submit" dan "image").
height pixels optional Menentukan tinggi dari tag <input> (hanya untuk inputan bertipe "image").
list datalist_id optional Mengacu pada tag <datalist> yang berisi opsi yang telah ditetapkan.
max number
date		 optional Menentukan nilai maksimum.
maxlength number optional Menentukan jumlah maksimum karakter yang diizinkan pada tag <input>.
min number
date		 optional Menentukan nilai minimum.
multiple multiple optional Menentukan bahwa pengguna dapat memasukkan lebih dari satu nilai.
name text optional Menentukan nama pada tag <input>.
pattern regexp optional Menentukan pola bahasa regular expression yang akan diberlakukan pada nilai untuk sebuah tag <input>.
placeholder text optional Menentukan petunjuk singkat yang menggambarkan nilai yang diharapkan dari sebuah tag <input>.
readonly readonly optional Menentukan bahwa tag <input> hanya dapat dibaca, tidak dapat dirubah.
required required optional Menentukan bahwa tag <input> harus diisi sebelum data dikirimkan.
size number optional Menentukan ukuran lebar tag <input> dalam hitungan pixels.
src URL optional Menentukan URL gambar untuk digunakan sebagai tombol kirim (hanya untuk inputan bertipe "image").
step number optional Menentukan interval waktu atau jumlah dalam hitungan tertentu.
type button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		 wajib Menentukan tipe atau jenis inputan yang akan ditampilkan pada jendela browser.
value text optional Menentukan nilai sebuah tag <input>.
width pixels optional Menentukan lebar dari tag <input> (hanya untuk inputan bertipe "image").
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag input</title>
</head>
<body>

 <form action="" method="post">
Nama depan : <input type="text" name="nama_depan"><br>
Nama belakang : <input type="text" name="nama_belakang"><br>
<input name="kirim" type="submit" value="kirim data">
</form>

 <?php if($_POST['kirim']){ ?>
nama depan : <?=$_POST['nama_depan'];?><br>
nama belakang : <?=$_POST['nama_belakang'];?>
<?php } ?>

 </body>
</html>
Hasil :
Nama depan :
Nama belakang :

nama depan :
nama belakang :

3. <textarea>

Fungsi :
Mendefinisikan sebuah inputan yang memiliki area teks lebih dari satu baris.
Format Penulisan :
<textarea>...</textarea>

Atribut :
Atribut value Keterangan Deskripsi
autofocus autofocus optional Menentukan bahwa sebuah form harus fokus pada element <textarea> yang memiliki atribut autofocus ketika halaman dimuat.
cols number optional Menunjukkan kolom. Menentukan lebar dari textarea.
dirname textareaname.dir optional Menentukan arah teks yang akan dikirim.
disabled disabled optional Menonaktifkan tag <textarea>.
form from_id optional Menentukan satu atau lebih form (diisi berdasarkan atribute "id" pada tag <form>).
maxlength number optional Menentukan jumlah maksimum karakter yang diizinkan pada tag <textarea>.
name text optional Menentukan nama pada tag <textarea>.
placeholder text optional Menentukan petunjuk singkat yang menggambarkan nilai yang diharapkan dari sebuah tag <textarea>.
readonly readonly optional Menentukan bahwa tag <textarea> hanya dapat dibaca, tidak dapat dirubah.
required required optional Menentukan bahwa tag <textarea> harus diisi sebelum data dikirimkan.
rows number optional Menunjukkan jumlah baris pada textarea.
wrap hard
soft		 optional Menentukan bagaimana area teks dilipat ketika dikirimkan pada sebuah form.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag textarea</title>
</head>
<body>

 <textarea>
Ini adalah contoh textarea.
</textarea>

 </body>
</html>
Hasil :

4. <button>

Fungsi :
Mendefinisikan sebuah tombol.
Format Penulisan :
<button>...</button>

Atribut :
Atribut value Keterangan Deskripsi
autofocus autofocus optional Menentukan bahwa sebuah form harus fokus pada element <button> yang memiliki atribut autofocus ketika halaman dimuat.
disabled disabled optional Menonaktifkan tag <button>.
form from_id optional Menentukan satu atau lebih form (diisi berdasarkan atribute "id" pada tag <form>).
formaction URL optional Menentukan URL dari file yang akan memproses inputan ketika form dikirim (hanya untuk inputan bertipe "submit").
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain		 optional Menentukan bagaimana bentuk data harus dikodekan ketika mengirimkannya ke server (hanya untuk inputan bertipe "submit").
formmethod get
post		 optional Mendefinisikan metode HTTP untuk mengirimkan data (hanya untuk inputan bertipe "submit").
formnovalidate formnovalidate optional Mendefinisikan bahwa element-element pada form tidak harus divalidasi ketika data form dikirimkan.
formtarget _blank
_self
_parent
_top
framename		 optional Menentukan tempat dari respon yang diterima setelah mengirim form(hanya untuk inputan bertipe "submit").
name name optional Menentukan nama pada tag <button>.
type button
reset
submit		 wajib Menentukan tipe atau jenis inputan yang akan ditampilkan pada jendela browser.
value text optional Menentukan nilai sebuah tag <button>.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag button</title>
</head>
<body>

 <button type="button">Klik saya!</button>

 </body>
</html>
Hasil :

5. <select>

Fungsi :
Mendefinisikan sebuah daftar yang digunakan untuk menyeleksi deretan opsi yang diberikan.
Format Penulisan :
<select>
<option>...</option>
</select>

Atribut :
Atribut value Keterangan Deskripsi
autofocus autofocus optional Menentukan bahwa sebuah form harus fokus pada element <select> yang memiliki atribut autofocus ketika halaman dimuat.
disabled disabled optional Menonaktifkan tag <select>.
form from_id optional Menentukan satu atau lebih form (diisi berdasarkan atribute "id" pada tag <form>).
multiple multiple optional Menentukan bahwa pengguna dapat memasukkan lebih dari satu nilai.
name name optional Menentukan nama pada tag <select>.
required required optional Menentukan bahwa tag <select> harus diisi sebelum data dikirimkan.
size number optional Menentukan ukuran lebar tag <select> dalam hitungan pixels.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag select</title>
</head>
<body>

 <select>
    <option>Opsi 1</option>
    <option>Opsi 2</option>
    <option>Opsi 3</option>
</select>

 </body>
</html>
Hasil :

6. <optgroup>

Fungsi :
Mendefinisikan kelompok pada deretan opsi yang diberikan.
Format Penulisan :
<select>
<optgroup label="label">
<option>...</option>
</optgroup>
</select>

Atribut :
Atribut value Keterangan Deskripsi
disabled disabled optional Menonaktifkan tag <optgroup>.
label text wajib Menentukan label pada tag <optgroup>.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag optgroup</title>
</head>
<body>

 <select>
  <optgroup label="Opsi 1">
    <option>Opsi 1.1</option>
    <option>Opsi 1.2</option>
    <option>Opsi 1.3</option>
  </optgroup>
<optgroup label="Opsi 2">
    <option>Opsi 2.1</option>
    <option>Opsi 2.2</option>
    <option>Opsi 2.3</option>
  </optgroup>
</select>

 </body>
</html>
Hasil :

7. <option>

Fungsi :
Mendefinisikan deretan opsi pada tag <select>.
Format Penulisan :
<select>
<option>...</option>
</select>

Atribut :
Atribut value Keterangan Deskripsi
disabled disabled optional Menonaktifkan tag <option>.
label text optional Menentukan label pada tag <option>.
selected selected optional Menyeleksi pilihan ketika halaman pertama kali dimuat.
value text optional Menentukan nilai yang akan dikirim ke server.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag option</title>
</head>
<body>

 <select>
    <option>Opsi 1</option>
    <option>Opsi 2</option>
    <option>Opsi 3</option>
</select>

 </body>
</html>
Hasil :

8. <label>

Fungsi :
Mendefinisikan label untuk sebuah tag yang berkaitan dengan sebuah form.
Format Penulisan :
<label>...</label>

Atribut :
Atribut value Keterangan Deskripsi
for element_id optional Menentukan id dari form control yang hendak diasosiasikan.
form form_id optional Menentukan id dari sebuah form, yang mana label tersebut hendak diasosiasikan.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag label</title>
</head>
<body>

 <label for="nama_depan">Nama Depan :</label>
<input type="text" name="nama_depan" id="nama_depan"><br>
<label for="nama_belakang">Nama Belakang :</label>
<input type="text" name="nama_belakang" id="nama_belakang">

 </body>
</html>
Hasil :


9. <fieldset>

Fungsi :
Digunakan untuk merepresentasikan pengelompokkan daftar input pada sebuah form.
Format Penulisan :
<fieldset>...</fieldset>

Atribut :
Atribut value Keterangan Deskripsi
disabled disabled optional Menonaktifkan tag <fieldset>.
form form_id optional Menentukan id dari sebuah form, yang mana label tersebut hendak diasosiasikan.
name name optional Menentukan nama pada tag <fieldset>.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag fieldset</title>
</head>
<body>

 <fieldset>
    <legend>Identitas diri:</legend>
    Nama: <input type="text"><br>
    Email: <input type="text"><br>
    Alamat: <textarea></textarea>
</fieldset>

 </body>
</html>
Hasil :
Identitas diri: Nama:
Email:
Alamat:

10. <legend>

Fungsi :
Digunakan untuk merepresentasikan sebuah judul bagi konten induknya (tag <fieldset>) secara keseluruhan.
Format Penulisan :
<fieldset>
<legend>...</legend>
</fieldset>

Atribut :
Atribut value Keterangan Deskripsi
align top
bottom
left
right		 optional Menentukan posisi judul.
Contoh Penulisan :
<!DOCTYPE HTML><html>
<head>
<title>Tag legend</title>
</head>
<body>

 <fieldset>
    <legend>Identitas diri:</legend>
    Nama: <input type="text"><br>
    Email: <input type="text"><br>
    Alamat: <textarea></textarea>
</fieldset>

 </body>
</html>
Hasil :
Identitas diri: Nama:
Email:
Alamat:

11. <datalist>

Fungsi :
Digunakan untuk merepresentasikan daftar opsi yang diberikan pada sebuah inputan dengan daftar pilihan yang sebelumnya sudah terdefinisikan.
Format Penulisan :
<datalist id="id_input">
<option value="nilai_opsi">
</datalist>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag datalist</title>
</head>
<body>

 <input list="daftar">

 <datalist id="daftar">
    <option value="opsi 1">
    <option value="opsi 2">
    <option value="opsi 3">
</datalist>

 </body>
</html>
Hasil :

12. <output>

Fungsi :
Mendefinisikan hasil perhitungan.
Format Penulisan :
<output>...</output>

Atribut :
Atribut value Keterangan Deskripsi
for element_id optional Menentukan hubungan antara hasil perhitungan dan unsur-unsur yang digunakan dalam perhitungan.
form form_id optional Menentukan id dari sebuah form, yang mana label tersebut hendak diasosiasikan.
name name optional Menentukan nama pada tag <output>.
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag output</title>
</head>
<body>

 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

 </body>
</html>
Hasil :
0 100 + =

Semoga materi yang saya sampaikan kali ini dapat bermanfaat bagi sobat poinreaders, jangan lupa follow akun sosial kami agar sobat poinreaders bisa mendapatkan materi terupdate tentang pemrograman lainnya.
Denis Julianto

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »

Subscribe to: Post Comments (Atom)