^ Zona Info

Atribut tag input pada html

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

Atribut opsional

AtributDeskripsiNilai yang mungkin
name
  • Nama bentuk kontrol, untuk dipasangkan dengan nilainya.
  • Teks (tidak ada spasi).
Contoh atribut <input name> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php">
  Nama: <input type="text" name="fullname"><br>
  Email: <input type="text" name="email"><br>
  <input type="submit" value="Submit">
</form>

 </body>
</html>

Preview:
Nama:
Email:
typeJenis kontrol bentuk.
  • text: Teks bidang - teks tanpa jeda baris. (Default)
  • password: Bidang teks dengan input yang tidak jelas .
  • checkbox: Centang kotak / kotak centang.
  • radio: Tombol Radio - memungkinkan satu kontrol untuk dipilih dalam grup yang berbagi nilai nama atribut yang sama .
  • submit: Kirimkan tombol - kirimkan formulirnya.
  • reset: Tombol Reset - me-reset kontrol dalam bentuk ke nilai awal awal.
  • hidden: Sebuah hidden control yang tidak bisa diakses langsung oleh user tapi nilainya yang dikirimkan dengan sisa data form.
  • image: Gambar yang, bila diklik atau tidak dipilih, akan mengirimkan formulir. Koordinat titik piksel yang diklik gambar akan menjadi nilai kontrol.
  • file: Upload file - memungkinkan file lokal dipilih untuk diserahkan.
  • button: Tombol tanpa perilaku default.
  • search: Bidang teks untuk senar pencarian .
  • tel: Bidang teks untuk nomor telepon .
  • url: Bidang teks untuk URL absolut .
  • email: Bidang teks untuk alamat email .
  • date: Tanggal kontrol seleksi.
  • time: Waktu kontrol seleksi.
  • number: Bidang teks atau pemintal untuk nilai numerik .
  • range: Slider, atau serupa, untuk memilih nilai numerik dari berpotensi tidak tepat kisaran .
  • color: Warna dengan baik , dengan nilai sRGB 8-bit.

Contoh atribut <input type> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php">
  Nama Pengguna: <input type="text" name="usrname"><br>
  <input type="submit" value="Submit">
</form>

 </body>
</html>

Preview:
Nama Pengguna:
value
  • Nilai awal
  • Bergantung pada tipe.
Contoh atribut <input value> :

 <!DOCTYPE html>
<html>
<body>

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

</body>
</html>

 Preview:
Nama Depan:
Nama Belakang:

checked
  • Menetapkan checkboxatau radiojenis yang akan diperiksa secara default.
  • Value possible: Tidak ada
Contoh atribut <input checked> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php" method="get">
  <input type="checkbox" name="vehicle" value="Motor"> I have a Motor<br>
  <input type="checkbox" name="vehicle" value="Mobil" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

 Preview:
I have a Motor
I have a car

maxlength
  • Jumlah maksimal karakter yang diijinkan dalam suatu nilai.
  • Value possible: Jumlah.
Contoh atribut <input maxlength> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Nama Pengguna: <input type="text" name="usrname" maxlength="10"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

 Preview:
Nama Pengguna:

minlength
  • Jumlah minimum karakter yang diizinkan dalam suatu nilai.
  • Value possible: Jumlah.
Contoh atribut <input minlength> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Masukkan tanggal sebelum 1980-01-01
  <input type="date" name="bday" max="1979-12-31"><br>

  Masukkan tanggal setelah 2017-01-01
  <input type="date" name="bday" min="2017-01-02"><br>

  Kuantitas (antara 1 dan 5):
  <input type="number" name="quantity" min="1" max="5"><br>

  <input type="submit">
</form>

<p><strong>Catatan:</strong> Atribut max dan min dari tag input tidak didukung di Internet Explorer 9 dan versi sebelumnya.</p>
<p><strong>Catatan:</strong> Atribut max dan min tidak akan bekerja untuk tanggal dan waktu di Internet Explorer 10 (dan yang lebih baru), atau Firefox, karena IE 10+ dan Firefox tidak mendukung jenis masukan ini.</p>

</body>
</html>

 Preview:
Masukkan tanggal sebelum 1980-01-01
Masukkan tanggal setelah 2017-01-01
Kuantitas (antara 1 dan 5):
Catatan: Atribut max dan min dari tag input tidak didukung di Internet Explorer 9 dan versi sebelumnya.
Catatan: Atribut max dan min tidak akan bekerja untuk tanggal dan waktu di Internet Explorer 10 (dan yang lebih baru), atau Firefox, karena IE 10+ dan Firefox tidak mendukung jenis masukan ini.

src

  • Digunakan, dan dibutuhkan, kapan tipe image. Lokasi file gambar yang akan digunakan.
  • Value possible: URL.

 Contoh atribut <input src> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php">
  Nama Depan: <input type="text" name="fname"><br>
  <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

 <p>Klik pada gambar, dan masukan akan dikirim ke halaman di server yang disebut "/action_page.php".</p>
