qq登录代码:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>QQ注册</title> </head> <body> <form style="background-color: aliceblue; width: 600px;height: 700px;border: 1px solid gainsboro;margin: auto;"> <p style="color: grey;margin-left: 50px;"> 注册账号 </p> <hr width="500px" align="center" color="gainsboro"/> <a style="margin-left: 100px;"> 昵称: </a> <input type="text" style="width: 200px; height: 25px;border-color: aliceblue; border-radius: 5px;margin-top: 20px;"/> <a style="font-size: 12px;margin-left: 20px;color: darkgray;"> 请输入昵称 </a> <br /> <a style="margin-left: 100px;"> 密码: </a> <input type="password" style="width: 200px; height: 25px;border-color: aliceblue; border-radius: 5px;margin-top: 20px;"/> <br /> <a style="margin-left: 68px;"> 确认密码: </a> <input type="password" style="width: 200px; height: 25px;border-color: aliceblue; border-radius: 5px;margin-top: 20px;"/> <br /> <a style="margin-left: 100px;"> 性别: </a> <input type="radio" name="sex" value="0" id="boy" style="margin-top: 20px;"/> <label for="boy">男</label> <input type="radio" name="sex"value="1" id="girl" style="margin-top: 20px;"/> <label for="girl">女</label> <br /> <a style="margin-left: 100px;"> 生日: </a> <select style="margin-top: 20px;"> <option> 公历 </option> </select> <select > <option> 年 </option> </select> <select > <option> 月 </option> </select> <select > <option> 日 </option> </select> <br /> <a style="margin-left: 100px;"> 所在地: </a> <select style="margin-top: 20px;"> <option> 中国 </option> </select> <select > <option> 湖北 </option> </select> <select > <option> 武汉 </option> </select> <br /> <a style="margin-left: 75px;"> 手机号码: </a> <input type="text" style="width: 170px; height: 25px;border-color: aliceblue; border-radius: 5px;margin-top: 20px;"/> <br /> <p style="margin-left: 100px;font-size: 12px;color: darkgray;"> 可通过该手机号码快速找回密码 </p> <a style="margin-left: 100px;font-size: 12px;color: darkgray;"> 中国大陆地区以外手机号码 </a> <a href="#" style="text-decoration: none;font-size: 10px;"> 点击这里 </a> <br /> <input type="button" value="立即注册" style="background-color: forestgreen;width: 260px; height: 50px;border-radius: 10px;margin-left:100px;margin-top: 20px;color: white;"/> <br /> <input type="checkbox" style="margin-left: 100px;margin-top: 20px;" /><a style="font-size: 10px;"> 同时开通QQ空间 </a> <br /> <input type="checkbox" style="margin-left: 100px;margin-top: 10px;"/><a style="font-size: 10px;"> 我已阅读并同意相关服务条款和隐私政策 </a> <select style="border: 0px;color: cadetblue;background-color: aliceblue;"> </select> </form> </body></html>
整理记录:
<input />标签,里面可以设置type={
text 显示文字
passwo 隐藏文字
radio 圆形选择按钮 name相同时,二选一,<lable for=id值>可在文字上点击<lable>
button按钮,设置value值是里面的内容,也可用<button></button>
checkbox 方形选择框,多用于多选项
hidden 隐藏域,给程序员看
reset 归零
}
<select><option>武汉(下拉的选择框)multiple=multiple多选项,selected=selected默认选中</option></select>
<textarea></textarea>可以拉伸的文字框,clos=列数,rows-行数
表单属性 action:主要作用是规定表单提交的动作 提到到服务器上处理的URL 默认值:提交到本页 method:指表单数据提交的方式 get 默认值 数据提交的大小限制 2kb 显示提交 用户数据可以显示在地址栏 适用场合:向服务器要数据时 post 数据提交的大小不受限制 隐式提交 提交的数据非专业人士看不见 适用场合:向服务器提交数据时
转载于:https://www.cnblogs.com/awei313558147/p/11180684.html
