Cara Membuat Formulir Pendaftaran Sederhana
Konten [Tampil]
Untuk demonya cek: Form Input
Pengertian Form
Form merupakan salah satu bentuk halaman website yang digunakan untuk menerima masukkan dari pengguna. Selanjutnya masukkan dari pengguna tersebut diolah menggunakan bahasa pemograman web, baik secara server side scripting ataupun client side scripting.
Cara Membuat Form Tanpa Database Sederhana
1. Langkah pertama sebelum anda lakukan adalah membuka Notepad++, XAMPP, dan kemudian buat file "index.html", "aksi.php". Dan buat kedua files tersebut kedalam satu folder.
2. Kemudian salin kode script dibawah ini kedalam file "index.html".
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form Input - AnsoriWeb</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
form {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
form input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
text-transform: capitalize;
}
form button {
background: lightgrey;
padding: 0.7em;
border: 0;
}
form button:hover {
background: green;
color: white;
}
form span a{
background: lightblue;
padding: 0.7em;
border: 0;
text-decoration: none;
color: black;
text-align: center;
}
form span a:hover {
background: blue;
color: white;
}
label {
text-align: right;
display: block;
padding: 0.5em 1.5em 0.5em 0;
}
input {
width: 100%;
padding: 0.7em;
margin-bottom: 0.5rem;
}
input:focus {
outline: 3px solid green;
}
@media (min-width: 400px) {
form {
overflow: hidden;
}
label {
float: left;
width: 200px;
}
input {
float: left;
width: calc(100% - 200px);
}
button {
float: right;
width: calc(100% - 200px);
}
}
</style>
<body>
<form action="aksi.php" method="GET">
<h1 align="center">Membuat Input Tanpa Database</h1>
<p align="center">Tutorial by <a href="https://www.ansoriweb.com" target="blank">AnsoriWeb.com</a></p>
<label>Nama Lengkap:</label>
<input name="nama" type="text">
<label>No Absen:</label>
<input name="noabsen" type="text">
<label>Kelas:</label>
<input name="email" type="text">
<label>Nama Sekolah:</label>
<input name="sekolah" type="text">
<button>Kirim</button>
</form>
</body>
</html>
 |
| Tampilan file "index.html", jika dibuka dibrowser |
<!DOCTYPE html>4. Setelah itu silahkan disimpan. Untuk tampilannya atau demonya bisa klik disini.
<html>
<head>
<title>Membuat Form Input - AnsoriWeb</title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
form {
padding: 1em;
background: #f9f9f9;
border: 1px solid #c1c1c1;
margin-top: 2rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
form input {
margin-bottom: 1rem;
background: #fff;
border: 1px solid #9c9c9c;
text-transform: capitalize;
}
form button {
background: lightgrey;
padding: 0.7em;
border: 0;
}
form button:hover {
background: green;
color: white;
}
form span a{
background: lightblue;
padding: 0.7em;
border: 0;
text-decoration: none;
color: black;
text-align: center;
}
form span a:hover {
background: blue;
color: white;
}
label {
text-align: right;
display: block;
padding: 0.5em 1.5em 0.5em 0;
}
input {
width: 100%;
padding: 0.7em;
margin-bottom: 0.5rem;
}
input:focus {
outline: 3px solid green;
}
@media (min-width: 400px) {
form {
overflow: hidden;
}
label {
float: left;
width: 200px;
}
input {
float: left;
width: calc(100% - 200px);
}
button {
float: right;
width: calc(100% - 200px);
}
}
</style>
<body>
<form>
<h1 align="center">Data Berhasil Terkirim!</h1>
<p align="center">Tutorial by <a href="https://www.ansoriweb.com" target="blank">AnsoriWeb.com</a></p>
<label>Nama Lengkap: <?php echo $_GET["nama"]; ?></label>
<label>No Absen: <?php echo $_GET["noabsen"]; ?></label>
<label>
<label>Kelas: <?php echo $_GET["kelas"]; ?></label>
<label>Nama Sekolah: <?php echo $_GET["sekolah"]; ?></label>
</form>
</body>
</html>
Kesimpulan
Itulah tadi cara membuat form input tanpa database, tutorial yang saya berikan ini sangat sederhana untuk yang belum tahu saja dan yang masih bingung dengan cara membuatnya.
Sekian dari saya apabila ada kesalahan mohon dimaafkan, terimakasih :).
Belum ada Komentar untuk "Cara Membuat Formulir Pendaftaran Sederhana"
Posting Komentar