Rumah > Artikel > hujung hadapan web > Borang Pendaftaran dalam HTML
Borang Pendaftaran dalam HTML
- PHPzasal
- 2024-09-04 16:44:53449semak imbas
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
Perkara utama yang dibincangkan dalam artikel ini untuk mereka bentuk halaman web dalam HTML ialah:
- Bagaimana untuk menyediakan projek anda?
- Bagaimana untuk bermula dengan struktur HTML?
- Bagaimana untuk menambah kandungan pada badan?
- Bagaimana untuk menstruktur kandungan anda?
- Bagaimana untuk menyimpan fail HTML anda?
- Bagaimana untuk melihat halaman web anda?
Berikut ialah sintaks asas untuk Borang HTML.
Sintaks:
<form action = "URL" method = "GET or POST"> form elements like submit or reset buttons, input, text area etc. </form>
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:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<form>
<div class="container">
<h1>Register Here</h1>
<p>Please fill in the details to create an account with us.</p>
<hr>
<label for="email"><b>Enter Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pwd"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd">
<label for="confirm"><b>Confirm Password</b></label>
<input type="password" placeholder="Confirm Password" name="confirm">
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn"><strong>Register</strong></button>
</div>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>Job Application Registration</h2>
<form action="/apply" method="POST">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="resume">Resume (PDF or Word):</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" required>
<label for="position">Position Applied:</label>
<select id="position" name="position" required>
<option value="">Select Position</option>
<option value="frontend-developer">Frontend Developer</option>
<option value="backend-developer">Backend Developer</option>
<option value="graphic-designer">Graphic Designer</option>
</select>
<input type="submit" value="Submit Application">
</form>
</body>
</html>
Output:
Contoh 3: Borang Pendaftaran Hotel
Berikut ialah contoh membuat Borang Pendaftaran Hotel dalam HTML.
Kod:
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<img src="image.jpg" alt="Hotel Image" style="display: block; margin: 0 auto 20px; width: 500px;">
<form>
<div class="form-row">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="form-row">
<label for="email">Email ID</label>
<input type="email" id="email" name="email">
</div>
<div class="form-row">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-row">
<label for="guests">Number of Guests</label>
<input type="number" id="guests" name="guests">
</div>
<div class="form-row">
<label for="check-in">Check-in Date</label>
<input type="date" id="check-in" name="check-in">
</div>
<div class="form-row">
<label for="check-out">Check-out Date</label>
<input type="date" id="check-out" name="check-out">
</div>
<div class="form-row">
<label for="room-type">Room Type</label>
<select id="room-type" name="room-type">
<option value="">Select Room Type</option>
<option value="single">Single</option>
<option value="double">Double</option>
<option value="suite">Suite</option>
</select>
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Atas ialah kandungan terperinci Borang Pendaftaran dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!