Ringkasan. dalam tutorial ini, Anda akan belajar tentang JavaScript form API. mengakses formulir, mendapatkan nilai elemen, memvalidasi data formulir, dan mengirimkan formulir
Bentuk dasar
Untuk membuat formulir dalam HTML, Anda menggunakan elemen
document.forms
Code language: JavaScript (javascript)9<form action="/signup" method="post" id="signup"> </form>
Code language: HTML, XML (xml)_Elemen ________0______9 memiliki dua atribut penting.
document.forms[0]
Code language: CSS (css)1 dandocument.forms[0]
Code language: CSS (css)2- Atribut
document.forms[0]
Code language: CSS (css)_1 menentukan URL yang akan memproses pengiriman formulir. Dalam contoh ini, tindakannya adalahdocument.forms[0]
Code language: CSS (css)4 URL - Atribut
document.forms[0]
Code language: CSS (css)_2 menentukan metode HTTP untuk mengirimkan formulir. Biasanya, metodenya adalahdocument.forms[0]
Code language: CSS (css)_6 ataudocument.forms[0]
Code language: CSS (css)7
Umumnya, Anda menggunakan metode
document.forms[0]
Code language: CSS (css)_7 saat ingin mengambil data dari server dan metodedocument.forms[0]
Code language: CSS (css)6 saat ingin mengubah data di serverJavaScript menggunakan objek
<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)_0 untuk mewakili formulir.<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)_0 memiliki properti berikut yang sesuai dengan atribut HTMLdocument.forms[0]
Code language: CSS (css)1 – adalah URL yang memproses data formulir. Ini setara dengan atributdocument.forms[0]
Code language: CSS (css)_1 dari elemendocument.forms
Code language: JavaScript (javascript)9document.forms[0]
Code language: CSS (css)2 – adalah metode HTTP yang setara dengan atributdocument.forms[0]
Code language: CSS (css)2 dari elemendocument.forms
Code language: JavaScript (javascript)9
Elemen
<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)_0 juga menyediakan metode berguna berikut ini<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)9 – mengirimkan formulir<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)_0 – setel ulang formulir
Formulir referensi
Untuk mereferensikan elemen
document.forms
Code language: JavaScript (javascript)_9, Anda dapat menggunakan metode pemilihan DOM seperti<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)2const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)Sebuah dokumen HTML dapat memiliki beberapa bentuk. Properti
<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)_3 mengembalikan kumpulan formulir (<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)4) pada dokumendocument.forms
Code language: JavaScript (javascript)Untuk referensi formulir, Anda menggunakan index. Misalnya, pernyataan berikut mengembalikan bentuk pertama dari dokumen HTML
document.forms[0]
Code language: CSS (css)Mengirimkan formulir
Biasanya, formulir memiliki tombol kirim. Saat Anda mengkliknya, browser mengirimkan data formulir ke server. Untuk membuat tombol kirim, Anda menggunakan elemen
<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)_5 atau<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)6 dengan tipe<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)7<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)Atau
<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)Jika tombol kirim memiliki fokus dan Anda menekan tombol
<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)8, browser juga mengirimkan data formulirSaat Anda mengirimkan formulir, peristiwa
<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)7 dipicu sebelum permintaan dikirim ke server. Ini memberi Anda kesempatan untuk memvalidasi data formulir. Jika data formulir tidak valid, Anda dapat berhenti mengirimkan formulirUntuk melampirkan pendengar acara ke acara
<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)7, Anda menggunakan metodeconst form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });
Code language: JavaScript (javascript)1 dari elemen formulir sebagai berikutconst form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });
Code language: JavaScript (javascript)Untuk menghentikan pengiriman formulir, Anda memanggil metode
const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });
Code language: JavaScript (javascript)2 dari objekconst form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });
Code language: JavaScript (javascript)3 di dalam event handler<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)7 seperti iniform.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)Biasanya, Anda memanggil metode
const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });
Code language: JavaScript (javascript)_5 jika data formulir tidak valid. Untuk mengirimkan formulir dalam JavaScript, Anda memanggil metode<input type="submit" value="Subscribe">
Code language: HTML, XML (xml)9 dari objek formulirform.submit();
Code language: CSS (css)Perhatikan bahwa
const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });
Code language: JavaScript (javascript)_7 tidak memicu peristiwa<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)7. Oleh karena itu, Anda harus selalu memvalidasi formulir sebelum memanggil metode iniMengakses bidang formulir
Untuk mengakses bidang formulir, Anda dapat menggunakan metode DOM seperti
const form = document.getElementById('signup'); form.addEventListener('submit', (event) => { // handle the form data });
Code language: JavaScript (javascript)9,<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)2,form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)1, dllSelain itu, Anda dapat menggunakan properti
form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)3. Propertiform.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)_4 menyimpan kumpulan elemen formJavaScript memungkinkan Anda mengakses elemen berdasarkan indeks, id, atau nama. Misalkan Anda memiliki formulir pendaftaran berikut dengan dua
<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)5 elemen<form action="signup.html" method="post" id="signup"> <h1>Sign Up</h1> <div class="field"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your fullname" /> <small></small> </div> <div class="field"> <label for="email">Email:</label> <input type="text" id="email" name="email" placeholder="Enter your email address" /> <small></small> </div> <button type="submit">Subscribe</button> </form>
Code language: HTML, XML (xml)Untuk mengakses elemen formulir, Anda mendapatkan elemen formulir terlebih dahulu
const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_0Dan gunakan indeks, id, atau nama untuk mengakses elemen. Berikut ini mengakses elemen bentuk pertama
const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_1Berikut ini mengakses elemen input kedua
const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_2Setelah mengakses bidang formulir, Anda dapat menggunakan properti
form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)6 untuk mengakses nilainya, misalnyaconst form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_3Gabungkan semuanya. formulir pendaftaran
Berikut ilustrasi dokumen HTML yang memiliki formulir pendaftaran. Lihat demo langsungnya di sini
const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_4Dokumen HTML mereferensikan file
form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)_7 danform.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)8. Ini menggunakan elemenform.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)_9 untuk menampilkan pesan kesalahan jika elemen<button type="submit">Subscribe</button>
Code language: HTML, XML (xml)5 memiliki data yang tidak validMengirimkan formulir tanpa memberikan informasi apapun akan mengakibatkan kesalahan berikut
Mengirimkan formulir dengan nama tetapi format alamat email tidak valid akan mengakibatkan kesalahan berikut
Berikut ini menunjukkan file
form.submit();
Code language: CSS (css)_1 lengkapconst form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_5Bagaimana itu bekerja
Fungsi showMessage()
Fungsi
form.submit();
Code language: CSS (css)_2 menerima elemen input, pesan, dan tipeconst form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_6Berikut tampilan field input nama pada form
const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_7Jika nilai nama kosong, Anda harus mendapatkan induknya terlebih dahulu yaitu
form.submit();
Code language: CSS (css)3 dengan "bidang" kelasconst form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_8Selanjutnya, Anda harus memilih elemen
form.addEventListener('submit', (event) => { // stop form submission event.preventDefault(); });
Code language: PHP (php)_9const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)_9Kemudian, perbarui pesan tersebut
document.forms
Code language: JavaScript (javascript)0Setelah itu, kami mengubah kelas CSS dari bidang input berdasarkan nilai parameter tipe. Jika tipenya benar, kami mengubah kelas input menjadi sukses. Jika tidak, kami mengubah kelas menjadi kesalahan
document.forms
Code language: JavaScript (javascript)_1Terakhir, kembalikan nilai tipe
document.forms
Code language: JavaScript (javascript)_2Fungsi showError() dan showSuccess()
Fungsi
form.submit();
Code language: CSS (css)5 danform.submit();
Code language: CSS (css)6 memanggil fungsiform.submit();
Code language: CSS (css)2. Fungsiform.submit();
Code language: CSS (css)_5 selalu mengembalikanform.submit();
Code language: CSS (css)9 sedangkan fungsiform.submit();
Code language: CSS (css)6 selalu mengembalikan<form action="signup.html" method="post" id="signup"> <h1>Sign Up</h1> <div class="field"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your fullname" /> <small></small> </div> <div class="field"> <label for="email">Email:</label> <input type="text" id="email" name="email" placeholder="Enter your email address" /> <small></small> </div> <button type="submit">Subscribe</button> </form>
Code language: HTML, XML (xml)1. Selain itu, fungsiform.submit();
Code language: CSS (css)_6 menyetel pesan kesalahan ke string kosongdocument.forms
Code language: JavaScript (javascript)_3Fungsi hasValue()
Fungsi
<form action="signup.html" method="post" id="signup"> <h1>Sign Up</h1> <div class="field"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your fullname" /> <small></small> </div> <div class="field"> <label for="email">Email:</label> <input type="text" id="email" name="email" placeholder="Enter your email address" /> <small></small> </div> <button type="submit">Subscribe</button> </form>
Code language: HTML, XML (xml)_3 memeriksa apakah elemen input memiliki nilai atau tidak dan menampilkan pesan kesalahan menggunakan fungsiform.submit();
Code language: CSS (css)5 atauform.submit();
Code language: CSS (css)6 yang sesuaidocument.forms
Code language: JavaScript (javascript)_4Fungsi ValidasiEmail()
Fungsi
<form action="signup.html" method="post" id="signup"> <h1>Sign Up</h1> <div class="field"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your fullname" /> <small></small> </div> <div class="field"> <label for="email">Email:</label> <input type="text" id="email" name="email" placeholder="Enter your email address" /> <small></small> </div> <button type="submit">Subscribe</button> </form>
Code language: HTML, XML (xml)6 memvalidasi jika bidang email berisi alamat email yang validdocument.forms
Code language: JavaScript (javascript)5Fungsi
<form action="signup.html" method="post" id="signup"> <h1>Sign Up</h1> <div class="field"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your fullname" /> <small></small> </div> <div class="field"> <label for="email">Email:</label> <input type="text" id="email" name="email" placeholder="Enter your email address" /> <small></small> </div> <button type="submit">Subscribe</button> </form>
Code language: HTML, XML (xml)_6 memanggil fungsi<form action="signup.html" method="post" id="signup"> <h1>Sign Up</h1> <div class="field"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your fullname" /> <small></small> </div> <div class="field"> <label for="email">Email:</label> <input type="text" id="email" name="email" placeholder="Enter your email address" /> <small></small> </div> <button type="submit">Subscribe</button> </form>
Code language: HTML, XML (xml)3 untuk memeriksa apakah nilai bidang kosong. Jika kolom input kosong, ini menunjukkan<form action="signup.html" method="post" id="signup"> <h1>Sign Up</h1> <div class="field"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Enter your fullname" /> <small></small> </div> <div class="field"> <label for="email">Email:</label> <input type="text" id="email" name="email" placeholder="Enter your email address" /> <small></small> </div> <button type="submit">Subscribe</button> </form>
Code language: HTML, XML (xml)9Untuk memvalidasi email, itu menggunakan ekspresi reguler. Jika email tidak valid, fungsi ________56______6 menunjukkan
const form = document.getElementById('subscribe');
Code language: JavaScript (javascript)01