在线个人信息登记表单 - 简洁易用
<!DOCTYPE html>
<html>
<head>
<title>在线个人信息登记表单</title>
<style type="text/css">
body {
background-color: #00BFFF;
}
h1 {
color: #fff;
font-weight: bold;
}
table {
background-color: #00FF7F;
padding: 20px;
border-radius: 10px;
box-shadow: 5px 5px 5px #888888;
margin: 0 auto;
}
input[type="text"], input[type="email"], select {
padding: 5px;
border-radius: 5px;
border: none;
width: 100%;
margin: 5px 0;
}
input[type="radio"], input[type="checkbox"] {
margin: 5px;
}
input[type="submit"] {
background-color: #FF0000;
color: #fff;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
input[type="file"] {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>在线个人信息登记表单</h1>
<form action="#" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>姓名：</td>
<td><input type="text" name="name" maxlength="5" required></td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby[]" value="reading">读书
<input type="checkbox" name="hobby[]" value="music">听音乐
<input type="checkbox" name="hobby[]" value="sports">运动
<input type="checkbox" name="hobby[]" value="travel">旅游
</td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="email" name="email" required></td>
</tr>
<tr>
<td>上传文件：</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mOtU 著作权归作者所有。请勿转载和采集!