Borang Pendaftaran dalam HTML

Borang HTML ialah komponen penting yang ditemui merentas banyak tapak web hari ini, menyediakan pelbagai tujuan seperti pengesahan pengguna, pendaftaran, pengumpulan maklum balas dan banyak lagi. Borang ini memudahkan pengumpulan data dan maklumat berharga daripada pelawat ke tapak anda.

Borang HTML dibina menggunakan elemen khas yang dikenali sebagai ‘kawalan.’ Kawalan ini merangkumi pelbagai pilihan seperti kawasan teks, butang radio, kotak semak dan butang serah, membolehkan pengguna memasukkan butiran mereka dengan berkesan. Pengguna boleh mengubah suai maklumat yang diberikan dengan memasukkan teks, memilih item tertentu dan melakukan tindakan lain yang berkaitan dengan berinteraksi dengan kawalan ini. Setelah borang dilengkapkan, ia boleh diserahkan, membawa kepada hasil yang berbeza seperti penambahan data, penghantaran, ubah hala ke halaman lain, atau bahkan penyimpanan butiran dalam pangkalan data.

Borang HTML ialah cara interaktif dan mesra pengguna untuk melibatkan pelawat tapak web. Ia memudahkan komunikasi dan pertukaran data yang lancar antara pengguna dan pemilik tapak web, memperkasakan perniagaan untuk mengumpulkan cerapan penting dan meningkatkan pengalaman pengguna.

Bagaimana untuk Mencipta Borang HTML?

Membuat borang HTML melibatkan penggunaan elemen, yang berfungsi sebagai bekas untuk kandungan borang. Bersama-sama dengan elemen HTML lain, seperti

,

dan , anda boleh mereka bentuk bentuk yang berfungsi sepenuhnya. Selain itu, CSS boleh digunakan untuk meningkatkan penampilan dan pengalaman pengguna.

Nota: Jika anda baru dalam pembangunan web dan ingin belajar cara menulis kod HTML asas, kami mempunyai artikel tentang mereka bentuk halaman web dalam HTML. Ia menyediakan panduan langkah demi langkah untuk menulis kod HTML.

Perkara utama yang dibincangkan dalam artikel ini untuk mereka bentuk halaman web dalam HTML ialah:

1. Bagaimana untuk menyediakan projek anda?
2. Bagaimana untuk bermula dengan struktur HTML?
3. Bagaimana untuk menambah kandungan pada badan?
4. Bagaimana untuk menstruktur kandungan anda?
5. Bagaimana untuk menyimpan fail HTML anda?
6. Bagaimana untuk melihat halaman web anda?

Berikut ialah sintaks asas untuk Borang HTML.

Sintaks:

form elements like submit or reset buttons, input, text area etc.

Contoh Borang Pendaftaran dalam HTML

Mari lihat beberapa contoh borang pendaftaran menggunakan HTML:

Contoh 1: Borang Pendaftaran Mudah

Berikut ialah contoh membuat borang pendaftaran HTML yang mudah.

Kod:

<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-top: 0;
}
p {
text-align: center;
color: #777;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #ccc;
}
a {
color: #337ab7;
text-decoration: none;
}
button[type="submit"] {
display: block;
width: 100%;
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
}
button[type="submit"]:hover {
background-color: #45a049;
}
.container.signin {
text-align: center;
color: #777;
}
</style>

Register Here

Please fill in the details to create an account with us.

---

Enter Email Password Confirm Password

---

By creating an account you agree to our Terms & Privacy.

Register

Already have an account? Sign in.

Output:

Borang Pendaftaran: Pengesahan

Untuk memastikan pengguna memasukkan alamat e-mel mereka, kami akan memasukkan kod pengesahan yang mencetuskan pop timbul jika mereka cuba menyerahkan borang tanpa melengkapkan medan e-mel, tanpa mengira kata laluan dan input pengesahan.

Kata kunci 'diperlukan' dengan elemen menunjukkan bahawa elemen mesti diisi. Kami akan menambahkan kata kunci ini pada medan teks kami, ‘E-mel’ dan lihat hasilnya di bawah;

<input type="text" placeholder="Enter Email" name="email" required>

Begitu juga, anda perlu lakukan untuk medan Kata Laluan dan Sahkan Kata Laluan.

<input type="password" placeholder="Enter Password" name="pwd" required>
<input type="password" placeholder="Confirm Password" name="confirm" required>

Output:

Contoh 2: Borang Pendaftaran Permohonan Pekerjaan

Berikut ialah contoh membuat Borang Pendaftaran Permohonan Pekerjaan dalam HTML.

Kod:

<title>Job Application Registration Form</title>
<style>
body {
font-family: Calibri, sans-serif;
background-color: #72b7f4;
}
h2 {
color: #232729;
text-align: center; /* Center align the title */
}
form {
background-color: #bfddf7;
max-width: 500px;
margin: 0 auto;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
color: #333333;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="file"] {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
background-color: #ffffff; /* Set background color to white */
}
select {
width: 100%;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}
input[type="submit"] {
background-color: #1a73e8;
color: #ffffff;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0059b3;
}
</style>


<h2 id="Job-Application-Registration">Job Application Registration</h2>

Full Name: Email Address: Phone Number: Resume (PDF or Word): Position Applied: Select Position Frontend Developer Backend Developer Graphic Designer

Output:

Contoh 3: Borang Pendaftaran Hotel

Berikut ialah contoh membuat Borang Pendaftaran Hotel dalam HTML.

Kod:

<title>Hotel Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0bd9d;
padding: 20px;
}
form {
max-width: 500px;
margin: 0 auto;
background: linear-gradient(to bottom right, #fff, #f1f1f1);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
.form-row {
margin-bottom: 20px;
}
.form-row label {
display: block;
margin-bottom: 5px;
}
.form-row input,
.form-row select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
input[type="submit"] {
padding: 10px 20px;
background: linear-gradient(to bottom right, #db4340, #ff6f00);
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
</style>


<img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Hotel Image"   style="max-width:90%">

Name

Email ID

Phone Number

Number of Guests

Check-in Date

Check-out Date

Room Type Select Room Type Single Double Suite

Output:

Atas ialah kandungan terperinci Borang Pendaftaran dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!