常用表单示例
发布于：2022-07-07 13:11:01 栏目：技术文档
<!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 action="" method="post"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="" placeholder="至少8位" autofocus required> </div> <div> <label for="pwd">密 码：</label> <input type="password" id="pwd" name="password" value="" placeholder="数字+字母" required> </div> <div> <label for="my-email">邮 箱：</label> <input type="email" id="my-email" name="email" value="" placeholder="123@qq.com" required> </div> <!-- *单选按钮 --> <div> <label for="male">性别：</label> <input type="radio" name="gender" id="male" checked/><label for="male">男</label> <input type="radio" name="gender" id="female"/><label for="female">女</label> </div> <!-- *复选框 --> <div> <label for="">爱好</label> <input type="checkbox" name="hobbies[]" id="1" checked/><label for="1">游戏</label> <input type="checkbox" name="hobbies[]" id="2" checked/><label for="2">编程</label> <input type="checkbox" name="hobbies[]" id="3" /><label for="3">摄影</label> </div> <!-- *下拉列表 --> <!-- *select.name,option.value,name,value属性不在同一个标签中 --> <label for="user">会员：</label> <select name="user" id="user"> <option value="1">金牌会员</option> <option value="2">银牌会员</option> <option value="3" selected>铜牌会员</option> <option value="4">木牌会员</option> </select> <div> <button>提交</button> </div> </form></body></html>
效果图如下：
相关推荐
阅读 +
