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>
打印页面
上一页
下一页
广告

© . All rights reserved.