Cara membuat Form dengan HTML
Membuat Form Login
<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>
Hasilnya:
Membuat Form Formulir
<html>
<head>
<title>Form Formulir</title>
</head>
<body>
<form action="login.php" method="post">
<fieldset>
<legend>Form</legend>
<p>
<label>Alamat Web:</label>
<input type="url" name="Name" placeholder="Alamat Web..." />
</p>
<p>
<label>Tanggal Lahir:</label>
<input type="date" name="tanggal" />
</p>
<p>
<label>Umur:</label>
<input type="number" min="13" max="90" name="Umur" />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</body>
</html>
Hasilnya:
Membuat Form Contact
<html><head>
<title>Form Contact</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend>Contact</legend>
<p>
<label>Name:</label>
<input type="text" name="name" placeholder="Name..." />
</p>
<p>
<labeL>Subject</label>
<input type="text" name="subject" placeholder="Subject..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Email..." />
</p>
<p>
<input type="submit" name="submit" value="Send" />
</p>
</fieldset>
</form>
</html>
Hasilnya:
Membuat Form Registrasi
<html>
<head>
<title>Form Registrasi</title>
</head>
<body>
<fieldset>
<legend>Registrasi</legend>
<p>
<label>Nama:</label>
<input type="text" name="Nama" placeholder="Nama..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="Username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Email..." />
</p>
<P>
<label>Password:</label>
<input type="password" name="password" placeholder="Password..." />
</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>
</html>
Hasilnya:
Jika ingin digabungkan
<html>
<head>
<title>Formulir jadi pacar</title>
</head>
<body>
<marquee bgcolor="yellow" style="font-family:monotype corsiva;">Registrasi pacar Online..........Becanda si hahahaha</marquee>
<center>
<fieldset>
<legend>Formulir</legend>
<p>
<h1>Login</h1>
<label>Nama:</label>
<input type="text" name="Nama" placeholder="Nama..." />
</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>
<h1>Registrasi</h1>
<label>Nama:</label>
<input type="text" name="Nama" placeholder="Nama..." />
</p>
<p>
<label>Username:</label>
<input type="text" name="Username" placeholder="Username..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Email..." />
</p>
<P>
<label>Password:</label>
<input type="password" name="password" placeholder="Password..." />
</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>
<h1>Contact</h1>
<label>Nama:</label>
<input type="text" name="nama" placeholder="Nama..." />
</p>
<p>
<label>Subject:</label>
<input type="text" name="subject" placeholder="Subject..." />
</p>
<p>
<label>Email:</label>
<input type="email" name="email" placeholder="Email..." />
</p>
<p>
<h1>Form</h1>
<label>URL Web:</label>
<input type="url" name="name" placeholder="URL Web..." />
</p>
<p>
<label>Tanggal Lahir:</label>
<input type="date" name="tanggal" />
</p>
<p>
<label>Umur:</label>
<input type="number" min="10" max="100" />
</p>
<p>
<input type="submit" name="submit" value="Kirim" />
</p>
</center>
</fieldset>
</form>
</body>
</html>
Hasilnya :
Terimakasih kak untuk artikelnya. Artikel ini sangat jelas dan mudah dimengerti. Apalagi untuk saya yang baru belajar tentang cara membuat form dengan html. Semoga kedepannya kakak bisa membuat artikel lain tentang html. Sukses terus ya kak. Perkenalkan nama saya Sri Rezeki. Kunjungi website kampus saya https://www.atmaluhur.ac.id/
BalasHapus