Css 简明教程

CSS - Forms

当您想从网站访问者那里收集一些数据时，需要表单。它们有输入字段供用户输入信息、标签用于识别输入字段以及按钮用于提交表单或执行操作。

Forms are required, when you want to collect some data from the site visitor. They have input fields for users to enter information, labels to identify the input fields, and buttons to submit the form or perform an action.

我们可以通过更改表单元素的外观（例如，文本字段、复选框、单选按钮、下拉菜单和提交按钮）来设置 HTML 表单的样式。

We can style HTML forms by changing the appearance of form elements, such as text fields, checkboxes, radio buttons, select menus, and submit buttons.

How to Style a Form in CSS?

Use Containers: Containers can be used to wrap all the form elements like text input, radio buttons, submit buttons in a single container and apply common style to it.
*For Text Input: * For text input you can add padding, margin and background color according to your color theme. Also you can use focus pseudo-class to style selected state of an input element.
*Hover Effect: * By using pseudo-class :hover, you can style mouse over the element state of elements like submit button. This gives user a dynamic experience.
*Responsive Design: * By using Media Queries you can adjust form style for different screen widths
Transition Effect Further more you can use transition effect for smooth interaction with input tags and buttons

这些是 HTML 表单中最常用的样式。此原则允许您创建一个样式良好且对用户友好的表单。

These are the most commonly used styling for HTML form. This principle allow you to create a well styled and user-friendly form.

Styling Input Fields

如上所述，我们可以添加 * padding* 、 * margin* 和 * background-color* 来设置文本输入标签的样式。除此之外，我们还可以更改 * border* 、 * border-radius* 、文本颜色和焦点状态。

As mentioned above, we can style input tag by adding padding, margin and background-color. Apart from that we can also alter border, border-radius, text color and focus states.

Example

在此代码中，我们对文本输入字段应用了所有提到的样式。

In this code we applied all the mentioned stylings for text input fields.

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

Input Field with Icons Inside

我们可以在文本输入元素中添加图标或图像作为占位符，以使我们的表单具有动态性。这通常用于在搜索元素中添加镜头图标。

We can add icons or images inside text input elements as placeholder to make our form dynamic. These are generally used to add lens icon inside search element.

Example

在示例中，我们使用了 * background-image* 属性来指定图标的链接，并将其呈现在输入框中。有许多网站（如 icon8.com）提供免费的图标链接。

In this example we use background-image property to specify link of icon and render it inside input field. There are several websites like icon8.com, that give link to icons for free.

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

Animated Input Field

我们可以使用 css * transition* 属性来制作动态文本输入字段。

We can use css transition property to make animated text input field.

input {
    transition: all 0.3s ease;
}

过渡属性应用于输入，指定所有 CSS 属性（全部）应在 0.3 秒内使用缓动时序函数进行过渡。

The transition property is applied to input, specifying that all CSS properties (all) should transition over 0.3 seconds with an ease timing function.

Example

在此示例中，我们为文本输入使用了过渡属性，并在获得焦点时添加了样式。

In this example we used transition property for text input, and added style when focused.

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

Styling Textareas

文本区域允许用户在单个输入框中输入较长的文本。

Textarea tag allows users to enter longer texts in single input field.

Example

这是一个样式化的文本区域的示例，它允许用户输入地址。

Here is an example of a styled textarea that allows users to enter address.

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

Styling Select Dropdown

在 CSS 中，我们可以更改下拉列表的文本样式、颜色、边距、内边距、边框和阴影效果。请查看以下示例。

In CSS, we can alter text style, color, margin, padding, border and shadow effect for dropdown list. Check out following example.

Example

在此示例中，我们演示如何设置选择标记的样式。

In this example we demonstrate how to style a select tag.

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

Styling Checkbox and Radio Button

您可以使用以下 * selectors* 来选择和设置复选框和单选按钮的样式。

You can use following selectors to select and style checkbox and radio buttons.

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

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

Example

以下示例演示了这一点：

Following example demonstrates this:

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

Styling Submit Button

CSS 可用于修改 HTML 页面中按钮的外观。通常使用 CSS 更改按钮的填充、背景颜色、文本颜色、边框和悬停效果。

CSS can be used to modify appearance of buttons in HTML page. Commonly padding, background-color, text color, border and hover effect of buttons are altered using CSS.

Example

在此示例中，我们演示如何设置按钮标记的样式。

In this example we demonstrate how to style a button tag.

<!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 and Legend for Form

<fieldset>* 标记用于将几个控件和标签分组在 Web 表单中，它在表单元素周围添加一个矩形框。

The <fieldset> tag is used to group several controls and labels within a web form, it adds a rectangular box around form elements.

<legend>* 标记用于指定 <fieldset> 元素的标题。

The <legend> tag is used to specify the caption of <fieldset> element.

Example

以下示例演示如何设置 <fieldset> 和 <legend> 元素的样式。

The following example demonstrates how to style <fieldset> and <legend> elements.

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

Responsive HTML Form

下面是一个简单的响应式表单布局示例。在不同的设备上查看此表单，了解响应性。−

Here is an example of a simple responsive form layout. Check this form on different devices to see the responsiveness.−

Example

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

Css 简明教程

CSS - Forms

Table of Contents

How to Style a Form in CSS?

Styling Input Fields

Example

Input Field with Icons Inside

Example

Animated Input Field

Example

Styling Textareas

Example

Styling Select Dropdown

Example

Styling Checkbox and Radio Button

Example

Styling Submit Button

Example

Fieldset and Legend for Form

Example

Responsive HTML Form

Example