本文介绍了一个简单的表单设计实例，包括账号、密码、电话及邮件输入框的设计，并使用了基本的HTML与CSS进行布局和样式设定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单综合练习</title>
<style type="text/css">
form{width: 400px;background: #f7f7f7;padding: 10px;margin-top: 150px;margin-left: 300px;}
button{background: #808080;padding: 8px;border-radius:5px;}
button:hover{background: #919191;padding: 10px;border-radius:5px;}
input{padding: 8px;background: #f8f8f8;}
input:focus{padding: 8px;background: #a9a9a9;}
</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="密码"></input></p>
<p><label for="tel">电话：</label><input type="tel" name="tel" id="tel" placeholder="电话"></p>
<p><label for="email">邮件：</label><input type="email" name="email" id="email" placeholder="电子邮箱"></p>
<!-- <p><label for=""></label>这样单击后自动获得焦点</p> -->
<!-- <input type="submit" value="注册"></input> -->
<button>注册用户</button>
</fieldset>
</form>
</body>
</html>
转载于:https://www.cnblogs.com/houweidong/p/5934252.html
扫一扫
3348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
