HTML 学生信息表单：学号、密码、姓名、电话 - 使用 Bootstrap
<!DOCTYPE html>
<html>
<head>
<title>学生信息</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<body>
<div class='container'>
<h1 class='text-center mt-5'>学生信息</h1>
<form>
<div class='form-group'>
<label for='student-id'>学号:</label>
<input type='text' class='form-control' id='student-id' placeholder='请输入学号'>
</div>
<div class='form-group'>
<label for='password'>密码:</label>
<input type='password' class='form-control' id='password' placeholder='请输入密码'>
</div>
<div class='form-group'>
<label for='name'>姓名:</label>
<input type='text' class='form-control' id='name' placeholder='请输入姓名'>
</div>
<div class='form-group'>
<label for='phone'>电话:</label>
<input type='text' class='form-control' id='phone' placeholder='请输入电话号码'>
</div>
<button type='submit' class='btn btn-primary'>提交</button>
</form>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/owKq 著作权归作者所有。请勿转载和采集!