<label for="nameInput">姓名:</label> <input type="text" id="nameInput" placeholder="请输入姓名"> 美化一下
时间: 2025-08-15 16:14:05 浏览: 2
下面是对 HTML 中输入姓名的标签和输入框进行美化的示例,使用了 CSS 来提升外观,使其看起来更现代、美观。
### ✅ 美化后的 HTML + CSS 示例:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>美化输入框</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.input-container {
background-color: #fff;
padding: 25px 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
width: 300px;
}
.input-container label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
}
.input-container input[type="text"] {
width: 100%;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.input-container input[type="text"]:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.submit-btn {
margin-top: 15px;
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.submit-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="input-container">
<label for="nameInput">姓名:</label>
<input type="text" id="nameInput" placeholder="请输入姓名">
<button class="submit-btn" onclick="showName()">提交</button>
</div>
<script>
function showName() {
var name = document.getElementById("nameInput").value.trim();
if (name === "") {
alleet("请输入有效的姓名!");
return;
}
alleet("您好," + name + "!");
}
</script>
</body>
</html>
```
---
### 🎨 美化说明:
- **`body` 样式**:设置了背景色和居中对齐,让输入框居中显示在页面上。
- **`.input-container`**:一个白色卡片风格的容器,带圆角、阴影,提升视觉效果。
- **`input[type="text"]`**:
- 内边距、圆角、过渡效果让输入体验更友好。
- `:focus` 伪类添加了聚焦样式,提升交互反馈。
- **`.submit-btn`**:
- 按钮样式美观,带有悬停效果和圆角。
- **响应式设计**:使用了 `box-sizing: border-box` 和 `width: 100%` 保证输入框适配容器。
---
### ✅ 效果预览(文字描述):
- 页面背景为浅灰色。
- 输入框和按钮位于页面中央,样式圆润,带有阴影。
- 输入框在获得焦点时会高亮蓝色。
- 按钮默认蓝色,悬停时变为深蓝。
---
###
阅读全文
相关推荐





注册信息
<form action="action_page.php" method="get">
<label>姓名:</label><input type="text" placeholder="请输入真实姓名">
<label>密码:</label><input type="password" placeholder="请输入密码">
<label>确认密码:</label><input type="password" placeholder="请输入确认密码">
<label>性别:</label>
<label><input type="radio" name="gender"> 男</label>
<label><input type="radio" name="gender" checked> 女</label>
<label>居住城市:</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
</select>
教育经历
<label>最高学历:</label>
<select>
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</select>
<label>学校名称:</label><input type="text">
<label>所学专业:</label><input type="text">
<label>在校时间:</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
工作经历
<label>公司名称:</label><input type="text">
<label>工作描述:</label>
<textarea></textarea>
<input type="checkbox"><label>已阅读并同意以下协议:</label>
《用户服务协议》
《隐私政策》
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>异常记录</title> </head> <body> 首页 登记数据 查询数据 查询数据 异常记录登记 <form method="post" action="/https/wenku.csdn.net/submit"> <label for="line">确认线别:</label> <input name="line" class="layui-input" placeholder="请选择线别" /> <label for="date">确认日期:</label> <input type="date" name="date" id="date" /> <label for="model">异常机种:</label> <input type="text" name="model" id="model" placeholder="请输入机种"/> <label for="prod_line">异常现象:</label> <input type="text" name="prod_line" id="prod_line" placeholder="请输入现象"> <label for="prod_date">生产日期:</label> <input type="date" name="prod_date" id="prod_date"> <label for="shift">生产班别:</label> <select name="shift" id="shift"> <option value="白班">白班</option> <option value="夜班">夜班</option> </select> <label for="prod_line_2">生产线别:</label> <input type="text" name="prod_line_2" id="prod_line_2"> <label for="responsible">责任人:</label> <input type="text" name="responsible" id="responsible" placeholder="请输入责任人"> <button type="submit">提交</button> </form> </body> </html>





<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
用户注册
<form method="post" action="/https/wenku.csdn.net/register">
<label for="userId">用户ID:</label>
<input type="text" id="userId" name="userId" required>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<input type="password" id="password" name="password" class="input-field" placeholder="请输入密码" required>
<button type="submit">注册</button>
</form>
已有账号?去登录
</body>
</html>样式设置的精美一i但

登录页
<form action="${pageContext.request.contextPath}/user/loginServlet" method="post">
<label for="student">用户名:</label>
<input type="text" name="username" id="student" placeholder="请输入用户名"/>
<label for="password">密码:</label>
<input type="password" name="password" id="password" placeholder="请输入密码"/>
<input class="btn" type="submit" value="登录">
注册
</form>
分析这段并对代码进行介绍,在介绍过程中应体现自己的思考过程





