HTML Input Attributes

Pelajari Tutorial HTML5 Lainya Disini 01. Pendahuluan HTML5 02. Dasar HTML 03. Atribut dan Pos HTML 04. Paragraf dan Style HTML 05. Format Teks Elemen HTML 06. Kutipan HTML 07. HTML Komputer Elemen 08. HTML Komentar 09. HTML Styles - CSS 10. Link HTML 11. HTML Images 12. Tabel HTML 13. HTML List 14. HTML Block Elemen dan Class 15. HTML Layout 16. HTML Web Responsif dan Iframe 17. Element HEAD HTML 18. Entitas HTML 19. Simbol HTML 20. HTML dan XHTML 21. Form HTML 22. HTML Form Element 23. HTML Jenis Input 24. HTML Input Attributes 25. HTML5 Intro 26. HTML5 Support 27. HTML5 New Elements 28. HTML5 Semantic Elements 29. Migrasi HTML5 30. HTML 5 Canvas 31. HTML5 SVG 32. HTML Multimedia 33. HTML5 Video dan Audio 34. HTML Plug-in dan Youtube

value Atribut

Value atribut menentukan nilai awal untuk field input:

<form action='">

Nama Depan:

<input type="text" name="namadepan" value="Dicky">

<br>

Nama Belakang:

<input type="text" name="namabelakang">

</form>

Atribut readonly

The readonly atribut menentukan bahwa field input dibaca saja (tidak dapat diubah):

<form action='">

Nama Depan:

<input type="text" name="namadepan" value="Dicky" readonly>

<br>

Nama Belakang:

<input type="text" name="namabelakang">

</form>

The readonly atribut tidak perlu nilai. Ini adalah sama dengan menulis readonly = "readonly".

Atribut disabled

Atribut disabled menetapkan bahwa field input dinonaktifkan.

Unsur penyandang disabled un-digunakan dan un-diklik.

Unsur disabled tidak akan diserahkan.

<form action='">

Nama Depan:

<input type="text" name="namadepan" value="Dicky" disabled>

<br>

Nama Belakang:

<input type="text" name="namabelakang">

</form>

Atribut cacat tidak perlu nilai/value. Ini adalah sama dengan menulis disabled = "disabled".

Size Atribut

Size atribut menentukan ukuran (dalam karakter) untuk bidang masukan:

<form action='">

Nama Depan:

<input type="text" name="namadepan" value="Dicky" size="50">

<br>

Nama Belakang:

<input type="text" name="namabelakang">

</form>

The maxlength Atribut

The maxlength atribut menentukan maksimum yang diizinkan panjang untuk bidang masukan:

<form action='">

Nama Depan:

<input type="text" name="namadepan" value="Dicky" maxlength="10">

<br>

Nama Belakang:

<input type="text" name="namabelakang">

</form>

Dengan atribut maxlength, kontrol masukan tidak akan menerima lebih dari jumlah yang diizinkan karakter.

Atribut tidak memberikan umpan balik. Jika Anda ingin memperingatkan pengguna, Anda harus menulis kode JavaScript.

Pembatasan masukan tidak mudah. JavaScript menyediakan banyak cara untuk menambah masukan ilegal. 
Untuk aman membatasi masukan, pembatasan harus diperiksa oleh penerima (server).

HTML5 Atribut

HTML5 menambahkan atribut berikut untuk <input>:

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

dan atribut berikut untuk <form>:

• autocomplete
• novalidate

Autocomplete Atribut

Autocomplete atribut menentukan apakah bentuk atau masukan lapangan harus memiliki autocomplete atau menonaktifkan.

Ketika autocomplete aktif, browser nilai otomatis lengkap berbasis pada nilai-nilai yang telah dimasukkan pengguna sebelumnya.

Tip: Hal ini dimungkinkan untuk memiliki autocomplete "on" untuk formulir, dan "off" untuk bidang masukan tertentu, atau sebaliknya.

Autocomplete atribut bekerja dengan <form> dan berikut <input> jenis: teks, pencarian, url, tel, email, password, datepickers, jangkauan, dan warna.

<form action="action_page.php" autocomplete="on">

Nama Depan:<input type="text" name="nd"><br>

Nama Belakang:<input type="text" name="nb"><br>

E-mail: <input type="email" name="email" autocomplete="off"><br>

<input type="submit"

</form>

Tip: Dalam beberapa browser Anda mungkin perlu untuk mengaktifkan fungsi autocomplete untuk bekerja.

Atribut novalidate

The novalidate Atribut adalah <form> Atribut

Ketika hadir, novalidate menetapkan bahwa data formulir tidak harus divalidasi ketika diajukan.

<form action="action_page.php" novalidate>

E-mail: <input type="email" name="email" autocomplete="off"><br>

<input type="submit"

</form>

The autofocus Atribut

The autofocus atribut atribut boolean.

Ketika hadir, ia menentukan bahwa <input> elemen harus secara otomatis mendapatkan fokus ketika beban halaman.

Nama depan:<input type="text" name="nama" autofocus>

Form Atribut

Bentuk atribut menentukan satu atau lebih form sebuah <input> elemen milik.

Tip: Untuk mengacu pada lebih dari satu form, menggunakan daftar dipisahkan dengan spasi dari bentuk id.

<form action="action_page.php" id="form1">

Nama depan:<input type="text" name="namad" ><br>

<input type="submit" value="Proses">

</form>

Nama belakang: <input type="text" name="namab" form="form1">

The formaction Atribut

The formaction atribut menentukan URL dari file yang akan memproses input control ketika formulir dikirimkan.

The formaction atribut menimpa atribut aksi <form> elemen.

The formaction atribut digunakan dengan type = "submit" dan ketik = "image".

<form action="action_page.php">

