本文详细介绍了一个HTML表单的设计与实现过程，包括账户、密码、电话号码和电子邮件的输入字段，以及一个注册按钮。文章展示了如何使用CSS进行表单样式的定制，如背景颜色、边框圆角和聚焦状态等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单练习</title>
<style type="text/css">
form{ width: 400px; background: #9370d8;padding: 10px;margin-left: 500px;margin-top: 150px;}
button{background: #808080;padding: 8px;border-radius: 5px;}
button.hover{background: #2F4F4F;padding: 10px;border-radius: 5px;}
input{padding: 8px;background: #f8f8f8;}
input:focus{background: #FFC0CB;}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>注册用户</legend>
<p><label for="user">账户</label><input type="text" name="user" id="user" placeholder="账号" required=""></p>
<p><label for="password">密码</label><input type="password" name="password" id="password" placeholder="密码"></p>
<p><label for="tel">电话号码</label><input type="tel" name="tel" id="tel" placeholder="电话"></p>
<p><label for="email">电子邮件</label><input type="email" id="email" placeholder="电子邮箱"></p>
<!-- <p><input type="submit" value="注册"></p> -->
<button>注册用户</button>
</fieldset>
</form>
</body>
</html>
转载于:https://www.cnblogs.com/houweidong/p/9716797.html
扫一扫
939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
