Beberapa menyebutnya sihir -- kemampuan untuk membuat objek muncul tiba-tiba entah dari mana. Anda dapat membuat keajaiban semacam ini di situs web Anda menggunakan beberapa baris JavaScript. Kotak teks, misalnya, adalah elemen HTML yang bagus untuk digunakan saat belajar membuat objek muncul secara dinamis. Alih-alih membangunnya ke dalam kode Anda saat Anda mendesain halaman Web Anda, tambahkan kotak teks sesuai kebutuhan dan buat pengunjung situs terkesan pada saat yang bersamaan
Pembuatan Kotak Teks
Sebelum membuat text box terwujud, Anda harus memahami apa itu text box. HTML mengetahuinya sebagai tag input seperti yang ditunjukkan pada contoh berikut
Tag input ini membuat kotak teks yang memiliki dua atribut penting; . Atribut tipe, yang nilainya adalah "teks", memberi tahu browser untuk membuat kotak teks alih-alih jenis kontrol lain seperti tombol. Atribut id, yang bersifat opsional, dapat berguna jika Anda perlu memanipulasi kotak teks nanti. Opsi nilai, yang juga bersifat opsional, berisi nilai yang ingin Anda lihat di kotak teks saat halaman Web terbuka
Kotak Teks Dinamis
HTML tidak peduli ketika Anda mendefinisikan atribut elemen selama Anda memberi mereka nilai di suatu tempat. Ini berarti Anda memiliki kemampuan untuk membuat elemen kotak teks secara dinamis dan mengatur atributnya kapan pun Anda suka. Dokumen. fungsi createElement memungkinkan ini seperti yang ditunjukkan di bawah ini
kotak var = dokumen. createElement("masukan");
Hanya itu yang diperlukan untuk membuat elemen input HTML dan menugaskannya ke variabel bernama "box. "Objek kotak tidak menjadi kotak teks hingga Anda memberikan nilai "teks" pada atribut tipenya seperti yang ditampilkan dalam contoh ini
kotak. jenis = "teks";
Integrasi Halaman Web
Kode di bawah ini menambahkan kotak teks ke dokumen HTML. menggunakan fungsi appendChild yang berguna
dokumen. tubuh. appendChild(kotak);
Jika Anda ingin menambahkan kotak teks setelah kontrol tertentu, gunakan pernyataan berikut sebagai gantinya
dokumen. getElementById("some_Element_ID"). appendChild(kotak);
Ganti "some_Element_ID" dengan nama elemen yang ingin Anda tambahkan ke kotak teks. Misalnya, jika elemen tersebut adalah tombol yang ID-nya adalah "button1", pernyataan appendChild akan muncul sebagai berikut
dokumen. getElementById("tombol1"). appendChild(kotak);
Atribut Opsional
Kotak teks baru Anda akan bekerja dengan sempurna menggunakan kode ini. Cukup buat fungsi JavaScript yang berisi pernyataan dan panggil kapan pun Anda membutuhkan kotak teks. Namun, Anda juga dapat menyetel atribut nilai dan ID kotak teks sebagai berikut
kotak. nilai = kotakNilai; . id = boxID;
Meneruskan nilai boxValue dan boxID ke fungsi, dan menerapkan atribut tersebut ke kotak teks. Jika Anda menetapkan nilai ID, Anda dapat menggunakannya nanti untuk memperbarui properti kotak teks seperti yang ditunjukkan pada contoh di bawah
var boxObject = dokumen. getElementById(boxID); . gaya. warna latar = "merah";
Pernyataan pertama memperoleh referensi ke kotak teks dan pernyataan terakhir mengubah warna latar belakang kotak teks menjadi merah
Kotak teks adalah kontrol input umum dalam HTML, tetapi memiliki berbagai atribut tersembunyi. Kotak teks HTML adalah area di layar tempat pengguna dapat memasukkan input teks. Ini adalah elemen input umum yang ditemukan di banyak program perangkat lunak, seperti browser web, klien email, dan pengolah kata. Saat Anda mengeklik kotak teks, kursor diaktifkan, yang menunjukkan bahwa pengguna dapat mulai mengetik.
Apa itu Kotak Teks HTML?
The HTML textbox is an input control that allows the user to enter the text input on the web page. The is used to create a textbox.
Kursus Pengembang Web Stack Penuh
Untuk menjadi ahli dalam MEAN Stack Lihat KursusMengatur Nilai Default untuk Textbox
Jika Anda ingin menetapkan nilai default ke kotak teks, Anda dapat menggunakan atribut nilai. Setiap kali formulir dimuat, nilai default ditampilkan di dalam kotak teks
Kotak Teks Multibaris
The HTML is a tag used within a form to declare a multiline textbox that allows the user to input text over multiple lines.
Atribut Spesifik dari Textbox
Kotak teks HTML mendukung atribut berikut
Atribut
Nilai
Keterangan
Fokus otomatis
Fokus otomatis
Ini menentukan bahwa kotak teks harus secara otomatis fokus saat halaman dimuat
Kol
Nomor
Ini menentukan lebar kotak teks
Baris
Nomor
Ini menentukan ketinggian kotak teks
Membungkus
Keras
lembutIni menentukan teks yang akan dibungkus dalam kotak teks
Dengan disabilitas
Dengan disabilitas
Ini menentukan lebar kotak teks berdasarkan jumlah karakter yang terlihat
Membentuk
Formulir_id
Ini menentukan satu atau lebih formulir
Panjang maksimal
Nomor
Ini menentukan jumlah maksimum karakter dalam kotak teks
Nama
Teks
Ini memberikan nama ke kotak teks
Placeholder
Teks
Ini menentukan petunjuk singkat tentang kotak teks
Dukungan Peramban
Chrome
Safari
YAITU
Firefox
Opera
Android
Ya
Ya
Ya
Ya
Ya
Ya
Dapatkan keterampilan dalam HTML5 dan CSS3 dengan. Klik untuk memeriksa detail program.
Langkah selanjutnya
Kami sangat berharap artikel tentang kotak teks HTML ini memberi Anda wawasan singkat tentang cara memasukkan input teks di halaman web Anda. Meskipun ini bersifat informasi, untuk mempelajari lebih lanjut tentang pengembangan web secara keseluruhan, sertifikasi yang sesuai sangat disarankan untuk memulai karir pengkodean Anda. Full Stack Java Developer Simplilearn akan membantu Anda menguasai pengembangan web dan membantu Anda meningkatkan keterampilan. Kursus ini mengeksplorasi berbagai topik yang relevan, yang mencakup teknologi pengembangan web front-end, middleware, dan back-end menggunakan Java. Anda akan belajar membuat aplikasi end-to-end, menguji dan menerapkan kode, menyimpan data menggunakan MongoDB, dan banyak lagi.
Jika Anda memiliki pertanyaan atau umpan balik terkait artikel tag HTML, beri tahu kami di bagian komentar artikel ini. Pakar kami akan menghubungi Anda kembali secepat mungkin
Temukan Bootcamp Online Pengembang Java Stack Lengkap kami di kota-kota teratas
NameDatePlaceFull Stack Java DeveloperCohort dimulai pada 8 Februari 2023,Batch akhir pekanKota AndaLihat Detail Full Stack Java DeveloperCohort dimulai pada 15 Feb 2023,
Batch akhir pekanKota AndaLihat Detail Full Stack Java DeveloperCohort dimulai pada 22 Februari 2023,
Batch akhir pekanDetail CityView Anda
tentang Penulis
Aryan adalah penggila teknologi yang suka mengikuti perkembangan teknologi yang sedang tren saat ini. Dia bersemangat tentang semua hal teknologi, seorang peneliti yang tajam, dan menulis untuk menginspirasi. Selain teknologi, dia adalah pemain sepak bola yang aktif dan sangat antusias dengan permainan ini