写一个网页背景蓝色做一个个人信息登记表标题白色加粗居中表格绿色填写框蓝色姓名不超过5个文字性别是单选按钮不换行爱好是多选框不换行邮箱个人简介默认是123456能上传文件上传按钮是红色显示文字是上传文件提交按钮是黑色提交之后跳转到百度首页使用css做一些样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人信息登记表</title>
<style>
body {
background-color: blue;
}
h1 {
color: white;
font-weight: bold;
text-align: center;
}
table {
background-color: green;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
}
input[type="text"], input[type="email"] {
background-color: blue;
color: white;
border: none;
border-radius: 5px;
padding: 5px;
margin: 5px;
width: 200px;
}
input[type="radio"], input[type="checkbox"] {
margin: 5px;
width: 20px;
height: 20px;
}
textarea {
background-color: blue;
color: white;
border: none;
border-radius: 5px;
padding: 5px;
margin: 5px;
width: 200px;
height: 100px;
}
input[type="file"] {
display: none;
}
.upload-btn {
background-color: red;
color: white;
border: none;
border-radius: 5px;
padding: 5px;
cursor: pointer;
}
.submit-btn {
background-color: black;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>个人信息登记表</h1>
<form action="https://www.baidu.com/">
<table>
<tr>
<td>姓名：</td>
<td><input type="text" name="name" maxlength="5"></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby" value="reading" id="reading"><label for="reading">阅读</label>
<input type="checkbox" name="hobby" value="music" id="music"><label for="music">音乐</label>
<input type="checkbox" name="hobby" value="sports" id="sports"><label for="sports">运动</label>
</td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td>个人简介：</td>
<td><textarea name="intro">123456</textarea></td>
</tr>
<tr>
<td>上传文件：</td>
<td>
<label for="file-upload" class="upload-btn">上传文件</label>
<input type="file" name="file" id="file-upload">
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交" class="submit-btn"></td>
</tr>
</table>
</form>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/bmeJ 著作权归作者所有。请勿转载和采集!