这是最终效果图,具体实现代码在下面,一些注意点在代码里有注释,对是新手学习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>