Desain Form Keren dengan HTML dan CSS
Halo Selamat Datang Kembali teman teman, Pada kesempatan ini kita akan membahas mengenai , Bagaimana Cara Membuat Form Keren dengan HTML dan CSS. Pada pembahasan sebelumnya kita sudah mempelajari tentang CSS dan HTML, pada bagian HTML ada yang sudah membahas mengenai Form , nih silahkan cek jika teman teman lupa...
Hasil yang akan terlihat adalah seperti ini
Pada pembuatan Form Data List diatas kita menggunakan, tag datalist.
 |
| Membuat Form Keren |
BELAJAR HTML | Membuat Form di HTML
Sekilas Tentang Form
Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web.
Baik teman teman, jika teman teman sudah mengetahui dasar nya, mari langsung kita coba untuk membuat Form nya, sebelumnya siapkan Text Editor serta Kopi Hitam,,
<html>
<head>
<meta charset="UTF-8" />
<title>Membuat Form Keren</title>
<style>
legend {
color: white;
padding: 5px;
background: #006f6b;
border-radius: 5px;
}
fieldset {
max-width: 400px;
border-radius: 10px;
border-color: #4fffa5;
background: #007b65;
}
label {
float: left;
}
input {
border: none;
border-radius: 3px;
height: 30px;
}
input:hover {
background: #7affce;
}
button {
cursor: pointer;
color: white;
background: #ff5f5f;
width: 100px;
height: 25px;
border-radius: 4px;
border: none;
}
button:hover {
background: #ff2e2e;
}
label {
color: white;
}
</style>
</head>
<body>
<div align="center">
<form>
<fieldset>
<legend>Personal Information</legend>
<p>
<label for="full-name"> Full Name </label>
<input
required
placeholder="Input Name"
id="full-name"
name="fullName"
type="text"
/>
</p>
<p>
<label for="email" style="margin-right: 25px;">
Email
</label>
<input
required
placeholder="Email"
id="email"
name="email"
type="email"
/>
</p>
<p>
<label for="telpon" style="margin-right: 10px">
No Telp
</label>
<input
required
placeholder="Telp"
id="telpon"
name="telpon"
type="number"
/>
</p>
<p>
<label for="berkas" style="margin-right: 34px">
Masukan CV
</label>
<input id="berkas" name="berkas" type="file" />
</p>
<p>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>
</div>
</body>
</html>
Teman teman, jika kita mencoba untuk view hasil dari syntak HTML dan CSS kita diatas, maka hasilnya adalah seperti ini..
Jika teman teman penasaran dengan hasilnya, teman teman bisa melihat nya Disini.
Oiya teman teman, berikut ini sekilas penjelasan tentang Syntak HTML yang kita buat diatas,
 |
| Form Keren HTML dan CSS |
Oiya teman teman, berikut ini sekilas penjelasan tentang Syntak HTML yang kita buat diatas,
- Fieldset : kumpulan atau koleksi input field yang memiliki tujuan yang sama
- legend : penjelasan tentang simbol atau elemen form, seperti label untuk fieldset
- label : pada widget spesifik, label untuk input
- input : kontrol interaktif (interactive controls) dengan berbagai tipe atribut seperti (text, file, number, date, dll)
- button : tombol aksi (action button) yang bisa diklik, sebuah tombol yang dapat diklik untuk menjalankan tindakan tertentu.
Form Dengan Data List
Baik teman teman, untuk selanjutnya adalah kita akan membuat Form yang berisi Data List
<html>
<head>
<meta charset="UTF-8" />
<title>Membuat Form Keren</title>
<style>
legend {
color: white;
padding: 5px;
background: #216A68;
border-radius: 5px;
}
fieldset {
max-width: 400px;
border-radius: 10px;
border-color: #4fffa5;
background: #007b65;
}
label {
float: left;
}
input {
border: none;
border-radius: 3px;
height: 30px;
margin-top: 20px;
}
button {
cursor: pointer;
color: white;
background: #ff5f5f;
width: 100px;
height: 30px;
border-radius: 4px;
border: none;
}
button:hover {
background: #ff2e2e;
}
label {
color: white;
}
</style>
</head>
<body>
<div align="center">
<form>
<fieldset align="left">
<legend>Data List</legend>
<p>
<label for="programing">
Bahasa Pemrograman Yang Di Kuasai?</label
>
<input
placeholder="Input Language"
type="text"
name="programing"
list="programingLangs"
/>
<datalist id="programingLangs">
<select name="altprogramingLangs">
<option value="javascript"> JavaScript </option>
<option value="java"> Java </option>
<option value="ruby"> Ruby </option>
<option value="python"> Python </option>
</select>
</datalist>
<button type="submit">Submit</button>
</p>
</fieldset>
</form>
</div>
</body>
</html>Hasil yang akan terlihat adalah seperti ini
 |
| Form Data List |
- datalist : daftar dari data atau nilai yang telah diatur, yang digunakan untuk menulis data sebuah daftar pilihan input.
Baiklah teman teman, mungkin cukup sekian untuk sharing kita tentang desain form hehe, terimakasih sudah berkunjung.
Salam Semangat!!
Wah sangat menarik dan mudah dipahami. Lanjutkan kakak 😬
BalasHapushhoho makasih pak
HapusSaya Rama, artikelnya mudah dimengerti dan sangat membantu, Terima kasih
BalasHapussaya wahyu, terimakasih sudah berkunjung, semoga bermanfaat ya.
HapusKak boleh minta contoh buat form input + bisa di approve atau ga di approve dari data inputan tersebut
BalasHapusbeberapa mungkin bisa dibantu dengan artikel ini kak, Pencarian tag PHP
Hapus