html的练习之用户注册表单

叫我小方就好

已于 2022-09-05 13:03:23 修改

阅读量2.5k

点赞数 3

文章标签： html servlet 前端

于 2022-09-05 12:57:08 首次发布

本文链接：https://blog.csdn.net/weixin_51232274/article/details/126702669

版权

这是最终效果图，具体实现代码在下面，一些注意点在代码里有注释，对是新手学习html基础比较友好。本人刚接触前端学习，这里当作作业的练习，不足之处，欢迎交流，共同进步！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册表单</title>
</head>
<body>
    <!--
        用户注册：
            用户名
            密码
            确认密码
            性别
            兴趣爱好
            学历
            简介
    -->
    <!--
    form表单method属性：
        get：采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上
        post：采用post方式提交的时候，用户信息不会显示在浏览器地址栏上
        当用户提交的信息中含有敏感信息，例如：密码，建议采用post方式提交

        method属性不指定时，默认的是get请求
    -->
     <!--这里的http://192.168.111.3:8080/jd/register没有实际意义，仅当作练习使用-->
     <form action="http://192.168.111.3:8080/jd/register" method="post">
        用户名<input type="text" name="username"><br>
        密码<input type="password" name="userpwd"><br>
        确认密码<input type="password">
        性别<input type="radio" name="gender" value="1" checked>男
        <!--单选按钮的value必须手动指定，这里name后面的值必须相同，否则性别选项不是单选，
           value值不能相同，数字或者字母没有实际意义哦，可根据自己喜欢设置-->
            <input type="radio" name="gender" value="0">女<br>
        兴趣爱好<input type="checkbox" name="interest" value="smoking" checked>抽烟
                <input type="checkbox" name="interest" value="driking">喝酒
                <input type="checkbox" name="interest" value="hotHead">烫头<br>
        学历
        <select name="grade" >
            <option value="gz" selected>高中</option>  <!--默认选中-->
            <option value="dz">大专</option>
            <option value="bk">本科</option>
            <option value="yjs">研究生</option>
        </select>
        <br>
        简介<br> <!--文本域：文本域没有value属性，用户填写的内容就是value-->
        <textarea  cols="30" rows="10" name="introduce"></textarea>
        <br>
        <input type="submit" value="注册">
        <input type="reset" value="清空">
    </form>
</body>
</html>