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>.
Sintak: <input type = "value" .... />
Atribut:
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.
Atribut:
- type: digunakan untuk menentukan tipe dari elemen input, yang secara default nilainya adalah teks.
- value: digunakan untuk menentukan nilai dari elemen input.
- placeholder: digunakan untuk menentukan petunjuk deskripsi dari nilai input.
- name: digunakan untuk menentukan nama dari elemen input.
- alt: digunakan untuk menyediakan teks alternatif bagi user, jika image tidak dapat dimunculkan.
- autofocus: digunakan untuk menentukan apakah akan dilakukan get focus secara otomatis atau tidak ketika halaman loading.
- 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” >.
- 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.
- form: digunakan untuk menentukan satu atau lebih form untuk elemen input.
- max: digunakan untuk menentukan nilai maksimum untuk elemen input.
- required: digunakan untuk menentukan apakah bidang input harus dipenuhi sebelum format di submit atau tidak.
- 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.
- accept: properti ini digunakan untuk menentukan tipe dari file yang dapat diterima oleh server.
- align: digunakan untuk menentukan perataan dari input image.
- autocomplete: digunakan untuk menentukan apakah elemen input harus memiliki autocomplete enabled atau tidak.
- dirname: digunakan untuk menentukan arah teks yang akan di-submit.
- formaction: digunakan untuk menentukan URL dari file yang akan memproses input kontrol ketika dilakukan submit.
- formenctype: digunakan untuk menentukan bagaiman form data harus diencode ketika dilakukan submit ke server.
- formmethod: digunakan untuk mendefinisikan elemen form untuk tidak divalidasi ketika di-submit.
- formtarget: digunakan untuk menentukan dimana respon tampilan akan diterima setelah submit form.
- height: digunakan untuk menentukan panjang dari elemen input.
- list: digunakan untuk elemen datalist yang mengandung pre definisi opsional untuk elemen input.
- maxlength: digunakan untuk menentukan angka maksimum dari karakter yang diizinkan dalam elemen input.
- min: digunakan untuk menentukan nilai minimum untuk elemen input.
- multiple: digunakan untuk menentukan apakah user dapat menambahkan nilai lebih dari satu dalam elemen input.
- pattern: digunakan untuk menentukan ekspresi reguler yang telah diperiksa ulang nilai elemen inputnya.
- size: digunakan untuk menentukan lebar pada karakter dari elemen input.
- src: digunakan untuk menentukan URL image yang digunakan sebagai submit button.
- step: digunakan untuk menentukan interval angka untuk bidang input.
- 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:
Pembuatan inputan pada laman berbasis kode sangat penting dalam interaksi antara pengguna dengan suatu aplikasi atau situs. Salah satu elemen yang digunakan untuk membuat inputan adalah melalui elemen pada struktur dasar halaman. Elemen ini menjadi dasar dari banyak formulir dan komponen interaksi lainnya yang dibangun dalam sebuah halaman situs.
Elemen input memiliki berbagai macam fungsi, tergantung pada nilai atribut yang diberikan. Fungsinya sangat beragam, mulai dari teks biasa, pilihan tanggal, hingga opsi seleksi ganda. Salah satu keunggulan dari elemen ini adalah fleksibilitas yang dimilikinya, sehingga memungkinkan untuk digunakan dalam berbagai kebutuhan, mulai dari pembuatan formulir pendaftaran hingga formulir pemesanan produk.
Pada awal perkembangannya, elemen input umumnya hanya digunakan untuk menerima data teks sederhana. Namun, seiring dengan perkembangan teknologi dan kebutuhan yang semakin kompleks, kini elemen ini dapat digunakan untuk berbagai jenis masukan, seperti bilangan, email, tanggal, dan bahkan file. Kemampuan untuk menerima berbagai jenis masukan ini sangat membantu dalam memperkaya pengalaman pengguna dan meningkatkan efisiensi dalam pengumpulan data.
Baca Juga:
Untuk memahami bagaimana elemen input bekerja, perlu dipahami bahwa setiap elemen ini memiliki atribut yang dapat disesuaikan untuk keperluan tertentu. Atribut-atribut ini membantu dalam mengatur bagaimana elemen tersebut berfungsi di dalam suatu formulir. Sebagai contoh, ada atribut yang memungkinkan untuk menetapkan jenis masukan yang diizinkan, seperti teks atau angka, serta atribut yang menetapkan apakah suatu inputan wajib diisi atau tidak. Atribut-atribut ini memberikan fleksibilitas yang tinggi dan dapat disesuaikan dengan berbagai macam kebutuhan dalam sebuah situs atau aplikasi.
Jenis-jenis input yang bisa dibuat juga sangat beragam. Beberapa di antaranya adalah tipe teks, bilangan, sandi, email, file, tanggal, dan waktu. Setiap tipe input ini memiliki karakteristik tersendiri yang membuatnya cocok untuk jenis data tertentu. Misalnya, input tipe teks sangat ideal untuk menerima masukan yang berupa tulisan, sementara input bilangan sangat tepat untuk menerima data numerik seperti usia atau jumlah barang.
Selain jenis input yang beragam, elemen ini juga dilengkapi dengan atribut tambahan yang dapat memperkaya fungsionalitasnya. Beberapa atribut tambahan yang umum digunakan antara lain panjang maksimal karakter yang dapat dimasukkan, placeholder atau teks bayangan yang muncul sebelum pengguna mulai mengetik, serta atribut untuk menonaktifkan sementara elemen input jika kondisi tertentu terpenuhi. Atribut-atribut ini memberikan fleksibilitas tambahan bagi pengembang dalam menciptakan pengalaman pengguna yang lebih baik.
Salah satu atribut yang sangat berguna pada elemen input adalah kemampuan untuk menentukan nilai awal dari suatu inputan. Hal ini memungkinkan pengembang untuk memberikan nilai default kepada pengguna ketika halaman pertama kali dimuat. Nilai awal ini bisa berupa teks contoh, angka tertentu, atau tanggal default, tergantung pada jenis input yang digunakan. Dengan adanya nilai awal, pengguna dapat lebih mudah memahami jenis data yang diharapkan untuk dimasukkan ke dalam formulir.
Selain itu, elemen input juga dapat dikombinasikan dengan elemen lainnya untuk menciptakan antarmuka yang lebih interaktif. Misalnya, elemen ini dapat digunakan bersama elemen pemilih daftar untuk memberikan pilihan yang sudah ditetapkan kepada pengguna, sehingga tidak perlu mengetik secara manual. Hal ini dapat meningkatkan akurasi input serta mengurangi kesalahan dalam pengisian formulir.
Pentingnya memahami penggunaan elemen input juga terlihat pada perannya dalam pengelolaan validasi data. Validasi adalah proses memastikan bahwa data yang dimasukkan sesuai dengan format atau ketentuan yang telah ditetapkan. Elemen input mendukung berbagai mekanisme validasi, baik melalui pengaturan di sisi klien maupun di sisi peladen. Pada sisi klien, atribut tertentu dapat digunakan untuk menentukan pola masukan yang diizinkan, seperti pola untuk email atau nomor telepon. Hal ini sangat membantu dalam mencegah terjadinya kesalahan pengisian data sebelum dikirimkan ke peladen.
Ketersediaan elemen input untuk berbagai tipe masukan juga memungkinkan penerapan standar aksesibilitas yang lebih baik. Misalnya, pengguna dapat dengan mudah memilih tanggal atau waktu melalui input tipe tanggal, yang meminimalkan kesalahan pengisian format. Fitur-fitur seperti ini sangat membantu dalam menciptakan aplikasi yang lebih ramah pengguna dan dapat diakses oleh berbagai kelompok pengguna, termasuk yang memiliki keterbatasan fisik atau teknis.
Kegunaan elemen input tidak hanya terbatas pada pengumpulan data pengguna. Elemen ini juga dapat digunakan dalam berbagai skenario lain seperti pencarian data, navigasi interaktif, hingga pengunggahan berkas. Setiap fungsi ini memanfaatkan kemampuan elemen input untuk menangani berbagai jenis data dan interaksi pengguna secara efisien.
Pada konteks pengembangan aplikasi atau situs yang melibatkan banyak data pengguna, elemen input sering kali digunakan bersama dengan elemen lain untuk menciptakan antarmuka yang lebih kompleks. Misalnya, dalam sebuah formulir pendaftaran, elemen input dapat dipadukan dengan kotak centang, tombol radio, atau pemilih daftar untuk memberikan lebih banyak opsi kepada pengguna. Dengan cara ini, pengalaman pengguna dapat disesuaikan dengan kebutuhan spesifik aplikasi.
Untuk menjaga kenyamanan pengguna dalam memasukkan data, elemen input juga dapat diatur untuk menampilkan pesan kesalahan atau petunjuk tambahan jika data yang dimasukkan tidak sesuai dengan ketentuan. Pesan kesalahan ini biasanya muncul dalam bentuk teks di bawah elemen input yang bermasalah, memberikan informasi kepada pengguna tentang kesalahan yang terjadi dan cara memperbaikinya. Ini merupakan salah satu aspek penting dalam menciptakan formulir yang lebih interaktif dan ramah pengguna.
Dalam penggunaan sehari-hari, elemen input menjadi bagian penting dari banyak aplikasi berbasis laman. Dengan memahami cara kerja elemen ini dan bagaimana atribut-atributnya dapat dioptimalkan, pengembang dapat menciptakan formulir yang lebih fungsional dan mudah digunakan oleh pengguna. Dari sudut pandang desain, penting juga untuk mempertimbangkan tata letak dan estetika dari elemen input, sehingga pengguna dapat dengan mudah mengenali dan menggunakannya tanpa mengalami kebingungan.
Pada akhirnya, elemen input merupakan salah satu komponen utama dalam pengembangan aplikasi berbasis kode. Dengan berbagai kemampuan dan atribut yang dimilikinya, elemen ini memungkinkan pengembang untuk menciptakan pengalaman interaksi yang lebih baik bagi pengguna. Fleksibilitas dalam jenis masukan, dukungan untuk validasi data, serta kemudahan integrasi dengan elemen lain membuat elemen ini menjadi pilihan utama dalam pembuatan formulir atau antarmuka pengguna yang interaktif dan efisien.
Sebagai bagian dari pengembangan aplikasi modern, elemen input terus berkembang untuk memenuhi kebutuhan yang semakin beragam. Kemampuannya untuk menangani berbagai jenis masukan serta fleksibilitas yang dimiliki menjadikan elemen ini sebagai salah satu elemen paling penting dalam desain dan pengembangan antarmuka aplikasi atau laman yang efektif dan ramah pengguna.
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 akan dibaca oleh: Arien Melania Ramadhany, Atika Nabilah, Chofifah Nur Mustaghfiroh, Devi Sinta Dewi, dan Eka Nurul Istiqomah.
6 komentar untuk "Membuat Inputan HTML Menggunakan Tag Input"
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 -
Apa yang dimaksud dengan tag input pada html?
BalasHapusTag 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.
HapusApa fungsi tag input pada html?
BalasHapusTag 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.
HapusApa fungsi atribut name pada tag input html?
BalasHapusAtribut 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