<p><b>Catatan:</b> Jenis input gambar mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar sebagai default.</p>

 </body>
</html>

Preview:
Nama Depan:
Klik pada gambar, dan masukan akan dikirim ke halaman di server yang disebut "/action_page.php".
Catatan: Jenis input gambar mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar sebagai default.
alt

  • Digunakan, dan dibutuhkan, kapan tipe image. Teks alternatif yang akan menggantikan gambar jika gambar yang ditentukan oleh srctidak tersedia.
  • Teks.

 Contoh atribut <input alt> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Nama Depan: <input type="text" name="fname"><br>
  <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

<p>Klik pada gambar, dan masukan akan dikirim ke halaman di server yang disebut "/action_page.php".</p>
<p><b>Note:</b> Jenis input gambar mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar sebagai default.</p>

</body>
</html>

 Preview:
Nama Depan:
Klik pada gambar, dan masukan akan dikirim ke halaman di server yang disebut "/action_page.php".
Note: Jenis input gambar mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar sebagai default.

width
  • Digunakan saat tipe image. Lebar piksel dari gambar.
  • Value possible: Jumlah.
Contoh atribut <input widht> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Nama Depan: <input type="text" name="fname"><br>
  Nama Belakang: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>Catatan:</b> Input type = "image" mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar.</p>

</body>
</html>

 Preview:
Nama Depan:
Nama Belakang:
Catatan: Input type = "image" mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar.

height
  • Digunakan saat tipe image.
  • Tinggi piksel gambar.
  • Value possible: Jumlah.
Contoh atribut <input height> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Nama Depan: <input type="text" name="fname"><br>
  Nama Belakang: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

<p><b>Catatan:</b> Input type = "image" mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar.</p>

</body>
</html>

 Preview:
Nama Depan:
Nama Belakang:
Catatan: Input type = "image" mengirimkan koordinat X dan Y dari klik yang mengaktifkan tombol gambar.

accept
  • Digunakan saat tipe file.
  • Menunjukkan jenis file apa yang diterima
Daftar tunggal atau daftar koma yang dipisahkan koma:
  • audio/*: File audio.
  • video/*: File video
  • image/*: File gambar
  • Tipe MIME, seperti application/pdf.
  • Ekstensi file tertentu, seperti .pdf.

Contoh atribut <input accept> :

<!DOCTYPE html>
<html>
<body>

 <form action="/action_page.php">
  <input type="file" name="pic" accept="image/*">
  <input type="submit">
</form>

 <p><strong>Catatan:</strong> Atribut accept dari tag input tidak didukung di Internet Explorer 9 (dan versi sebelumnya), dan Safari 5 (dan sebelumnya).</p>
<p><strong>Catatan:</strong> Karena masalah keamanan, contoh ini tidak mengizinkan Anda mengupload file.</p>

 </body>
</html>

Preview:
Nama Depan:
Nama Belakang:
disabled
  • Nonaktifkan kontrol bentuk.
  • Value possible: Tidak ada
Contoh atribut <input disabled> :

 <!DOCTYPE html>
<html>
<body>

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

</body>
</html>

 Preview:
readonly

  • Membuat bentuk kontrol tidak dapat diubah oleh pengguna.
  • Tidak ada

 Contoh atribut <input readonly> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Email: <input type="text" name="email"><br>
  Negara: <input type="text" name="country" value="Japan" readonly><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

 Preview: 
autocomplete
autofocus
  • Menunjukkan bahwa kontrol formulir harus berfokus pada pemuatan halaman.
  • Sebaiknya hanya digunakan pada satu bentuk kontrol di halaman.
  • Value possible: Tidak ada
Contoh atribut <input autofocus> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Nama Depan: <input type="text" name="fname" autofocus><br>
  Nama Belakang: <input type="text" name="lname"><br>
  <input type="submit">
</form>

<p><strong>Catatan:</strong> Atribut autofocus dari tag input tidak didukung di Internet Explorer 9 dan versi sebelumnya.</p>

</body>
</html>

 Preview:
Nama Depan:
Nama Belakang:
Catatan: Atribut autofocus dari tag input tidak didukung di Internet Explorer 9 dan versi sebelumnya.

dirname
  • Menambahkan bidang tambahan yang akan dikirim yang berisi directionality dari nilai kontrol bentuk.
  • Teks (tidak ada spasi).
dirname="this.dir"Akan ditambahkan
this.dir=ltr (kiri-ke-kanan) atau
this.dir=rtl (kanan-ke-kiri) ke data yang dikirim, misalnya.

 Contoh atribut <input dirname> :

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Nama Depan: <input type="text" name="fname" dirname="fname.dir">
  <input type="submit" value="Submit">
</form>

<p>Saat formulir diserahkan, arah teks bidang masukan juga akan diserahkan.</p>

</body>
</html>

 Preview:
Nama Depan:
Saat formulir diserahkan, arah teks bidang masukan juga akan diserahkan.
Read more »
Posted by at No comments:
Subscribe to: Posts (Atom)
Copyright © 2016. Zona Info | powered by: Blogger