1.flex弹性布局:这个是一维布局,就是说只能横着或竖着布局(默认横向)
首先display:flex定义弹性布局 再接着使用属性进行布局
2.post提交方式:
get提交方式:
3.表单项的标签其实就只有三个,分别是:
<input>: 表单项 , 通过type属性控制输入形式。<select>: 定义下拉列表,<option>定义列表项<textarea>: 文本域
今天复习了这些。
<!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>HTML-表单项标签</title> </head> <body> <form action="/save" method="post"> 姓名:<input type="text" name="name"><br><br> 密码:<input type="password" name="password"><br><br> 性别:<input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="2">女 <br><br> 爱好:<input type="checkbox" name="hobby" value="1">足球 <input type="checkbox" name="hobby" value="2">篮球 <input type="checkbox" name="hobby" value="3">跑步 <br><br> 图像:<input type="file" name="image"><br><br> 生日:<input type="date" name="birthday"><br><br> 时间:<input type="time" name="time"><br><br> 日期时间:<input type="datetime-local" name="datetime"><br><br> 学历: <select name="degree"> <option value="">-------------- 请选择 --------------</option> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> <option value="4">博士</option> </select> <br><br> 描述:<textarea name="description" id="" cols="30" rows="10"></textarea> <br><br> <input type="button" value="按钮"> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html>如果增强用户体验感,可加入label标签,如下:
性别: <label><input type="radio" name="gender" value="1">男</label> <label><input type="radio" name="gender" value="2">女</label> <br><br> 爱好: <label><input type="checkbox" name="hobby" value="1">足球</label> <label><input type="checkbox" name="hobby" value="2">篮球</label> <label><input type="checkbox" name="hobby" value="3">跑步</label> <br><br>可以查看我们提交的数据:
get:
file:///E:/save?name=1&password=1&gender=2&hobby=1&hobby=2&image=微信图片_20260729000225_150_1.jpg&birthday=2026-09-16&time=08%3A09&datetime=2026-09-16T08%3A09°ree=1&description=1