Cara Membuat Formulir Kontak dengan HTML dan CSS
Cara Membuat Formulir Kontak dengan HTML dan CSS
Cara Membuat Formulir Kontak dengan HTML dan CSS - Formulir kontak adalah jenis formulir yang sangat populer. Mereka digunakan di hampir setiap situs web. Mereka adalah formulir input pengguna yang memungkinkan pengguna situs web atau aplikasi untuk memasukkan informasi yang akan digunakan oleh operator situs web atau aplikasi. Situs web ini menggunakan formulir kontak untuk mendapatkan umpan balik dari pengguna situs web alih-alih mengharuskan mereka mengirim email. Pada artikel ini, saya akan menunjukkan kepada Anda cara berhasil membuat formulir kontak sederhana menggunakan HTML dan CSS saja. Berikut adalah langkah-langkah yang harus diikuti ketika Anda membuat formulir kontak sederhana:
Baca Juga : Membuat Form dengan Visual Basic
Tulis kode boilerplate Anda di editor kode pilihan Anda: Ini adalah langkah pertama untuk menulis kode apa pun. Anda harus mendeklarasikan doctype Anda untuk menunjukkan versi html yang Anda gunakan untuk menulis. Komponen lain dari kode boilerplate adalah elemen html dan tag yang diperlukan untuk struktur halaman yang benar. Mereka termasuk; elemen html, elemen kepala, tag meta, elemen judul dan elemen tubuh yang berisi semua yang kita lihat di halaman.
<div class="container">
<div class="title">
<h1>Registration</h1>
</div>
<form action="#">
<div class="user-details">
<div class="input-deets">
<span class="deets">
First Name
</span>
<input type="text" placeholder="Enter your First name here">
</div>
<div class="input-deets">
<span class="deets">
Last Name
</span>
<input type="text" placeholder="Enter your Last name here">
</div>
<div class="input-deets">
<span class="deets">
Email
</span>
<input type="text" placeholder="Enter your Email here">
</div>
<div class="input-deets">
<span class="deets">
Phone Number
</span>
<input type="text" placeholder="Enter your Phone Number here">
</div>
<div class="input-deets">
<span class="deets">
Password
</span>
<input type="text" placeholder="Enter your password here">
</div>
</div>
<div class="btn">
<input type="submit" value="Register">
</div>
</form>
</div>
Baca Juga : Text Editor Terbaik untuk coding 2023
2. Buat formulir Anda dalam HTML:
Anda mulai dengan membuat div yang akan berfungsi sebagai wadah formulir. Ini adalah praktik terbaik karena membuat formulir secara langsung tidak memungkinkan Anda memasukkan informasi lain seperti judul di formulir/halaman kontak Anda. Dalam contoh kode di bawah ini, elemen h1 telah dimasukkan untuk membawa judul formulir. Ini akan memberi tahu pengguna bahwa itu adalah formulir pendaftaran.
<div class="container">
<div class="title">
<h1>Registration</h1>
</div>
<form action="#">
<div class="user-details">
<div class="input-deets">
<span class="deets">
First Name
</span>
<input type="text" placeholder="Enter your First name here">
</div>
<div class="input-deets">
<span class="deets">
Last Name
</span>
<input type="text" placeholder="Enter your Last name here">
</div>
<div class="input-deets">
<span class="deets">
Email
</span>
<input type="text" placeholder="Enter your Email here">
</div>
<div class="input-deets">
<span class="deets">
Phone Number
</span>
<input type="text" placeholder="Enter your Phone Number here">
</div>
<div class="input-deets">
<span class="deets">
Password
</span>
<input type="text" placeholder="Enter your password here">
</div>
</div>
<div class="btn">
<input type="submit" value="Register">
</div>
</form>
</div>
Setelah heading ditambahkan, form itu sendiri dibuat menggunakan elemen form. Elemen div lain dibuat di dalam formulir untuk memuat semua elemen lain yang akan membentuk detail pengguna seperti yang ditunjukkan di bawah ini.
<div class="container">
<div class="title">
<h1>Registration</h1>
</div>
<form action="#">
<div class="user-details">
<div class="input-deets">
<span class="deets">
First Name
</span>
<input type="text" placeholder="Enter your First name here">
</div>
<div class="input-deets">
<span class="deets">
Last Name
</span>
<input type="text" placeholder="Enter your Last name here">
</div>
<div class="input-deets">
<span class="deets">
Email
</span>
<input type="text" placeholder="Enter your Email here">
</div>
<div class="input-deets">
<span class="deets">
Phone Number
</span>
<input type="text" placeholder="Enter your Phone Number here">
</div>
<div class="input-deets">
<span class="deets">
Password
</span>
<input type="text" placeholder="Enter your password here">
</div>
</div>
<div class="btn">
<input type="submit" value="Register">
</div>
</form>
</div>
Langkah selanjutnya ini adalah salah satu dari banyak alternatif. Sebuah div dibuat untuk setiap bagian informasi tertentu. Ini termasuk namun tidak terbatas pada Nama Depan, Nama Belakang, Email, Nomor Telepon dan Kata Sandi. Di masing-masing div ini, rentang akan dibuat di samping bidang input seperti yang ditunjukkan di bawah ini. Nama kelas di atribut kelas terserah Anda untuk mempersonalisasikannya karena akan digunakan untuk gaya di CSS.
Tombol kirim atau daftar ditambahkan sebagai anak langsung dalam formulir seperti yang ditunjukkan di bawah ini. Itu dibuat dengan div dan tag input.
<div class="container">
<div class="title">
<h1>Registration</h1>
</div>
<form action="#">
<div class="user-details">
<div class="input-deets">
<span class="deets">
First Name
</span>
<input type="text" placeholder="Enter your First name here">
</div>
<div class="input-deets">
<span class="deets">
Last Name
</span>
<input type="text" placeholder="Enter your Last name here">
</div>
<div class="input-deets">
<span class="deets">
Email
</span>
<input type="text" placeholder="Enter your Email here">
</div>
<div class="input-deets">
<span class="deets">
Phone Number
</span>
<input type="text" placeholder="Enter your Phone Number here">
</div>
<div class="input-deets">
<span class="deets">
Password
</span>
<input type="text" placeholder="Enter your password here">
</div>
</div>
<div class="btn">
<input type="submit" value="Register">
</div>
</form>
</div>
3. Gaya formulir dengan CSS:
Gaya CSS sangat tergantung pada preferensi Anda. Kode di bawah ini adalah referensi dasar untuk apa yang dapat Anda terapkan dalam formulir Anda sendiri.
* {
margin: 0;
padding: 0;
}
body {
color: rgb(255, 254, 252);
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
padding: 20px 30px;
}
.container {
padding: 10px 25px;
border-radius: 10px;
max-width: 700px;
width: 100%;
font-size: 25px;
text-align: center;
height: 100%;
}
.container .title {
font-weight: 500;
position: relative;
}
form .user-details {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
form .user-details .input-deets {
margin: 20px 0 15px 0;
width: calc(100% / 2 - 20px);
margin-bottom: 5px;
}
.user-details .input-deets .deets {
display: block;
font-weight: 500;
margin-bottom: 5px;
}
.user-details .input-deets input {
width: 100%;
height: 45px;
outline: none;
border-radius: 5px;
border: 1px solid #ccc;
padding-left: 15px;
font-size: 15px;
border-bottom-width: 3px;
transition: all 0.3s ease;
}
.user-details .input-deets input:focus,
.user-details .input-deets input:valid {
border-color: #9b5936;
}
form .btn {
height: 45px;
margin: 45px 0;
}
form .btn input {
height: 100%;
width: 100%;
outline: none;
color: #4f4f44;
border: none;
font-size: 20px;
background-color: #fff;
font-weight: 500;
letter-spacing: 1px;
border-radius: 7px;
}
form .btn input:hover {
background-color: #4f4f44;
color: #fff;
}
Seperti disebutkan sebelumnya, gaya CSS di atas dapat digunakan sebagai referensi untuk gaya pilihan Anda sendiri.
==============================SELAMAT MENCOBA==========================
Posting Komentar untuk "Cara Membuat Formulir Kontak dengan HTML dan CSS"