資料結構
網路
關係型資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用CSS建立響應式表單？
要使用CSS建立響應式表單，我們將使用HTML 表單元素，例如帶有type屬性和標籤的HTML 輸入標籤。我們將使用CSS屬性設計建立的表單，並使用媒體查詢使其具有響應性。我們將逐步瞭解使用css建立響應式表單的過程。
在這篇文章中，我們擁有表單元素，我們的任務是使用CSS建立一個響應式表單。
建立響應式表單的步驟
我們將遵循以下步驟來建立一個響應式表單。
使用HTML建立表單結構
- 我們使用input標籤建立了六個輸入欄位來收集使用者資訊，併為相應的輸入欄位添加了labels。
- 然後，我們將它們包裝在兩個div中，每個div包含三個標籤和輸入欄位，構成兩列。我們將所有這些元素包裝在一個名為container的div中。
- 最後，我們使用input標籤和type屬性建立了一個提交按鈕。
<h2>
Creating Responsive Form with CSS
</h2>
<div class="container">
<div class="formContainer">
<div class="container">
<div>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Enter Name" />
<label for="email"> Email</label>
<input type="text" id="email" name="email"
placeholder="abc@example.com" />
<label for="uname">Username</label>
<input type="text" id="uname" name="username"
placeholder="Enter User Name" />
</div>
<div>
<label for="pass">Password</label>
<input type="text" id="pass" name="pwd"
placeholder="Enter Password" />
<label for="cnfpass">Confirm Password</label>
<input type="text" id="cnfpass" name="cnfpwd"
placeholder="Confirm Password" />
<label for="pass">D.O.B</label>
<input type="text" id="dob" name="dob"
placeholder="dd-mm-yyyy" />
</div>
</div>
<input type="submit" value="Submit" />
</div>
</div>
使用CSS進行響應式設計
- 我們使用container透過display屬性將其設定為flexbox，使用justify-content使表單元素均勻分佈。CSS gap屬性在分隔輸入欄位的div元素之間新增間隙。
- 然後，我們使用margin屬性設定標籤的頂部和底部邊距，並使用display屬性將標籤用作塊元素。
- 我們使用formContainer類來設計包含所有輸入欄位和標籤的容器，方法是設定其背景顏色和文字顏色，使用border-radius屬性建立圓角容器，並設定padding。
- 然後，我們使用屬性選擇器“input[type="text"]”來設計所有輸入欄位。我們將輸入欄位的寬度設定為100%，佔據可用空間，設定底部邊距、邊框和用於曲線邊緣的邊框半徑以及輸入欄位的填充。
- 類似地，我們使用屬性選擇器來設計提交按鈕，方法是設定其背景顏色、字型大小和游標為指標，填充、寬度和用於曲線邊緣按鈕的邊框半徑。懸停時，它會使用hover偽類更改其背景和文字顏色。
- 最後，我們使用@media查詢實現響應式。我們將螢幕的最大寬度設定為600畫素，即對於螢幕寬度小於600畫素的情況，表單佈局將更改。它將使用flex-direction屬性將輸入欄位逐列顯示，而不是並排顯示。
body {
font-family: Verdana, sans-serif;
font-size: 15px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.container div {
gap: 10px;
}
label {
margin: 15px 0px 15px 0px;
display: block;
}
.formContainer {
background-color: #031926;
color: white;
padding: 5px 20px 15px 20px;
border-radius: 3px;
}
input[type="text"] {
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
border-radius: 3px;
background-color: #031926;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
input[type="submit"]:hover {
background-color: white;
color: #031926;
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
完整示例程式碼
以下是實現上述兩個步驟以使用CSS建立響應式表單的完整示例程式碼。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Verdana, sans-serif;
font-size: 15px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.container div {
gap: 10px;
}
label {
margin: 15px 0px 15px 0px;
display: block;
}
.formContainer {
background-color: #031926;
color: white;
padding: 5px 20px 15px 20px;
border-radius: 3px;
}
input[type="text"] {
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
width: 100%;
border-radius: 3px;
background-color: #031926;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
font-size: 18px;
}
input[type="submit"]:hover {
background-color: white;
color: #031926;
}
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>
Creating Responsive Form with CSS
</h1>
<div class="container">
<div class="formContainer">
<div class="container">
<div>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="firstname"
placeholder="Enter Name" />
<label for="email"> Email</label>
<input type="text" id="email" name="email"
placeholder="abc@example.com" />
<label for="uname">Username</label>
<input type="text" id="uname" name="username"
placeholder="Enter User Name" />
</div>
<div>
<label for="pass">Password</label>
<input type="text" id="pass" name="pwd"
placeholder="Enter Password" />
<label for="cnfpass">Confirm Password</label>
<input type="text" id="cnfpass" name="cnfpwd"
placeholder="Confirm Password" />
<label for="pass">D.O.B</label>
<input type="text" id="dob" name="dob"
placeholder="dd-mm-yyyy" />
</div>
</div>
<input type="submit" value="Submit" />
</div>
</div>
</body>
</html>
結論
在本文中，我們學習瞭如何使用CSS建立響應式表單。首先，我們使用表單元素建立了表單的基本HTML結構，然後使用CSS進行設計並使表單具有響應性。
更新於：2024年10月3日
4K+ 次瀏覽
廣告