CSS - 表單

上一頁
下一頁

當您想要收集網站訪客的一些資料時，需要使用表單。它們具有供使用者輸入資訊的輸入欄位、用於識別輸入欄位的標籤以及用於提交表單或執行操作的按鈕。

我們可以透過更改表單元素的外觀來設定 HTML 表單的樣式，例如文字欄位、複選框、單選按鈕、選擇選單和提交按鈕。

HTML 表單示例

這是一個簡單的表單，它接受名字和姓氏以及您想學習的教程。提交按鈕會自動將您重定向到我們的課程頁面。

目錄


 

如何在 CSS 中設定表單樣式？

  • 使用容器：容器可用於將所有表單元素（如文字輸入、單選按鈕、提交按鈕）包裝在一個容器中，並對其應用通用樣式。
  • 對於文字輸入：對於文字輸入，您可以根據您的顏色主題新增填充、邊距和背景顏色。您還可以使用 focus 偽類來設定輸入元素選中狀態的樣式。
  • 懸停效果：透過使用偽類 :hover，您可以設定元素（如提交按鈕）的滑鼠懸停狀態的樣式。這為使用者提供了動態體驗。
  • 響應式設計：透過使用媒體查詢，您可以調整不同螢幕寬度的表單樣式。
  • 過渡效果此外，您可以使用過渡效果來實現與輸入標籤和按鈕的流暢互動。

這些是 HTML 表單最常用的樣式。此原則允許您建立樣式良好且使用者友好的表單。

設定輸入欄位樣式

如上所述，我們可以透過新增填充、邊距和背景顏色來設定輸入標籤的樣式。除此之外，我們還可以更改邊框、圓角、文字顏色和焦點狀態。

示例

在此程式碼中，我們為文字輸入欄位應用了所有提到的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* CSS styles for input fields */
        input {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            color: #333;
            font-size: 16px;
            box-sizing: border-box;
        }

        input:focus {
            border-color: #66afe9;
            outline: none;
            box-shadow: 
                0 0 5px rgba(102, 175, 233, 0.5);
            background-color: #fff;
        }
    </style>
</head>

<body>
    <h3>Styled Input Tags</h3>
    Name:
    <input type="text">
    
    Email:
    <input type="email">
    
    Password:
    <input type="password">
</body>
</html>

輸入欄位內帶有圖示

我們可以在文字輸入元素內部新增圖示或影像作為佔位符，以使我們的表單更具動態性。這些通常用於在搜尋元素內部新增鏡頭圖示。

示例

在此示例中，我們使用背景圖片屬性來指定圖示的連結並在輸入欄位內呈現它。有幾個網站（例如 icon8.com）免費提供圖示連結。

<!DOCTYPE html>
<html>
<head>
    <style> 
        input {
            width: 100%;
            box-sizing: border-box;
            border: 2px solid #ccc;
            border-radius: 4px;

            background-image: 
                url('https://img.icons8.com/?size=100&id=kDqO6kPb3xLj&format=png&color=000000');

            background-repeat: no-repeat;
            padding: 12px 20px 12px 40px; 
            background-size: 40px 40px;
        }
    </style>
</head>

<body>
<h2>Input field with an icon inside</h2>
    <input type="text" placeholder="Search..">
</body>
</html>

動畫輸入欄位

我們可以使用 css 過渡屬性來製作動畫文字輸入欄位。

input {
    transition: all 0.3s ease;
}

過渡屬性應用於輸入，指定所有 CSS 屬性 (all) 應在 0.3 秒內過渡，並使用 ease 定時函式。

示例

在此示例中，我們對文字輸入使用了過渡屬性，並在聚焦時添加了樣式。

<!DOCTYPE html>
<html>
<head>
    <style> 
        /* Basic styling for input */
        input {
            border: 2px solid #ccc;
            border-radius: 4px;
            padding: 12px 20px;
            transition: all 0.9s ease;
        }

        /* Styling when input is focused */
        input:focus {
            border-color: dodgerblue;
            width: 70%;
            box-shadow: 
                0 0 8px 0 rgba(0, 0, 255, 0.2);
        }
    </style>
</head>

<body>
    <h2>Animated Input Field</h2>
    <input type="text" 
           placeholder="Enter your text...">
</body>
</html>

設定文字區域樣式

Textarea 標籤允許使用者在單個輸入欄位中輸入更長的文字。

示例

這是一個設定樣式的文字區域的示例，它允許使用者輸入地址。

<html>
<head>
<style>
   textarea {
      width: 100%;
      height: 100px;
      font-size: 16px;
      color:  #938b8b;
      padding: 15px;
      border: 2px solid;
   } 
   textarea:focus {
      box-shadow: 
        0 0 10px rgba(0, 0, 0, 0.5);
   }  
</style>
</head>
<body>
   Enter Address
   <form>
      <textarea>
        Address
    </textarea>
   </form>
</body>
</html>

設定選擇下拉選單樣式

在 CSS 中，我們可以更改下拉列表的文字樣式、顏色、邊距、填充、邊框和陰影效果。檢視以下示例。

示例

在此示例中，我們演示瞭如何設定 select 標籤的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            height: 150px;
            padding: 20px;
        }
        label {
            font-size: 16px;
        }
        #styled-select {
            width: 200px;
            padding: 10px;
            font-size: 16px;
            border: 2px solid #ccc;
            border-radius: 4px;
        }
        #styled-select:focus {
            border-color: #007BFF;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
            outline: none;
        }
    </style>
