<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 表单的重要功能是 要将用户输入的信息提交到服务端 form 属性action 用于定义要提交信息的地址 属性method 对于http请求而言 最常见的请求方式 GET和POST --> <form action="hello.html" method="get"> <!-- 盛放请求所需要的信息/参数 --> <!-- 使用input表示输入框 type代表类型 如果是text 代表文本输入框 --> <!-- 使用name属性 声明输入框的名字 用户名一般使用username --> 用户名 <input type="text" name="username" /> <br /> <!-- 如果input type类型是password 代表密文输入框 输入时会自动显示* --> 密码 <input type="password" name="password" /> <br /> <!-- radio代表单选框类型 --> <!-- 如果希望某一项默认被选中 那么增加属性 checked --> <input type="radio" name="sex" value="1" /> 男 <input type="radio" name="sex" value="0" checked="checked"/> 女 <!-- 此时没有区分出要选择的数据 --> <!-- http://127.0.0.1:5500/hello.html?username=12&password=12&sex=on --> <!-- 如果设定了value值 那么可以传输出去 --> <!-- http://127.0.0.1:5500/hello.html?username=12&password=12&sex=1 --> <br /> <br /> <!-- checkbox代表复选框类型 --> <!-- 当属性名和属性值相同时 可以简写 --> <input type="checkbox" name="city" value="Beijing" checked/> 北京 <input type="checkbox" name="city" value="Harbin" checked="checked"/> 哈尔滨 <input type="checkbox" name="city" value="Shanghai"/> 上海 <input type="checkbox" name="city" value="Guangzhou"/> 广州 <input type="checkbox" name="city" value="Shenzhen"/> 深圳 <br /> <br /> 喜欢的运动是 <!-- 下拉框 select --> <select name="interest"> <option value="running">跑步</option> <option value="swimming">游泳</option> <option value="shooting">射击</option> <option value="null" selected="selected">--请选择--</option> </select> <br /> <br /> <input type="submit" value="登录" /> <input type="reset" value="重置" /> </form> </body> </html>