Cara menggunakan formulir html javascript

Question

Pada artikel kali ini saya akan membahas tentang Cara Menampilkan Hasil Form HTML dengan JavaScript. Artikel ini ditulis berdasarkan kueri dari rekan kami Doe, di Tutorial Pembelajaran JavaScript. Cara Menampilkan Hasil Program JavaScript

Table of Contents Show

Apa itu Lapangan?
Latihan. Buat Formulir Masuk
Latihan. Buat Formulir Kontak
Latihan. Membuat formulir pendaftaran
Latihan. Membuat Formulir Tingkat Lanjut
Apa berikutnya?
Langkah demi langkah untuk membuat formulir login HTML?
Apa itu tag formulir HTML?
Apa yang dimaksud dengan formulir validasi?
Apa itu validasi masukan?

Inilah pertanyaannya

Gan, misalnya kita tuh klik button pada sebuah form yang nantinya akan 
menghasilkan informasi sesuai pilihan yang di pilih pada form 1. 
Tampilnya itu di bawah form itu gan.

(form id=tampil)
 select
 –option=jakarta
 –option=bandung
 input type=button onclick=klik()

misal:dipilihnya bandung, dibawah form tersebut ada info seputar bandung gan.
Saya coba pake document.write tapi css nya gak jalan. 
Saya pakai juga getElementById tetep belum jalan.

mohon pencerahannya.
Terima kasih

Dari pertanyaan tersebut saya akan mencoba membuat halaman HTML yang akan menampilkan hasil form pada halaman yang sama menggunakan JavaScript

Berikut adalah tampilan akhir dari kode program

Dan berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan hasil di atas

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>

<script>
function tampilkan(){

  var nama_kota=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");

  if (nama_kota=="jakarta")
    {
        p_kontainer.innerHTML="Jakarta Ibu kota Republik Indonesia";
    }
  else if (nama_kota=="bandung")
    {
        p_kontainer.innerHTML="Bandung kota kembang";
    }
  else if (nama_kota=="bogor")
    {
        p_kontainer.innerHTML="Bogor kota hujan";
    }
}
</script>
</head>
<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>

<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih Kota: </label>
  <select id="select1" name="select1">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="bogor">Bogor</option>
  </select>
  <input type="submit" value="Tampilkan Keterangan" onclick="tampilkan()">
</form>

<p id="container"></p>

</body>
</html>

_

Anda dapat mencobanya dari tampilan CODEPEN di bawah ini

Lihat Pena YPXPqa oleh duniailkom (@duniailkom) di CodePen. 10206

Mari kita bahas kode HTML dan JavaScript di atas lebih detail

kode HTML

Untuk membuat contoh formulir, berikut adalah kode HTML

<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>

<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih Kota: </label>
  <select id="select1" name="select1">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="bogor">Bogor</option>
  </select>
  <input type="submit" value="Tampilkan Keterangan" onclick="tampilkan()">
</form>

<p id="container"></p>

</body>

Pada contoh di atas, saya membuat form dengan atribut id=”form1″ dan name=”form1″. Form ini hanya memiliki 1 objek form yaitu pilih dan 1 tombol submit untuk mengirim hasil form

eBuku JavaScript Uncover Duniailkom

JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript secara lebih detail dan lengkap mulai dari dasar hingga konsep DOM, Events dan AJAX. Penjelasan lebih lanjut dapat dilihat di eBook Uncover JavaScript Duniailkom

Untuk atribut action bisa kita isi dengan URL experience dari endpoint yang akan memproses form

Secara sederhana,—dalam contoh di atas—kami akan memberi tahu file

<input type="text" name="info" />

0 untuk memproses data formulir

Kita akan belajar ini nanti di PHP

Kode HTML di atas, tidak akan menghasilkan apa-apa

Karena kami belum membuat lapangan

Apa itu Lapangan?

Field adalah segmen yang dapat diisi dengan data

Contoh lapangan

<input type="text" name="info" />

Field memiliki beberapa atribut yang harus disediakan

```
<input type="text" name="info" />
```
1 adalah tipe dari bidang
```
<input type="text" name="info" />
```
2 adalah nama field yang akan menjadi key dan variabel di dalam program

Latihan. Buat Formulir Masuk

Sebagai latihan, mari buat form login

Pada form login terdapat beberapa field dan elemen

Kolom untuk input nama pengguna atau email;
Bidang untuk memasukkan kata sandi;
Kotak centang untuk mengingat saya;
Tombol untuk masuk

Ini kodenya

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil

Sekarang perhatikan

Pada kode di atas, kita membuat empat file

masukan

<input type="text" name="info" />

_3 dengan tipe

<input type="text" name="info" />

4;

masukan

<input type="text" name="info" />

_5 dengan tipe

<input type="text" name="info" />

5;

masukan

<input type="text" name="info" />

_7 dengan tipe

<input type="text" name="info" />

8;

masukan

<input type="text" name="info" />

_9 dengan tipe

<input type="text" name="info" />

9;

Kemudian ketiga file tersebut dikemas ke dalam tag

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

1

Nanti tag

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

_1 ini akan membuat garis

Di tag

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

_1, kami membuat tag

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

4 untuk menyediakan teks ke kumpulan bidang

Kemudian, perhatikan juga atribut yang digunakan pada masing-masing field

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

5 atribut untuk menampilkan teks sementara (placeholder);

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

