Pure.CSS-表单(1) - 芒果文档

📌 相关文章

📜 Pure.CSS-表单(1)

📅 最后修改于: 2023-12-03 15:03:53.540000 🧑 作者: Mango

Pure.CSS-表单

Pure.CSS是一个轻量级、响应式的CSS框架，可帮助开发者快速构建漂亮、符合标准的Web页面。该框架的一个重要组件就是表单，本文将详细介绍如何使用Pure.CSS创建漂亮的表单。

基本表单样式

使用Pure.CSS创建表单的基本步骤如下：

在HTML文件中引入Pure.CSS样式表。
创建一个<form>元素。
在<form>元素中添加表单元素（例如输入框、下拉框、单选框等）。
将表单元素用<fieldset>元素包含，可选择性地使用<legend>元素添加标题。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.0.3/pure-min.css">
</head>
<body>
  <form>
    <fieldset>
      <legend>表单标题</legend>
      // 此处添加表单元素
    </fieldset>
  </form>
</body>
</html>

表单元素

输入框

使用<input>元素可以创建文本输入框、密码输入框、数字输入框等。

<input type="text" placeholder="请输入文字">
<input type="password" placeholder="请输入密码">
<input type="number" placeholder="请输入数字">

下拉框

使用<select>元素可以创建下拉框。

<select>
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

单选框和复选框

使用<input>元素可以创建单选框和复选框。

<label>
  <input type="radio" name="options" value="option1">选项1
</label>
<label>
  <input type="radio" name="options" value="option2">选项2
</label>
<label>
  <input type="radio" name="options" value="option3">选项3
</label>

<label>
  <input type="checkbox" name="options" value="option1">选项1
</label>
<label>
  <input type="checkbox" name="options" value="option2">选项2
</label>
<label>
  <input type="checkbox" name="options" value="option3">选项3
</label>

按钮

使用<button>元素可以创建按钮。

<button class="pure-button">默认按钮</button>
<button class="pure-button pure-button-primary">主要按钮</button>
<button class="pure-button pure-button-secondary">次要按钮</button>
<button class="pure-button pure-button-success">成功按钮</button>
<button class="pure-button pure-button-error">错误按钮</button>
<button class="pure-button pure-button-warning">警告按钮</button>

开关

使用<input>元素和CSS伪元素可以创建开关。

<label class="pure-switch">
  <input type="checkbox">
  <span class="pure-switch-slider"></span>
</label>

表单布局

使用Pure.CSS的网格系统可以轻松地对表单进行布局。

<form class="pure-form pure-form-aligned">
  <fieldset>
    <div class="pure-control-group">
      <label for="name">姓名</label>
      <input id="name" type="text" placeholder="请输入姓名">
    </div>
    <div class="pure-control-group">
      <label for="gender">性别</label>
      <select id="gender">
        <option value="">请选择</option>
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </div>
    <div class="pure-control-group">
      <label for="age">年龄</label>
      <input id="age" type="number" placeholder="请输入年龄">
    </div>
  </fieldset>
</form>

表单调整

使用Pure.CSS的表单调整类可以轻松地对表单进行样式调整。

<form class="pure-form pure-form-stacked">
  <fieldset>
    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-1-3">
        <label for="name">姓名</label>
        <input id="name" type="text" placeholder="请输入姓名">
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <label for="gender">性别</label>
        <select id="gender">
          <option value="">请选择</option>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
      </div>
      <div class="pure-u-1 pure-u-md-1-3">
        <label for="age">年龄</label>
        <input id="age" type="number" placeholder="请输入年龄">
      </div>
    </div>
    <button class="pure-button pure-button-primary">提交</button>
  </fieldset>
</form>

以上就是使用Pure.CSS创建漂亮的表单的基本步骤和常见示例。希望本文能帮助开发者更好地运用Pure.CSS进行Web页面的开发。