Tombol kirim
Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 7 dari 27.
Tombol pengiriman adalah elemen penting dalam formulir HTML yang memungkinkan pengguna mengirim data formulir ke server untuk diproses.
Buat formulir HTML dasar dengan tombol kirim:
<form id="myForm">
<input type="text" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>Atribut type="submit" menentukan bahwa tombol harus mengirim formulir saat diklik.
Kamu juga bisa menggunakan JavaScript untuk menangani pengiriman formulir:
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Mencegah pengiriman formulir bawaan
console.log('Form submitted!'); // Ini menampilkan pesan di konsol
});method preventDefault() mencegah formulir dikirim dengan cara tradisional, sehingga kamu dapat menangani pengirimannya dengan JavaScript.
Tantangan
MudahTugasmu:
- Tambahkan tombol Submit ke formulir dengan
type="submit" - Di dalam event listener submit, gunakan variabel
messageuntuk mengatur konten teks menjadi "Submitted successfully"
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<title>Submit buttons</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form id="myForm">
<h2>Sign Up</h2>
<input type="text" id="email" placeholder="Enter your email">
<p id="emailMessage" class="message"></p>
</form>
<script src="script.js"></script>
</body>
</html>
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di JavaScript dalam Aksi
Latihan sendiri: Playground Web