^ Zona Info: Atribut tag form html

Atribut tag form html

Zona Info | Ilmu Komputer |  Oktober 13, 2017
Post by: Ian


action
  • Alamat yang mengirimkan data formulir harus dikirim ke.
  • Value: URL.
Contoh atribut <form action> :
<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

 <p>Click the "Submit" button and the form-data will be sent to a page on the server called "/action_page.php".</p>

 </body>
</html>

Preview:
Nama Depan:
Nama Belakang:
Klik tombol "Submit" dan form-data akan dikirim ke halaman di server yang disebut "/action_page.php".


methodMetode HTTP yang mengirimkan data formulir harus dikirim.
  • get: Bautkan nilai formulir ke URL yang isinya diserahkan. Digunakan untuk pengiriman data sederhana, seperti query pencarian, misalnya.
  • post: Tidak terlihat mengirimkan data formulir ke badan permintaan HTTP yang diajukan. Digunakan untuk pengiriman data yang lebih rinci atau aman, seperti formulir kontak, misalnya.

Contoh atribut <form method> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php" method="get" target="_blank">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

 <p> Klik tombol "Submit" dan form-data akan dikirim ke halaman di server yang disebut "/action_page.php".</p>

 </body>
</html>

Preview:
Nama Depan:
Nama Belakang:
Klik tombol "Submit" dan form-data akan dikirim ke halaman di server yang disebut "/action_page.php".
enctypeJenis MIME digunakan untuk mengkodekan data formulir.
  • application/x-www-form-urlencoded: Default.
  • multipart/form-data: Untuk saat input elemen file digunakan dalam form.
  • text/plain: Teks dasar

Contoh atribut <form enctype> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page_binary.asp" method="post" enctype="multipart/form-data">
  Nama Depan: <input type="text" name="fname"><br>
  Nama Belakang: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

 </body>
</html>

Preview:
Nama Depan:
Nama Belakang:

accept-charset
  • Encoding karakter dari data yang dikirimkan.
  • Sebuah pengkodean karakter, seperti utf-8, atau beberapa dipisahkan oleh spasi.
Contoh atribut <form accept-charset> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php" accept-charset="ISO-8859-1">
  Nama Depan: <input type="text" name="fname"><br>
  Nama Belakang: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

 </body>
</html>

Preview:
Nama Depan:
Nama Belakang:

autocomplete
  • Menyetel autofill default kontrol dalam bentuk.
  • Value:
  • on (Default)
  • off

Contoh atribut <form autocomplete> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php" method="get" autocomplete="on">
  Nama Depan:<input type="text" name="fname"><br>
  E-mail: <input type="email" name="email"><br>
  <input type="submit">
</form>

 <p>Isi dan kirimkan formulirnya, lalu muat ulang halaman, mulai mengisi formulir lagi - dan lihat bagaimana cara kerja pelengkapan otomatis.</p>
<p>Kemudian, coba atur autocomplete menjadi "off".</p>

 <p><b>Catatan:</b> Atribut pelengkapan otomatis dari elemen formulir tidak didukung di Opera 12 dan versi sebelumnya.</p>

 </body>
</html>

Preview:
Nama Depan:
E-mail:
Isi dan kirimkan formulirnya, lalu muat ulang halaman, mulai mengisi formulir lagi - dan lihat bagaimana cara kerja pelengkapan otomatis.
Kemudian, coba atur autocomplete menjadi "off".
Catatan: Atribut pelengkapan otomatis dari elemen formulir tidak didukung di Opera 12 dan versi sebelumnya.

name
  • Nama unik dari bentuk, digunakan bila halaman berisi lebih dari satu formulir.
  • Value: Teks.
Contoh atribut <form name> :

<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
    document.forms["myForm"].submit();
}
</script>
</head>
<body>

<form name="myForm" action="/action_page.php" method="get">
Nama Depan: <input type="text" name="fname"><br>
Nama Belakang: <input type="text" name="lname"><br><br>
<input type="button" onclick="formSubmit()" value="Send form data!">
</form>

<p>Perhatikan bahwa JavaScript di bagian kepala menggunakan nama formulir untuk menentukan form mana yang akan dikirim.</p>

</body>
</html>

 Preview:
Nama Depan:
Nama Belakang:

Perhatikan bahwa JavaScript di bagian kepala menggunakan nama formulir untuk menentukan form mana yang akan dikirim.


novalidate
  • Menunjukkan bahwa formulir tidak boleh divalidasi sebelum diajukan.
  • Value: Tidak ada
Contoh atribut <tag novalidate> :

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

<p><strong>Catatan:</strong> Atribut novalidate dari tag form tidak didukung di Internet Explorer 9 dan versi sebelumnya, atau di Safari.</p>

</body>
</html>

 Preview:
E-mail:
Catatan: Atribut novalidate dari tag form tidak didukung di Internet Explorer 9 dan versi sebelumnya, atau di Safari.


target
  • Konteks penjelajahan yang harus dibuka URL tujuan yang diajukan.
  • Value:
  • _self: Dibuka di jendela / tab saat ini.
  • _blank: Dibuka di jendela / tab baru.

Contoh atribut <form target>:

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php" method="get" target="_blank">
  Nama Depan: <input type="text" name="fname"><br>
  Nama Belakang: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

 </body>
</html>

Preview:
Nama Depan:
Nama Belakang:


Accept
  • Tidak didukung di HTML5.
  • Menentukan daftar jenis file yang dipisahkan koma yang diterima server (yang dapat dikirimkan melalui upload file).

Contoh atribut <form accept>:

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php" accept="image/gif, image/jpeg">
  Nama Depan: <input type="text" name="fname"><br>
  Nama Belakang: <input type="text" name="lname"><br>
  Gambar kamu: <input type="file" name="pic" id="pic"><br>
  <input type="submit" value="Submit">
</form>

 <p><b>Catatan:</b> Atribut accept tidak didukung di salah satu browser utama.</p>

 </body>
</html>

Preview:
Nama Depan:
Nama Belakang:
Gambar kamu:
Catatan: Atribut accept tidak didukung di salah satu browser utama.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
Copyright © 2016. Zona Info | powered by: Blogger