Nama depan:<input type="text" name="namad" ><br>

Nama belakang: <input type="text" name="namab"><br>

<input type="submit" value="Proses"><br>

<input type="submit" formaction="demo_admin.asp" value="submit as admin"

</form>

The formenctype Atribut

The formenctype atribut menentukan bagaimana bentuk-data harus dikodekan ketika mengirimkan ke server (hanya untuk bentuk dengan metode = "post")

The formenctype atribut menimpa atribut enctype dari <form> elemen.

The formenctype atribut digunakan dengan type = "submit" dan ketik = "image".

<form action="demo_post_enctype.asp" method="post">

Nama depan:<input type="text" name="namad" ><br>

<input type="submit" value="Proses"><br>

<input type="submit" formenctype="multypart/form-data" value="submit as Multypart/form-data">

</form>

Atribut formmethod

The formmethod atribut mendefinisikan metode HTTP untuk mengirimkan form-data ke URL tindakan.

The formmethod atribut menimpa atribut metode <form> elemen.

The formmethod atribut dapat digunakan dengan type = "submit" dan ketik = "image".

<form action="action_page.php" method="get">

Nama depan:<input type="text" name="namad" ><br>

Nama belakang:<input type="text" name="namab"><br>

<input type="submit" value="Proses"><br>

<input type="submit" formmethod="post" formaction="demo_post.php" 

value="submit using POST">

</form>

Atribut formnovalidate

The novalidate atribut atribut boolean.

Ketika hadir, itu menetapkan bahwa <input> elemen tidak harus divalidasi ketika diajukan.

The formnovalidate atribut menimpa atribut novalidate dari <form> elemen.

The formnovalidate atribut dapat digunakan dengan type = "submit".

<form action="action_page.php">

Nama depan:<input type="text" name="namad" ><br>

<input type="submit" value="Proses"><br>

<input type="submit" formnovalidate="post" value="submit without validation">

</form>

Atribut formtarget

The formtarget atribut menentukan nama atau kata kunci yang menunjukkan di mana untuk menampilkan respon yang diterima setelah mengirimkan formulir.

The formtarget atribut menimpa atribut target <form> elemen.

The formtarget atribut dapat digunakan dengan type = "submit" dan ketik = "image".

<form action="action_page.php">

Nama depan:<input type="text" name="namad" ><br>

Nama belakang:<input type="text" name="namab"><br>

<input type="submit" value="Proses"><br>

<input type="submit" formtarget="_blank" value="submit to a new window">

</form>

Height dan Width Atribut

Atribut tinggi dan lebar menentukan tinggi dan lebar dari <input> elemen.

Atribut tinggi dan lebar hanya digunakan dengan <input type = "image">.

Selalu menentukan ukuran gambar. Jika browser tidak tahu ukuran, halaman akan berkedip.

<input type="image" src="Screenshot_7.png" alt="submit" width="40' height="40">

List Atribut

Daftar atribut mengacu pada <datalist> elemen yang berisi telah ditetapkan pilihan untuk <input> elemen.

<input list="browsers">

<datalist id="browsers">

<option value="Chrome">

<option value="Firefox">

<option value="Internet Explorer">

<option value="Safari">

</datalist>

Min dan max Atribut

Min dan max atribut menentukan minimum dan nilai maksimum untuk <input> elemen.

Min dan max atribut bekerja dengan jenis masukan berikut: nomor, jangkauan, tanggal, datetime, datetime-lokal, bulan, waktu dan minggu.

  Enter a date before 1980-01-01:

  <input type="date" name="bday" max="1979-12-31"><br>

  Enter a date after 2000-01-01:

  <input type="date" name="bday" min="2000-01-02"><br>

Quantity (between 1 and 5)

<input type="number" name="quantity" min="1" max="5">

Multiple Atribut

Berbagai atribut atribut boolean.

Ketika hadir, itu menetapkan bahwa pengguna diijinkan untuk memasukkan lebih dari satu nilai dalam <input> elemen.

Berbagai atribut bekerja dengan jenis berikut masukan: email, dan berkas.

select image: <input type="file" name="img" multiple>

Pattern Atribut

Pola atribut menentukan ekspresi reguler yang nilai <input> elemen diperiksa.

Pola atribut bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, dan password.

Tip: Gunakan global judul atribut untuk menggambarkan pola untuk membantu pengguna.

Tip: Pelajari lebih lanjut tentang ekspresi reguler di tutorial JavaScript kami.

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Placeholder Atribut

Placeholder atribut menentukan petunjuk yang menggambarkan nilai yang diharapkan dari sebuah field input (nilai sampel atau deskripsi singkat mengenai format).

Petunjuk yang ditampilkan di bidang masukan sebelum pengguna memasukkan nilai.

Placeholder atribut bekerja dengan jenis masukan berikut: teks, pencarian, url, tel, email, dan password.

<input type="text" name="fname" placeholder="nama depan">

Atribut required

Atribut yang diperlukan adalah atribut boolean.

Ketika hadir, itu menetapkan bahwa sebuah field input harus diisi sebelum mengirimkan formulir.

Atribut yang diperlukan bekerja dengan jenis berikut masukan: teks, pencarian, url, tel, email, password, tanggal pemetik, nomor, checkbox, radio, dan berkas.

<input type="text" name="fname" required>

Step Atribut

Langkah/step atribut menentukan interval nomor hukum untuk <input> elemen.

Contoh: jika step = "3", nomor hukum bisa -3, 0, 3, 6, dan seterusnya

Tip: Langkah atribut dapat digunakan bersama-sama dengan max dan min atribut untuk menciptakan berbagai nilai-nilai hukum.

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

<input type="number" name="point" step="3">

Kembali Keatas ⇑

CB Blogger