html/css 简单的表单实例
如何实现如下图片的内容？下面我们一起制作该表单页面
如下图是布置的作业
如下图是完成的作业
实例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个input作业</title><style>form{width: 600px;}h2{text-align: center;}.name{font-size:18px;display: inline-block;width: 100px;height: 40px;}.red{color: red;}.name1{width: 120px;height: 40px;}input{width: 220px;height: 25px;}select{width: 60px;height: 25px;}.button{font-size:18px;background-color:rgba(128,128,128,0.1);border-radius: 5px;}.button1{margin-left: 180px;width:110px;}.button2{margin-left: 15px;width:55px;} </style>
</head>
<body><form action="#"><fieldset><legend>用户注册页面</legend><h2>用户登录信息</h2><table><tr><td class='name'>用户名</td><td><input type="text" id="txtUserName" autofocus="true" pattern="^[a-zA-Z0-9]{6,}$"><span class='red'>*</span><br /></td></tr><tr><td class='name'>邮箱</td><td><input type="email" required='true'><span class='red'>*</span><br /></td></tr><tr><td class='name'>密码</td><td><input type="password" required='true'><span class='red'>*</span><br /></td></tr><tr><td class='name'>确认密码</td><td><input type="password" required='true'><span class='red'>*<span><br /></td></tr></table><h2>用户基本信息</h2><table><tr><td class='name name1'>性别</td><td><select><option value="boy">男</option><option value="girl">女</option></select><br /></td></tr><tr><td class='name name1'>出生年月</td><td><input type="date"><br /></td></tr><tr><td class='name name1'>住址</td><td><input type="text" name='address'><br /><br /></td></tr> </table> <input class="button button1" type="submit" value="注册新用户"><input class="button button2" type="reset" value="重置"></fieldset></form>
</body>
</html>
- 完成任务
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！