学生信息录入模板

最新推荐文章于 2024-08-21 14:09:37 发布

Jee36C

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量61

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_73784646/article/details/132815533

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息录入</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
margin: 0;
}

h1, h2 {
color: #333;
}

form {
background-color: #fff;
padding: 20px;
border-radius: 4px;
}

label {
display: block;
font-weight: bold;
margin-bottom: 6px;
}

select, input[type="text"], input[type="password"], textarea {
width: 200px;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}

select {
height: 30px;
}

input[type="file"] {
margin-top: 10px;
}

input[type="submit"] {
margin-top: 10px;
padding: 8px 16px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type="submit"]:hover {
background-color: #45a049;
}

img {
display: block;
margin-top: 10px;
max-width: 200px;
}
</style>
<script>
function showPhoto(event) {
var reader = new FileReader();
reader.onload = function(e) {
var imgElement = document.getElementById("preview");
imgElement.src = e.target.result;
};
reader.readAsDataURL(event.target.files[0]);
}
</script>
</head>
<body>
<div style="max-width: 400px; margin: 0 auto;">
<h1>学生信息录入</h1>

<div>
<h2>登录</h2>
<form action="/login" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required><br>

<div>
<h2>用户信息</h2>
<form action="/save" method="post">
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br>

Jee36C

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学生信息录入模板

input type="checkbox" id="interest1" name="interests" value="足球"><input type="checkbox" id="interest2" name="interests" value="篮球"><input type="checkbox" id="interest3" name="interests" value="音乐"><img id="preview" src="#" alt="预览照片"><br>
复制链接

扫一扫