Belajar HTML Part 26 - Atribut Input dalam Form

Atribut Input dalam Form

Atribut-atribut berikut merupakan atribut yang termasuk dalam form di HTML.

Atribut Value

Atribut value digunakan untuk menentukan nilai awal untuk sebuah kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan" value="King">
<br>
Nama Belakang:<br>
<input type="text" name="namabelakang">
</form>

</body>
</html>

Hasilnya:

Atribut readonly

Atribut readonly digunakan untuk menentukan bahwa kolom input hanya dapat dibaca saja, artinya tidak dapat diubah.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan" value ="King" readonly>
<br>
Nama Belakang:<br>
<input type="text" name="namabelakang">
</form>

</body>
</html>

Hasilnya:

Atribut disable

Atribut disable merupakan atribut yang digunakan untuk menentukan bahwa kolom input dinonaktifkan. Sebuah kolom input yang dinonaktifkan sehingga tidak dapat digunakan dan tidak dapat diklik, dan nilainya tidak akan dikirim saat disubmit.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan" value ="King" disabled>
<br>
Nma Belakang:<br>
<input type="text" name="namabelakang">
</form>

</body>
</html>

Hasilnya:

Atribut size

Atribut size digunakan untuk menentukan ukuran kolom penginputan karakter.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan" value="King" size="50">
<br>
Nama Belakang:<br>
<input type="text" name="namabelakang">
</form>

</body>
</html>

Hasilnya:

Atribut maxlength

Atribut maxlength adalah atribut yang digunakan untuk menentukan jumlah maksimum yang diperbolehkan untuk memasukan karakter dalam kolom input.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
Nama Depan:<br>
<input type="text" name="namadepan" maxlength="20">
<br>
Nama Belakang:<br>
<input type="text" name="namabelakang">
</form>

</body>
</html>

Hasilnya:

Dengan menggunakan atribut maxlength, kolom input tidak akan menerima lebih dari jumlah karakter yang ditentukan.

Atribut maxlength tidak memberikan umpan balik (feedback). Jika kita ingin memperingatkan pengguna bahwa jumlah maksimum karakter yang harus dimasukkan, kita harus menuliskan kode JavaScript.

Atribut Form di HTML5

HTML5 menambahkan atribut berikut untuk elemen <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
width dan height
list
min dan max
multiple
pattern (regexp)
placeholder
required
step

Dan diikuti oleh atribut-atribut berikut untuk elemen <form>:

autocomplete
novalidate

Berikut adalah penjelasan dari atribut-atribut HTML5 di atas:

Atribut autocomplete

Atribut autocomplete menentukan apakah form atau kolom input harus memiliki autocomplete "on" atau "off". Ketika autocomplete aktif (on), maka browser akan membaca karakter secara otomatis apabila karakter tersebut sudah pernah digunakan sebelumnya.

Atribut autocomplete bekerja (working) di dalam elemen <form> dan juga pada <input> type: teks, search, url, tel, email, password, datepickers, range, dan color. Berikut adalah sebuah form HTML dengan autocomplete "on" dan "off" untuk satu kolom input saja:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form autocomplete="on">
  Nama Depan:<input type="text" name="namadepan"><br>
  Nama Belakang: <input type="text" name="namabelakang"><br>
  Email: <input type="email" name="email" autocomplete="on"><br>
  <input type="submit">
</form>

<p>Isi formulirnya kemudian submit, lalu muat ulang (reload) halaman untuk melihat bagaimana cara kerja atribut autocomplete.</p>

<p>Perhatikan bahwa autocomplete "on" untuk kolom "namadepan" dan "namabelakang", tapi "off" untuk kolom e-mail.
</p>

</body>
</html>

Hasilnya:

Tips: Dalam beberapa browser kita perlu mengaktifkan fungsi autocomplete agar dapat berjalan dengan baik.

Atribut novalidate
Atribut novalidate merupakan sebuah atribut <form>. Atribut novalidate menentukan bahwa data formulir tidak bisa divalidasi saat disubmit. Contoh berikut menunjukkan bahwa form tidak akan divalidasi saat disubmit:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<formnovalidate>
Email: <input type="email" name="email_user">
<input type="submit">
</form>

