HTML 格式的註冊表-html教學-PHP中文網

如何建立 HTML 表單？

HTML 格式的註冊表示例

範例1：簡單登錄

註冊表：驗證

範例2：求職登記表

範例3：飯店登記表

首頁

web前端

html教學

HTML 格式的註冊表

PHPz

Sep 04, 2024 pm 04:44 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 表單是當今眾多網站中的重要組成部分，可用於多種目的，例如用戶身份驗證、註冊、回饋收集等。這些表格有助於從您網站的訪客收集有價值的數據和資訊。

HTML 表單是使用稱為「控制項」的特殊元素建構的。這些控制項包含一系列選項，例如文字區域、單選按鈕、複選框和提交按鈕，使用戶能夠有效地輸入詳細資訊。使用者可以透過輸入文字、選擇特定項目以及透過與這些控制項互動來執行其他相關操作來修改所提供的資訊。表單完成後，就可以提交，從而導致不同的結果，例如資料添加、傳輸、重定向到另一個頁面，甚至將詳細資訊儲存在資料庫中。

HTML 表單是一種吸引網站訪客的互動式且使用者友善的方式。它們促進用戶和網站所有者之間的無縫溝通和數據交換，使企業能夠收集重要的見解並增強用戶體驗。

如何建立 HTML 表單？

建立 HTML 表單涉及使用

元素，用作表單內容的容器。與其他 HTML 元素（例如

、和）一起，您可以設計功能齊全的表單。此外，CSS 還可用於增強外觀和使用者體驗。 注意： 如果您是 Web 開發新手並希望學習如何編寫基本 HTML 程式碼，我們有一篇關於用 HTML 設計網頁的文章。它提供了編寫 HTML 程式碼的逐步指南。

本文討論的 HTML 網頁設計重點是：

如何設定您的項目？
如何從 HTML 結構開始？
如何在正文中加入內容？
如何建構內容？
如何儲存 HTML 檔案？
如何查看您的網頁？

以下是 HTML 表單的基本語法。

文法：

<form action = "URL" method = "GET or POST">
form elements like submit or reset buttons, input, text area etc.
</form>

登入後複製

HTML 格式的註冊表示例

讓我們來看一些使用 HTML 的註冊表單範例：

範例1：簡單登錄

這是建立簡單 HTML 註冊表單的範例。

代碼：

<!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>

登入後複製

輸出：

HTML 格式的註冊表

註冊表：驗證

為了確保使用者輸入他們的電子郵件地址，我們將添加一個驗證代碼，如果他們嘗試在未填寫電子郵件欄位的情況下提交表單，無論輸入密碼和確認資訊如何，都會觸發彈出視窗。

元素中的關鍵字‘required’表示該元素必須被填入。我們將此關鍵字新增到我們的文字欄位「電子郵件」中，然後查看下面的結果；

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

登入後複製

同樣，您需要對密碼和確認密碼欄位進行操作。

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

登入後複製

輸出：
HTML 格式的註冊表

範例2：求職登記表

以下是用 HTML 建立職位申請註冊表的範例。

代碼：

<!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>

登入後複製

輸出：
HTML 格式的註冊表

範例3：飯店登記表

以下是用 HTML 建立飯店登記表的範例。

代碼：

<!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>

登入後複製

輸出：

HTML 格式的註冊表