6 atribut untuk meninggalkan nilai default di lapangan

Setiap field kita bungkus dengan tag

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

_7 agar terlihat rapi dan kita beri juga label dengan tag

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

8

Latihan. Buat Formulir Kontak

Pelatihan selanjutnya, kami akan membuat formulir kontak. Form ini berfungsi untuk menghubungi atau menghubungi admin

Silakan ikuti kode berikut

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil

Pada contoh diatas kita berikan

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="username..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="password..." />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

_9 untuk field

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

0, sehingga field ini harus diisi dengan email saja

Coba saja isi dengan yang lain, lalu klik Send.. maka akan muncul pesan peringatan

Latihan. Membuat formulir pendaftaran

Semakin banyak latihan, semakin baik

Selanjutnya kita akan mencoba membuat formulir pendaftaran

Formulir ini berisi bidang untuk

Masukkan nama lengkap;
Masukkan nama pengguna;
masukan email;
Masukkan kata sandi;
Masukan jenis kelamin;
Masukan agama;
Masukan Biografis
dll.

Ayo buat…

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil

Apa bidang baru dalam formulir?

Bidang

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

_1;

Bidang

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

2;

Bidang

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

3

Apa perbedaan antara

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

_1 dan

<input type="text" name="info" />

8?

Jika kita ingin pengunjung memilih salah satu, maka kita menggunakan

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

1

Namun jika kita ingin pengunjung memilih lebih dari satu, maka kita menggunakan

<input type="text" name="info" />

8

Kemudian untuk

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

_8, propertinya sama dengan

<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Contact</legend>
        <p>
            <label>Name:</label>
            <input type="text" name="name" placeholder="your name..." />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="subject..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="your email..." />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

1. Hanya bentuknya saja yang berbeda

Kemudian untuk menginput teks yang panjang, kita menggunakan tag

<!DOCTYPE html> <html> <head> <title>Registrasi</title> </head> <body> <form action="contact.php" method="POST"> <fieldset> <legend>Registrasi</legend> <p> <label>Nama:</label> <input type="text" name="nama" placeholder="Nama lengkap..." /> </p> <p> <label>Username:</label> <input type="text" name="username" placeholder="Username..." /> </p> <p> <label>Email:</label> <input type="email" name="email" placeholder="Your email..." /> </p> <p> <label>Password:</label> <input type="password" name="password" placeholder="Passowrd..." /> </p> <p> <label>Jenis kelamin:</label> <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label> <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label> </p> <p> <label>Agama:</label> <select name="agama"> <option value="islam">Islam</option> <option value="kristen">Kristen</option> <option value="hindu">Hindu</option> <option value="budha">Budha</option> </select> </p> <p> <label>Biografi:</label> <textarea name="biografi"></textarea> </p> <p> <input type="submit" name="submit" value="Daftar" /> </p> </fieldset> </form> </body> </html>

0

Latihan. Membuat Formulir Tingkat Lanjut

Field-field diatas merupakan jenis field yang sering digunakan dalam pembuatan form

Masih ada jenis field lain yang belum kami coba, seperti

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

1,

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

2,

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

3,

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

4,

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

5,

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

6, dll.

Mari kita coba beberapa

<!DOCTYPE html>
<html>
<head>
    <title>Form HTML</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Form</legend>
        <p>
            <label>Alamat Web:</label>
            <input type="url" name="name" placeholder="Masukan URL Web..." />
        </p>
        <p>
            <label>Tanggal Lahir:</label>
            <input type="date" name="tanggal" />
        </p>
        <p>
            <label>Umur:</label>
            <input type="number" min="10" max="90" name="umur" />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil

Jika browser Anda tidak menampilkan kalender seperti di atas, coba gunakan browser versi terbaru

Apa berikutnya?

Apa yang kita pelajari dalam tutorial ini adalah tag dan bidang dasar—dan sering digunakan—dalam pembuatan formulir

Masih banyak jenis field lain yang belum kami coba. Suka.

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

1,

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

2,

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Passowrd..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Hindu</option>
                <option value="budha">Budha</option>
            </select>
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

9, dll

Cara Membuat Formulir Login yang Menarik dengan HTML .

Deklarasikan Dokumen HTML Anda. Sekarang, buka file html formulir login Anda. .

2. Buat Header Halaman Formulir Login. .

3. Berikan Judul Halaman Form Login. .

3. Tempel File CSS. .

4. Buat Badan Formulir Masuk. .

Buat Tata Letak Formulir Login. .

6. Beri Judul pada Form Login. .

7. Buat Kotak Formulir Login

Apa itu tag formulir HTML?

Tag elemen HTML tag dalam HTML yang digunakan untuk membuat formulir untuk input pengguna .

Apa yang dimaksud dengan formulir validasi?

Apa itu Validasi Formulir? . Proses validasi ini biasanya dilakukan di Controller dan menggunakan library form_validation. proses validasi data input yang diinputkan dari form. Proses validasi ini biasanya dilakukan di Controller dan menggunalan library form_validation .

Apa itu validasi masukan?

Validasi input dilakukan untuk memastikan data yang diisi oleh user sesuai dengan yang dibutuhkan oleh aplikasi. Untuk halaman login, setidaknya ada 2 input yang harus Anda validasi. Pertama adalah inputan email dan yang kedua adalah inputan kata sandi atau password.

kode javascript