Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Inputan HTML Menggunakan Tag Input

Tag input digunakan bersamaan dengan elemen <form> untuk mendeklarasikan input kontrol yang memungkinkan user untuk memasukkan dapat pada form html. Bidang input dapat terdiri dari berbagai tipe bergantung dengan tipe atribut yang digunakan. Tag input merupakan elemen kosong yang hanya terdiri dari atribut-atribut saja. Untuk mendefinsikan label untuk elemen input tersebut, maka digunakan <label>.

30 Value Utama Penggunaan Tag Input pada HTML
Ilustrasi Tag Input HTML

Sebelum memahami lebih dalam materi tentang Membuat Inputan HTML Menggunakan Tag Input, terlebih dahulu pelajari materi tentang: Menampilkan Gambar HTML Menggunakan Tag IMG [klik], Memiringkan Huruf pada HTML Menggunakan Tag Italic Style [klik], dan Penggunaan Tag HTML dan Fungsinya [klik].

Sintak:
<input type = "value" .... />

Atribut:
  1. type: digunakan untuk menentukan tipe dari elemen input, yang secara default nilainya adalah teks.
  2. value: digunakan untuk menentukan nilai dari elemen input.
  3. placeholder: digunakan untuk menentukan petunjuk deskripsi dari nilai input.
  4. name: digunakan untuk menentukan nama dari elemen input.
  5. alt: digunakan untuk menyediakan teks alternatif bagi user, jika image tidak dapat dimunculkan.
  6. autofocus: digunakan untuk menentukan apakah akan dilakukan get focus secara otomatis atau tidak ketika halaman loading.
  7. checked: digunakan untuk menentukana apakah elemen harus pre-selected atau tidak ketika halaman loading. Atribut checked dapat digunakan dengan < input type=”checkbox” > dan < input type=”radio” >.
  8. disabled: digunakan untuk menentukan apakah elemen akan disabled atau tidak. Atribut disabled dapat diatur untuk menjaga user dari penggunaan input elemen tertentu sampai beberapa kondisi telah terpenuhi.
  9.  form: digunakan untuk menentukan satu atau lebih form untuk elemen input.
  10. max: digunakan untuk menentukan nilai maksimum untuk elemen input.
  11. required: digunakan untuk menentukan apakah bidang input harus dipenuhi sebelum format di submit atau tidak.
  12. readonly: digunakan untuk mengatur field input dalam mode read onlyInput dalam mode read only tidak dapat dilakukan modifikasi apapun. Form akan tetap melakukan submit terhadap form dalam mode readonly, tetapi sebaliknya tidak akan di submit jika bidang input disabled.
  13. accept: properti ini digunakan untuk menentukan tipe dari file yang dapat diterima oleh server.
  14. align: digunakan untuk menentukan perataan dari input image.
  15. autocomplete: digunakan untuk menentukan apakah elemen input harus memiliki autocomplete enabled atau tidak.
  16. dirname: digunakan untuk menentukan arah teks yang akan di-submit.
  17.  formaction: digunakan untuk menentukan URL dari file yang akan memproses input kontrol ketika dilakukan submit.
  18.  formenctype: digunakan untuk menentukan bagaiman form data harus diencode ketika dilakukan submit ke server.
  19.  formmethod: digunakan untuk mendefinisikan elemen form untuk tidak divalidasi ketika di-submit.
  20.  formtarget: digunakan untuk menentukan dimana respon tampilan akan diterima setelah submit form.
  21. height: digunakan untuk menentukan panjang dari elemen input.
  22. list: digunakan untuk elemen datalist yang mengandung pre definisi opsional untuk elemen input.
  23. maxlength: digunakan untuk menentukan angka maksimum dari karakter yang diizinkan dalam elemen input.
  24. min: digunakan untuk menentukan nilai minimum untuk elemen input.
  25. multiple: digunakan untuk menentukan apakah user dapat menambahkan nilai lebih dari satu dalam elemen input.
  26. pattern: digunakan untuk menentukan ekspresi reguler yang telah diperiksa ulang nilai elemen inputnya.
  27. size: digunakan untuk menentukan lebar pada karakter dari elemen input.
  28. src: digunakan untuk menentukan URL image yang digunakan sebagai submit button.
  29. step: digunakan untuk menentukan interval angka untuk bidang input.
  30. width: digunakan untuk menentukan elemen input.


Contoh: penggunaan atribut type pada tag input.

<!DOCTYPE html>

<html>

 

<body>

<h1>

Elfan

</h1>

 

<form>

<label>Name:</label>

<input 

type="text" 

name="name" 

value="">

 

<br>

<br>

 

<label>E-mail:</label>

<input 

type="email" 

name="emailaddress">

 

<br>

<br>

 

<label>Password:</label>

<input 

type="password" 

name="password">

 

<br>

<br>

 

<input 

type="submit">

</form>

</body>

 

</html>

Output:







Contoh: penggunaan atribut value.

<!DOCTYPE html>

<html>

 

<body>

<h1>

Elfan

</h1>

 

<form>

<label> Name: </label>

<input 

type="text" 

name="name1" 

value="Rahul">

 

<br>

<br>

 

<input 

type="submit" 

value="Submit form">

</form>

</body>

 

</html>

Output:



Artikel ini didedikasikan kepada: Arien Melania Ramadhany, Atika Nabilah, Chofifah Nur Mustaghfiroh, Devi Sinta Dewi, dan Eka Nurul Istiqomah.

6 komentar untuk "Membuat Inputan HTML Menggunakan Tag Input"

  1. Apa yang dimaksud dengan tag input pada html?

    BalasHapus
    Balasan
    1. Tag input menentukan bidang input tempat user dapat memasukkan data. Elemen input merupakan elemen form yang paling penting yang dapat ditampilkan dalam beberapa cara bergantung pada tipe atribut yang digunakan.

      Hapus
  2. Apa fungsi tag input pada html?

    BalasHapus
    Balasan
    1. Tag input digunakan dalam elemen form untuk mendeklarasikan kontrol input yang memungkinkan pengguna untuk memasukkan data ke dalam form html. Bidang input dapat dari berbagai jenis bergantung pada jenis atribut yang digunakan. Tag input merupakan elemen kosong yang hanya berisi atribut.

      Hapus
  3. Apa fungsi atribut name pada tag input html?

    BalasHapus
    Balasan
    1. Atribut name input pada HTML digunakan untuk menentukan nama untuk elemen input. Tag ini digunakan untuk mereferensikan data formulir setelah mengirimkan formulir atau untuk mereferensikan elemen dalam JavaScript.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -