cari

Rumah >hujung hadapan web >html tutorial >Borang Pendaftaran dalam HTML

Borang Pendaftaran dalam HTML

PHPz
PHPzasal
2024-09-04 16:44:53506semak 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 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 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 dalam HTML

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:
Borang Pendaftaran dalam HTML

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:
Borang Pendaftaran dalam HTML

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:

Borang Pendaftaran dalam HTML

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

css html if for include using Collection this input database
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tindakan Borang HTMLArtikel seterusnya：Tindakan Borang HTML

Artikel berkaitan

Lihat lagi