在HTML中，美化表单（form）的方法有很多，这里我将介绍一些常用的方法。
1、使用CSS样式
我们可以使用CSS来美化HTML表单，我们需要在HTML文件中引入一个CSS文件，或者在<head>标签内添加<style>标签来编写内联样式，我们可以为表单元素设置边框、背景颜色、字体颜色等属性。
我们可以为表单设置一个灰色的背景颜色，为输入框设置一个白色的边框和圆角，以及为按钮设置一个蓝色的背景颜色和圆角：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化表单</title>
<style>
form {
background-color: gray;
padding: 20px;
border-radius: 10px;
}
input[type="text"], input[type="email"], input[type="password"] {
border: 1px solid white;
border-radius: 5px;
padding: 5px;
font-size: 16px;
}
button {
background-color: blue;
border: none;
border-radius: 5px;
padding: 5px 10px;
font-size: 16px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<button type="submit">提交</button>
</form>
</body>
</html>
2、使用Bootstrap框架
Bootstrap是一个流行的前端框架，它提供了许多预定义的CSS样式和JavaScript组件，可以帮助我们快速创建美观的表单，要使用Bootstrap，我们需要在HTML文件中引入Bootstrap的CSS和JS文件，我们可以使用Bootstrap提供的表单类来美化表单元素。
我们可以使用Bootstrap的form-group类来为表单元素添加间距，使用form-control类来设置输入框的样式，以及使用btn类来设置按钮的样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美化表单 Bootstrap</title>
<!-引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="mb-3">
<label for="username" class="form-label">用户名：</label>
<input type="text" id="username" name="username" class="form-control">
</div>
<div class="mb-3">
<label for="email" class="form-label">邮箱：</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="mb-3">
<label for="password" class="form-label">密码：</label>
<input type="password" id="password" name="password" class="form-control">
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<!-引入Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
3、使用图标库（如Font Awesome）为表单元素添加图标
我们可以使用图标库（如Font Awesome）为表单元素添加图标，以增加视觉效果，我们需要在HTML文件中引入Font Awesome的CSS文件，我们可以使用Font Awesome提供的图标类来为表单元素添加图标。
我们可以为用户名输入框添加一个用户图标：
<h2>美化表单 添加图标（Font Awesome）</h2>
<!-引入Font Awesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-HTML代码 -->
...（省略其他代码）...
<!-用户名输入框添加图标 -->
<div class="mb-3">
<i class="fas fa-user"></i> <label for="username" class="form-label">用户名：</label> <input type="text" id="username" name="username" class="form-control">
</div>
...（省略其他代码）...
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/337734.html
微信扫一扫 