</head>

<body>
    <label> Choose an option: </label>
    <select id="styled-select">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>
</body>
</html>

設定複選框和單選按鈕樣式

您可以使用以下選擇器來選擇和設定複選框和單選按鈕的樣式。

input[type="checkbox"] {
   property: value;
}

input[type="radio"]{
   property: value;
}

示例

以下示例演示了這一點

<html>
<head>
    <style>
        form {
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            max-width: 300px;
            margin: 0 auto;
        }
        label {
            font-weight: bold;
            margin-top: 10px;
            display: block;
        }

        input[type="radio"], 
        input[type="checkbox"] {
            margin-right: 5px;
            vertical-align: middle; 
        }
        
        /* '+' is Adjacent Sibling Selectors */
        input[type="radio"] + label, 
        input[type="checkbox"] + label {
            display: inline-block;
            margin-right: 10px;
        }
        
        /* Change color of checked option */
        input[type="radio"]:checked + label, 
        input[type="checkbox"]:checked + label {
            color: #007BFF;
        }
    </style>
</head>

<body>
    <form>
        <label>Radio Buttons: </label>
        <input type="radio" 
              name="gender" value="male"> 
              <label for="male">Male</label>
        <input type="radio" 
              name="gender" value="female"> 
              <label for="female">Female</label> 

        <br>
        <label>Checkboxes:</label>
        <input type="checkbox" 
              name="lang" value="html"> 
              <label for="html">HTML</label>
        <input type="checkbox" 
              name="lang" value="css">
              <label for="css">CSS</label>
        <input type="checkbox" 
              name="lang" value="bootstrap"> 
              <label for="html">bootstrap</label>
    </form>
</body>
</html>

設定提交按鈕樣式

CSS 可用於修改 HTML 頁面中按鈕的外觀。通常使用 CSS 更改按鈕的填充、背景顏色、文字顏色、邊框和懸停效果。

示例

在此示例中，我們演示瞭如何設定 button 標籤的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            background-color: #f0f0f0;
            padding: 40px;
            height: 150px;
        }
        .styled-button {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.3s;
        }

        .styled-button:hover {
            background-color: #0056b3;
        }
        .styled-button:active {
            transform: scale(0.5);
        }
        .styled-button:focus {
            outline: none;
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
        }
    </style>
</head>

<body>
    <button class="styled-button">
        Click Me
    </button>
</body>
</html>

表單的欄位集和圖例

<fieldset>標籤用於在 Web 表單中對多個控制元件和標籤進行分組，它會在表單元素周圍新增一個矩形框。

<legend>標籤用於指定<fieldset>元素的標題。

示例

以下示例演示瞭如何設定<fieldset>和<legend>元素的樣式。

<!DOCTYPE html>
<html>
<head>
<style>
   fieldset {
      padding: 10px;
   }

   legend {
      font-weight: bold;
      color: #0F8D0F;
      margin-bottom: 10px;
   }

   input {
      width: calc(100% - 20px);
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
        <legend>Login</legend>
        <label for="username">
            Username:
        </label>
        <input type="text" 
              id="username" name="username">
        <label for="password">
            Password:
        </label>
        <input type="password" 
              id="password" name="password">
        <input type="submit" value="Submit">
      </fieldset>
   </form>    
</body>
</html>

響應式 HTML 表單

這是一個簡單的響應式表單佈局的示例。在不同的裝置上檢視此表單以檢視其響應能力。−

示例

<html>
<head>
<style>
   .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #c5e08e;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #34892b;
   }
   label {
      display: block;
      font-weight: bold;
      font-size: 15px;
      margin-bottom: 5px;
      color: #070707;
   }
   input[type="text"],
   input[type="email"],
   select {
      width: 100%;
      padding: 15px;
      margin-bottom: 15px;
      border: 2px solid #ccc;
      border-radius: 10px;
      background-color: #eff5f5;
   }
   input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color: #216e2a;
      color: #fff;
      border: none;
      font-size: 20px;
      border-radius: 4px;
      cursor: pointer;
   }
   textarea {
      width: 100%;
      height: 100px;
      padding: 15px;
      margin-bottom: 15px;
      border: 2px solid #ccc;
      border-radius: 10px;
      background-color: #eff5f5;
   }
      input[type="radio"] {
      margin-right: 5px;
      vertical-align: middle; 
      margin-bottom: 10px;
   }
   input[type="submit"]:hover {
      background-color: #44d115;
      color: #000000;
   }
</style>
</head>
<body>
   <div class="container">
      <h1>Registration Form</h1>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter Name..." required>

         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email Id..." required>
            
         <label for="email">Address:</label>
         <textarea>Address...</textarea>

         <label>Gender: </label>
         <input type="radio" name="gender" value="male"> Male
         <input type="radio" name="gender" value="female"> Female 
      
         <label for="gender">Langauges:</label>
         <select id="gender" name="gender">
            <option value="lang" disabled selected>Select Gender</option>
            <option value="male">Hindi</option>
            <option value="female">Marathi</option>
            <option value="other">English</option>
         </select>

         <input type="submit" value="Submit">
      </form>
   </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告