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>.

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

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 only. Input 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.

Baca Juga:

• 2 Atribut Utama Penggunaan Tag Ins pada HTML
• 2 Contoh Penggunaan Tag Kbd untuk Pendefinisian Input Keyboard HTML
• 2 Contoh dan Cara Penggunaan Tag Label pada HTML
• Menambahkan Informasi Ekstra Menggunakan Atribut Title HTML

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:

Name:

E-mail:

Password:

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:

Name: 

Referensi Tambahan:

• 3 Contoh Penggunaan Tag List Untuk Membuat Daftar pada HTML
• 5 Contoh Penggunaan Tag Meta untuk Pembuatan Meta Deskripsi HTML
• Penggunaan Tag Noscript untuk Menampilkan Teks HTML
• 11 Atribut Utama pada Penggunaan Tag Object HTML
• 2 Contoh Program Penggunaan Tag Optgroup pada HTML
• 4 Atribut Utama pada Penggunaan Tag Option HTML
• 3 Atribut Utama pada Penggunaan Tag Output HTML

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

Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

Berbagi :