HTML学习(二) 表单的制作习作
程序员文章站
2023-12-21 18:12:58
...
表单的制作练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>form表单</title><style>div{width: 300px;height: 510px;border: 1px solid #a8c6ea;margin: 20px auto;line-height: 35px;padding: 20px 20px;}label:first-child {font-weight: bolder;font-size: 16px;}</style></head><body><div><form action="#"><label>用户注册</label><br>账号: <input name="user" type="text" placeholder="不超过八个字母"><br>密码: <input name="pasWd" type="password" placeholder="6-16个字符"><br>邮箱: <input name="e-mail" type="email" placeholder="example@mail.com"><br>年龄: <input name="eg" type="text" style="width: 30px"><br>生日: <input name="year" type="date"><br>课程: <select><option value="1">HTML5</option><option value="2">CSS</option><option value="2">JavaScript</option><option value="2">PHP</option></select><br>爱好:<label><input name="aiHao" type="checkbox" value="">打游戏</label><label><input name="aiHao" type="checkbox" value="">看电影</label><label><input name="aiHao" type="checkbox" value="">撸代码</label><br>性别:<label><input name="sex" type="radio">男</label><label><input name="sex" type="radio">女</label><label><input name="sex" type="radio">保密</label><br>简介: <textarea name="" id="" cols="30" rows="10"></textarea><br><input type="submit" name="tiJiao" value="提交"><input type="button" name="ajax" value="Ajax"></form></div></body></html>
效果图如下