【javaweb】day4 - 技术栈

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&degree=1&description=1