制作一个html文件效果图如下

<style>
   body{background-color:blue}
    .center table{text-align:center;font-size:16px;font-family:KaiTi;color:#f00;width:320px;margin:0 auto}
    .submit{border-top:solid 1px gray;border-left:solid 1px gray;border-bottom:solid 1px #000;border-right:solid 1px #000;background-color:blue;color:#fff}
    input{outline:none}
    input[type=text]:focus{border:solid 1px green}
</style>
<div class="center">
    <form onsubmit="return check(this)" style="text-align:center">
        <table border="1" cellpadding="10">
            <tr><td>用户名</td><td><input type="text" name="name" /></td></tr>
            <tr><td>性别</td><td><select name="sex"><option value="男">男</option><option value="女">女</option></select></td></tr>
            <tr><td>密码</td><td><input type="password" name="pwd" /></td></tr>
            <tr><td>确认密码</td><td><input type="password" name="cpwd" /></td></tr>
            <tr><td colspan="2"><input type="submit" class="submit" value="提交" /></td></tr>
        </table>
    </form>
</div>
<script>
    function check(f) {
        if (f.name.value == '') { alert('用户名不能为空！'); f.name.focus(); return false; }
        if (f.pwd.value == '') { alert('密码不能为空！'); f.pwd.focus(); return false; }
        if (f.cpwd.value == '') { alert('确认密码不能为空！'); f.cpwd.focus(); return false; }
        if (f.cpwd.value != f.pwd.value) { alert('密码和确认密码不一致！'); f.cpwd.focus(); return false; }
    }
</script>

帮助到你能点个采纳吗，谢谢~

这个主要用到HTML+CSS ，稍微写写就可以搞定！

form表单加table布局

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps: 问答会员年卡【8折】购 ，限时加赠IT实体书，即可 享受50次 有问必答服务，了解详情>>>https://t.csdnimg.cn/RW5m