<p><strong>Catatan:</strong>
attribute novalidate tidak didukung di Internet Explorer 9 (dan versi sebelumnya, dan di Safari</p>

</body>
</html>

Hasilnya:

Atribut autofocus

Atribut autofocus digunakan untuk menentukan bahwa kolom input akan autofocus saat halaman direload. Berikut adalah contoh kolom input "Nama depan" yang secara otomatis mendapatkan fokus ketika halaman direload.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
  Nama Depan:<input type="text" name="namadepan" autofocus><br>
  Nama Belakang: <input type="text" name="namabelakang"><br>
  <input type="submit">
</form>

<p><strong>Note:</strong>
Attribute autofocus  dalam tag input tidak didukung di Internet Explorer 9 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya:

Atribut form

Atribut form digunakan untuk menentukan satu atau lebih elemen <input> pada sebuah form. Berikut adalah kolom input yang terletak di luar form HTML (tapi masih bagian dari form):

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form id="form1">
Nama Depan: <input type="text" name="namadepan"><br>
<input type="submit" value="Submit">
</form>

<p>Kolom "Nama Belakang" berada di luar elemen form, tapi masih merupakan bagian dari form itu sendiri.</p>
Nama Belakang: <input type="text" name="namabelakang" form="form1">

</body>
</html>

Hasilnya:

Atribut formaction

Atribut formaction digunakan untuk menentukan URL file yang akan memproses kontrol input ketika formulir disubmit. Atribut formaction menimpa atau menggantikan atribut action dalam elemen <form>.

Atribut formaction digunakan dengan type="submit" dan type="image". Berikut adalah form HTML dengan dua tombol submit, dengan action yang berbeda:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form>
  Nama Depan: <input type="text" name="namadepan"><br>
  Nama Belakang: <input type="text" name="namabelakang"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/halaman_action.php" value="Submit ke halaman lain">
</form>

<p><strong>Catatan:</strong> Attribute formaction tidak didukung di Internet Explorer 9 (dan versi sebelumnya).
</p>

</body>
</html>

Hasilnya:

Atribut formenctype

Atribut formenctype digunakan untuk menentukan bagaimana data formulir harus dikodekan ketika disubmit (hanya untuk form dengan metode="POST").

Atribut formenctype menimpa atribut enctype dari elemen <form>. Atribut formenctype digunakan dalam type="submit" dan type="image".

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php" method="post">
  Nama Depan: <input type="text" name="namadepan"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Submit sebagai Multipart/form-data">
</form>

<p><strong>Catatan:</strong> Atribut formenctype tidak didukung di Internet Explorer 9 (dan versi sebelumnya)</p>

</body>
</html>

Hasilnya:

Atribut formmethod

Atribut formmethod mendefinisikan metode HTTP untuk mengirimkan form-data ke action URL. Atribut formmethod menimpa atau menggantikan atribut metode pada elemen <form>.

Atribut formmethod dapat digunakan dalam type="submit" dan type= "image". Berikut adalah contoh dua tombol submit menggantikan metode HTTP dalam form:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="halaman_action.php" method="get">
  Nama Depan: <input type="text" name="namadepan"><br>
  Nama Belakang: <input type="text" name="namabelakang"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit menggunakan method POST">
</form>

<p><strong>Catatan:</strong>
attribute formmethod tidak didukung di Internet Explorer 9 (dan versi sebelumnya)</p>

</body>
</html>

Hasilnya:

Atribut formnovalidate

Atribut formnovalidate menimpa atribut novalidate dari elemen <form>. Atribut formnovalidate dapat digunakan dalam type="submit". Berikut adalah form dengan dua tombol submit (dengan dan tanpa validasi):

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="halaman_action.php">
  Email: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit tanpa validasi">
</form>

<p><strong>Catatan:</strong>
attribute formnovalidate tidak didukung di Internet Explorer 9 (dan versi sebelumnya) dan di Safari 10 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Atribut formtarget

Atribut formtarget digunakan untuk menentukan nama atau kata kunci yang menunjukkan bagaimana untuk menampilkan respon yang diterima setelah mengirimkan formulir.

Atribut formtarget menimpa atribut target di elemen <form>. Atribut formtarget dapat digunakan dalam type="submit" dan type="image". Berikut adalah form dengan dua tombol submit, dengan target _blank, yaitu target apabila tombol submit diklik maka akan membuka jendela baru:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php">
  Nama Depan: <input type="text" name="namadepan"><br>
  Nama Belakang: <input type="text" name="namabelakang"><br>
  <input type="submit" value="Submit normal">
  <input type="submit" formtarget="_blank" value="Submit ke jendela baru">
</form>

<p><strong>Catatan:</strong> Atribut formtarget tidak didukung di Internet Explorer 9 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Atribut width dan height

Atribut width dan height digunakan untuk menentukan tinggi dan lebar dari elemen <input type="image">.

Berikut adalah cara menentukan gambar sebagai tombol submit, dengan atribut width dan height:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/action_page.php">
  Nama Depan: <input type="text" name="namadepan"><br>
  Nama Belakang: <input type="text" name="namabelakang"><br>
  <input type="image" src="nama_gambar.jpg" alt="Submit" width="50" height="50">
</form>

<p><b>Catatan:</b> input type="image" mengirimkan koordinat X dan Y untuk mengaktifkan gambar sebagai tombol saat diklik.</p>

</body>
</html>

Hasilnya:

Atribut list

Atribut list mengacu pada elemen <datalist> yang berisi opsi yang telah ditentukan untuk elemen <input>. Berikut adalah sebuah elemen <input> dengan nilai-nilai yang telah ditetapkan dalam <datalist>:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><b>Catatan:</b> datalist tidak didukung di Internet Explorer 9 (dan versi sebelumnya, dan juga di Safari.</p>

</body>
</html>

Hasilnya:

Atribut min dan max

Atribut min dan max digunakan untuk menentukan nilai minimum dan maksimum untuk elemen <input>. Atribut min dan max working pada input type berikut: number, range, date, datetime-local, month, time, and week.

Berikut adalah contoh dari elemen <input> dengan nilai min dan max:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php">
  Masukkan tanggal sebelum 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Masukkan tanggal setelah 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
  Kuantitas (antara 1 and 5):
  <input type="number" name="quantity" min="1" max="5"><br>
  <input type="submit">
</form>

<p><strong>Catatan:</strong> atribut max and min tidak didukung di Internet Explorer 9 (dan versi sebelumnya), dan di Firefox.</p>

<p><strong>Note:</strong> Atribut max dan min tidak working untuk tanggal dan waktu di Internet Explorer 10, karena IE 10 tidak mendukung input type ini.</p>

</body>
</html>

Hasilnya:

Atribut multiple

Atribut multiple menetapkan bahwa pengguna diperbolehkan untuk memasukkan lebih dari satu value dalam elemen <input>. Atribut multiple working pada input type: email dan file.

Pada contoh berikut merupakan kolom file upload yang bisa menandai beberapa gambar yang dapat diupload.

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php">
  Select images: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<p>Pada contoh ini kita bisa memilih beberapa file untuk diupload. apabila atribut multiple dihilangkan, maka kita tidak bisa memilih file lebih dari satu untuk diupload.</p>

<p><strong>Catatan:</strong> Atribut multiple tidak didukung di Internet Explorer 9 (dan versi sebelumnya.</p>

</body>
</html>

Hasilnya:

Atribut pattern

Atribut pattern digunakan untuk mencocokan string teks berdasarkan pola tertentu, seperti membuat validasi input agar inputan hanya berupa alfabet, spasi, maupun karakter lainnya.

Atribut pattern working pada input type berikut: teks, search, url, tel, email, dan password.

Berikut adalah kolom input yang dapat berisi hanya tiga huruf (tidak ada angka atau karakter khusus):
Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php">
  Alfabet: <input type="text" name="alfabet" pattern="[A-Za-z]{3}" title="Tiga huruf alfabet">
  <input type="submit">
</form>

<p><strong>Catatan:</strong> Atribut pattern tidak didukung di Internet Explorer 9 (dan versi sebelumnya), dan di Safari 10 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Atribut placeholder

Atribut placeholder digunakan untuk membuat deskripsi singkat pada kolom input agar sesuai format yang diinginkan. Atribut placeholder bukan merupakan value dari kolom input tersebut, tetapi placeholder akan hilang dengan sendirinya saat kita mulai mengetik dalam kolom input tersebut.

Atribut placeholder working pada input type berikut: teks, search, url, tel, email, dan password. Berikut adalah sebuah kolom input dengan teks placeholder:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php">
  <input type="text" name="namadepan" placeholder="Nama depan"><br>
  <input type="text" name="namabelakang" placeholder="Nama belakang"><br>
  <input type="submit" value="Submit">
</form>

<p><strong>Catatan:</strong> Atribut placeholder tidak didukung di Internet Explorer 9 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya:

Atribut required

Atribut required digunakan untuk menentukan bahwa sebuah kolom input harus diisi sebelum mengirimkan formulir. Atribut required working pada input type berikut: teks, search, url, tel, email, password, date pickers, number, checkbox, radio, dan file.

Berikut adalah contoh sebuah kolom input dengan atribut required:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/halaman_action.php">
  Nama Pengguna: <input type="text" name="nama_pengguna" required>
  <input type="submit">
</form>

<p><strong>Catatan:</strong> Atribut required tidak didukung di Internet Explorer 9 (dan versi sebelumnya), dan di Safari.</p>

</body>
</html>

Hasilnya:

Atribut step

Atribut step digunakan untuk menentukan jumlah nilai legal di elemen <input>.
Contoh: jika step= "3", nilai legal bisa menjadi -6 -3, 0, 3, 6, 9 dan seterusnya.

Tip: Atribut step dapat digunakan bersama-sama dengan atribut max dan min untuk membuat rentang nilai legal.

Atribut Langkah bekerja dengan jenis masukan berikut: nomor, jangkauan, tanggal, datetime-lokal, bulan, waktu dan minggu.

Berikut adalah kolom input dengan interval nomor legal yang telah ditentukan:

Contoh

<!DOCTYPE html>
<html>
<head>
<title>Title Halaman</title>
</head>
<body>

<form action="/action_page.php">
  <input type="number" name="points" step="3">
  <input type="submit">
</form>

<p><strong>Catatan:</strong> Atribut step tidak didukung di Internet Explorer 9 (dan versi sebelumnya).</p>

</body>
</html>

Hasilnya: