用前端写出请假单的填写页面,代码示例
时间: 2024-02-13 20:59:54 浏览: 22
好的,以下是一个简单的HTML和CSS代码示例,用于创建一个请假单的填写页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>请假单</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="date"],
textarea {
width: 100%;
padding: 5px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}
textarea {
height: 100px;
}
button[type="submit"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>请假单</h1>
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name">
<label for="start-date">开始日期</label>
<input type="date" id="start-date" name="start-date">
<label for="end-date">结束日期</label>
<input type="date" id="end-date" name="end-date">
<label for="reason">请假原因</label>
<textarea id="reason" name="reason"></textarea>
<button type="submit">提交</button>
</form>
</body>
</html>
```
在这个例子中,我们使用了HTML表单元素来获取用户输入。使用CSS设置了表单的外观和样式。用户需要输入自己的姓名、请假开始和结束日期以及请假原因。最后,我们添加了一个提交按钮,用于提交请假单。
你可以使用JavaScript来添加更多的交互性,比如验证用户的输入是否有效,或者在提交表单之前弹出确认对话框。
希望这个代码示例能够帮助你开始编写一个简单的请假单填写页面。