实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单提交</title> </head> <body> <h style="font-size: 30px">用户调查表单</h> <br> <br> <br> <form action="" method="get" name="register"> <p> <!--label中的for属性值与input中的id属性值一致 autofocus自动获取焦点 --> <label for="username" style="font-size: 20px">用户:</label> <input type="text" id="username" name="username" placeholder="中文名字" autofocus> </p> <p> <lable for="password" style="font-size: 20px">密码:</lable> <input type="password" id="password" name="password" placeholder="字母和数字组成" autofocus> </p> <p> <lable for="birthday">生日:</lable> <input type="date" id="birthday" name="birthday" placeholder="年/月/日" autofocus> </p> <p> <lable for="email">邮箱:</lable> <input type="email" id="email" name="email" placeholder="email@qq.com" autofocus> </p> <p> <lable for="age">年龄:</lable> <input type="number" id="age" name="age" placeholder="" min="10" autofocus> </p> <p> <lable for="traffic">交通工具:</lable> <select name="traffic" id="traffic" size="1"> <optgroup label="方式"> <option value="0">步行</option> <option value="1">乘车</option> <option value="2">开车</option> </optgroup> <optgroup label="其他"> <option value="4">跑步</option> <option value="5">慢行</option> </optgroup> </select> </p> <p> <lable for="interest">兴趣:</lable> <input type="checkbox" id="interest" name="interest[]" value="interest"> <lable for="interest">玩耍</lable> <input type="checkbox" id="game" value="game" name="game[]"> <lable for="game">玩游戏</lable> <input type="checkbox" name="play[]" id="play" value="play"> <label for="play">打</label> </p> <p> <lable for="sex">性别:</lable> <input type="radio" id="sex" name="sex" value="sex"> <lable for="sex">男</lable> <input type="radio" id="girl" name="sex" value="girl"> <lable for="girl">女</lable> </p> <p> <lable for="comment">简介</lable> <textarea name="comment" id="comment" cols="30" rows="10" placeholder="请输入您的简介"></textarea> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> <button>提交3</button> <button type="submit">提交1</button> <button type="button">提交4</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
