.jpeg)
Pada dasarnya, sebuah website memiliki banyak jenisnya. Contohnya adalah website pemerintah, website sekolah, website perusahaan dan website yang berisi tutorial.
Biasanya sebuah form digunakan pada website yang fungsinya adalah untuk mendaftar dan masuk ke akun. Form tersebut akan merespon informasi yang dikirimkan. Nah sekarang kita akan membahas Cara Membuat Form di Html. Bagaimana caranya ? Simak tutorialnya dibawah ini.
Cara Membuat Form di Html
Untuk membuat form di html, kita bisa menggunkan tag <form>. Tag <form> memiliki banyak attribute yang dapat digunakan. Contohnya adalah :
Contoh codingannya seperti dibawah ini
<form action="proses.php" method="GET"> </form>
Apa Itu Field ?
Field adalah ruas yang dapat diisi dengan data. Berikut ini adalah contoh penggunaan Field :
Field juga memiliki beberapa attribute yang harus diberikan :
<input type="text" name="info" />
- type merupakan type dari field
- name merupakan nama dari field yang akan menjadi kunci dan variabel di dalam program
Membuat Form Login
Diatas kita sudah mengetahui apa itu Field dan tag yang digunakan untuk membuat form dalam html. Sekarang kita akan mencoba membuatnya. Contohnya saya akan membuat Form Login.
Form Login sering kita temukan di berbagai website, contohnya adalah pada website Facebook. Fungsi dari form login tersebut adalah agar seseorang bisa masuk dan mengakses akun yang telah dibuatnya. Pada Form Login terdapat beberapa field dan elemen, diantaranya sebagai berikut :
- Field untuk menginputkan username atau email
- Field untuk menginputkan password
- Checkbox untuk menyatakan persetujuan
Berikut ini adalah contoh codingan nya
<!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="Masukkan Username" />
</p>
<p>
<label>Password:</label>
<input type="password" name="password" placeholder="Masukkan 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>- Input username dengan tipe text
- Input password dengan password
- Input remember denga tipe checkbox
- Input submit dengan tipe submit
Fungsi dari tag <fieldset> adalah untuk membungkus seluruh field di dalam nya dengan sebuah garis. Kemudian di dalam tag <fieldset>, terdapat tag <legend> yang fungsinya adalah untuk membuat teks pada fieldset. Kemudian perhatikan beberapa attribute pada setiap field, contohnya seperti :
- placeholder yang fungsinya untuk menampilkan teks sementara
- value yang fungsinya untuk memberikan nilai default pada field
Sebuah Form tidak hanya digunakan untuk membuat form login, namun ada juga form pendaftaran. Form Pendaftaran berfungsi untuk mendaftarkan diri kepada situs situs yang dikunjungi. Contohnya pada website Facebook. Sebelum kita login untuk mengakses akun, kita harus mendaftar terlebih dahulu.
Selanjutnya kita akan membuat Form Pendaftaran. Bagaimana cara membuatnya ? Berikut ini adalah tutorial nya.
Cara Membuat Form Pendaftaran
Form pendaftaran sering kita temukan pada beberapa website, contohnya adalah website pemerintah. Fungsi form pendaftaran pada website pemerintah adalah untuk membuat sebuah akun dan biasanya akun tersebut digunakan untuk melaporkan dan mengelola seluruh kegiatan pemerintahan. Biasanya form pendaftaran memiliki beberapa field, berikut ini adalah field field yang terdapat pada form pendaftaran :
- Input username
- Input nama lengkap
- Input email
- Input password
- Input kelamin
- Input agama
- Input biografi
Berikut ini adalah contoh codingan nya :
<!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>