表單樣式

一、表單樣式模板

表單是網站和應用程序中常用的重要元素之一，良好的表單樣式可以提高用戶體驗，增強用戶對網站或應用程序的感知價值。為了提高開發效率，開發人員可以使用現成的表單樣式模板來快速實現表單樣式。目前比較流行的表單樣式模板有Bootstrap、Materialize等。下面是使用Bootstrap樣式模板實現的一個簡單表單示例：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

二、表單樣式設計

表單樣式的設計應考慮到布局、顏色、字體等多個方面。表單布局應該合理、清晰，避免元素重疊或過度分散，以保證用戶能夠方便地填寫信息。表單顏色應該和網站或應用程序的整體風格保持一致，能夠傳達出正確的情感和信息。字體選擇應該遵循易讀易懂的原則，同時字號和字距也應該合理設置。下面是一個簡單表單設計示例：

.form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.form-wrap h2 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 60px;
}

.form-wrap input[type="text"], 
.form-wrap input[type="email"],
.form-wrap input[type="password"] {
  width: 600px;
  height: 60px;
  margin-bottom: 20px;
  padding: 20px;
  border: none;
  border-radius: 30px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
  font-size: 20px;
  font-weight: 400;
}

.form-wrap button[type="submit"] {
  width: 200px;
  height: 60px;
  border: none;
  border-radius: 30px;
  background-color: #3498db;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
}

.form-wrap button[type="submit"]:hover {
  opacity: .9;
}

三、移動端表單樣式

移動設備的屏幕相對較小，因此移動端表單樣式應該優化布局和輸入體驗。在設計表單樣式時，應該將“張冠李戴原則”考慮進去，減少用戶在輸入時的誤觸發率，並增加輸入交互體驗。下面是一個簡單的移動端表單樣式示例：

.form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.form-wrap h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 40px;
}

.form-wrap input[type="text"], 
.form-wrap input[type="email"],
.form-wrap input[type="password"] {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.15);
  font-size: 16px;
  font-weight: 400;
}

.form-wrap button[type="submit"] {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 8px;
  background-color: #3498db;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color .3s ease;
}

.form-wrap button[type="submit"]:hover {
  background-color: #2980b9;
}

四、form表單樣式

form表單是HTML中最基本的表單元素， HTML本身提供了大量的樣式控制屬性。可以在<form>標籤內部使用屬性來設置表單的背景顏色、字體顏色、邊框等樣式。下面是一個簡單的form表單樣式示例：

<form style="background-color: #f5f5f5; padding: 20px; border: 1px solid #ddd;">
  <div style="margin-bottom: 20px;">
    <label for="username" style="display: block;">Username</label>
    <input type="text" id="username" style="width: 100%; height: 30px; padding: 5px; border: none; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0,0,0,.2);">
  </div>
  <div style="margin-bottom: 20px;">
    <label for="password" style="display: block;">Password</label>
    <input type="password" id="password" style="width: 100%; height: 30px; padding: 5px; border: none; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(0,0,0,.2);">
  </div>
  <button type="submit" style="display: block; width: 100%; height: 30px; background-color: #3498db; color: #fff; border: none; border-radius: 5px; cursor: pointer;">Submit</button>
</form>

五、好看的表單樣式

好看的表單樣式可以提高用戶的注意力和興趣，使得網站或應用程序更具有吸引力。一個好的表單樣式設計應該遵循視覺平衡、色彩搭配、元素呼應、簡潔明了等多個原則。下面是一個簡單、好看的表單樣式示例：

.form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f5f5;
  padding: 40px;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
}

.header-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
}

.header-wrap img {
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.header-wrap h2 {
  font-size: 30px;
  font-weight: bold;
  color: #3498db;
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="password"] {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.15);
  font-size: 16px;
  font-weight: 400;
}

.form button[type="submit"] {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 8px;
  background-color: #3498db;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color .3s ease;
}

.form button[type="submit"]:hover {
  background-color: #2980b9;
}

六、表單css樣式

表單樣式可以使用CSS來進行控制，下面是一個使用CSS設置表單樣式的示例：

.form-wrap form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-wrap input[type="text"],
.form-wrap input[type="email"],
.form-wrap input[type="password"] {
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  padding: 15px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.15);
  font-size: 16px;
  font-weight: 400;
}

.form-wrap button[type="submit"] {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 8px;
  background-color: #3498db;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color .3s ease;
}

.form-wrap button[type="submit"]:hover {
  background-color: #2980b9;
}

七、css控制表單樣式

在CSS中，可以使用偽類選擇器來控制表單樣式，如:hover,:active,:focus等。下面是一個控制表單樣式的CSS示例：

.form-wrap input[type="text"]:focus,
.form-wrap input[type="email"]:focus,
.form-wrap input[type="password"]:focus {
  outline: none;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.3);
}

.form-wrap button[type="submit"] {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 8px;
  background-color: #3498db;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color .3s ease;
}

.form-wrap button[type="submit"]:hover {
  background-color: #2980b9;
}

.form-wrap button[type="submit"]:active {
  box-shadow: none;
  background-color: #217dbb;
}

八、表單的樣式

表單樣式包括表單元素的布局、字體、顏色、背景等方面的設置。好的表單樣式可以提高用戶體驗、增加用戶黏性，從而提升網站或應用程序的價值。下面是一個簡單的表單樣式示例：

.form-wrap {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

height: 100%;

background-color: #f5f5f5;

padding: 40px;

box-shadow: 0 0 10px 0 rgba(0,0,0,.2);

}
.header-wrap {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-bottom: 40px;
}
.header-wrap img {
 width: 60px;
 height: 60px;
 margin-right: 20px;
}
.header-wrap h2 {
 font-size: 30px;
 font-weight: bold;
 color: #3498db;
}
.form {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"] {
 width: 100%;
 height: 50px;
 margin-bottom: 20px;
 padding: 15px;
 border: none;
 border-radius: 8px;
 box-shadow: 0 0 5px 0 rgba(0,0,0,.15);
 font-size: 16px;
 font-weight: 400;
}
.form button[type="submit"] {
 width: 100%;
 height: 50px;
 border: none;
 border-radius: 8px;
 background-color: #3498db;
 color: #fff;
 font-size: 18px;
 font-weight: bold;
 cursor: pointer;
 transition: background-color .3s ease;
}
.form button[type="submit"]:hover {
 background-color
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/188821.html