前端form表单

表单：表单就是提交数据的
form表单的属性：
1 action：要跳转的目标路径
2 accept-charset：规定服务器用哪种编码格式处理本表单所上传的数据编码格式；一般用“UTF-8”、“ISO-8859-1"、"gb2312"等
3 method：只有get、post两种方法；不指定时默认是get方法
3.1 get：提交数据量较小、安全性要求不是很高的数据
get请求会将表单的元素（就是实体类的属性）写入链接中
3.2 post：提交数据量大、安全性要求比较高的数据，上传文件只能用post
4 autocomplete：是否开启联想功能，默认是开启状态
5 enctype：媒体类型；发送到服务器之前应该如何对表单数据进行编码
5.1 application/x-www-form-urlencoded：默认编码，不涉及文件传输用这个就够了
5.2 multipart/form-data，这种编码类型不对字符编码，数据通过二进制的形式传送到服务器端，上传文件、MP3、MP4、视频、图片…
5.3 text/plain，将内容设置为纯文本的形式
6 target：与a标签相似，用的多的就是第一个
6.1 _blank：打开一个新页面浏览数据
6.2 _self：这个标签一般不用，忽略
6.3 _parent：这个标签也是很少用，忽略
6.4 _top：目标将会清除所有被包含的框架并将文档载入整个浏览器窗口
7 name：也是一个不经常用的属性
8 Novalidate：属性规定当提交表单时不对其进行验证

form表单的元素

 姓名：<input type="text" name="userName" maxlength="10" placeholder="请输入用户名" autocomplete="off" required/>

1 input：输入框
1.1 type：类型 默认为text
1.1.1 text：文本类型
1.1.2 password：密码类型
1.1.3 checkbox：复选框（多选）
1.1.4 radio：单选（有默认值）
1.1.5 submit：提交
1.1.6 reset：重置
1.1.7 file：文件
1.1.8 hidden：隐藏
1.1.9 image：图片
1.2.0 button：按钮
1.2 name：指定该input元素的名称，也可以指定其他元素
1.3 value：元素的初始值，type为radio时必须指定一个值
1.4 size：指定表单元素的初始宽度
当type=text、password时，表单元素的大小以字符为单位
其他类型时，以像素为单位
1.5 maxlength：type=text、password时输入的最大字符数
1.6 checked：type=radio、checkbox，指定按钮是否被选中
1.7 placeholder：文本框中的隐性提示（灰色字体的提示）
1.8 required：规定文本框内容不能为空

<select name="city">
                <option value="HongKong">HongKong</option>
                <option value="Seoul">Seoul</option>
                <option value="Tokyo">Tokyo</option>

2 select：下拉框
2.1 name：下拉框元素名称
2.2 option：用单选标签定义下拉框选项，value写在标签了
3 表格

table代表单元格，tr、td不分大小写
一对<tr>代表一行
一对<td>代表一个单元格

<table>
			<tr>
	 				<td>
	 				</td>
			</tr>
</table>

创建一个/my/myIndex.ftl表单，提交路径是/test/submitTest 文本框做了隐性提示填写、判空处理、姓名、密码文本框做了长度限制处理、单选做了默认选择处理

<form accept-charset="UTF-8"
  action="/test/submitTest"
  autocomplete="off"
  method="post">
<table>
    <tr>
        <td>
            姓名：<input type="text" name="userName" maxlength="10" placeholder="请输入用户名" autocomplete="off" required/>
        </td>
    </tr>
    <tr>
        <td>
            密码：<input type="password" name="password" maxlength="20" placeholder="请输入密码" autocomplete="off" required/>
        </td>
    </tr>
    <tr>
        <td>
            姓别：
            <input type="radio" name="sex" value="1" checked/>男
            <input type="radio" name="sex" value="0"/>女
        </td>
    </tr>
    <tr>
        <td>
            偏好：
            <input type="checkbox" name="Interest" value="Music">音乐
            <input type="checkbox" name="Interest" value="motion">运动
            <input type="checkbox" name="Interest" value="travel">旅行
        </td>
    </tr>
    <tr>
        <td>
            邮箱：
            <input type="email" name="email" placeholder="请输入邮箱地址">
        </td>
    </tr>
    <tr>
        <td>
            居住地：
            <select name="city">
                <option value="HongKong">HongKong</option>
                <option value="Seoul">Seoul</option>
                <option value="Tokyo">Tokyo</option>
        </td>
    </tr>
    <tr>
        <td>
            <span style="color: red">${message!}</span>
        </td>
    </tr>
    <tr>
        <td>

            <input type="reset" name="reset" value="重置">
            <input type="submit" name="submit" value="提交">
        </td>
    </tr>
</table>
</form>

表单提交的页面是/my/submit.ftl文件中写：表单提交成功，进入本页面

创建一个实体类，该类的属性与表单中元素的那么一定要一一对应

import lombok.Data;
@Data
public class MyUser {
    private String userName;
    private String password;
    private char sex;
    private String Interest;
    private String email;
    private String city;
}

请求的路径controller

import com.longteng.lesson2.my.myuser.MyUser;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/test")
public class SpringBootTest {
private final String NAME="qwer";
private final String PASSWORD="1234";
@RequestMapping("/formTest")
public ModelAndView formTest() {
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("/my/myIndex");
    return modelAndView;
}



@RequestMapping("/submitTest")
public ModelAndView submitTest(MyUser myUser){
    ModelAndView modelAndView=new ModelAndView();
    String name=myUser.getUserName();
    String password=myUser.getPassword();
    if (name.equalsIgnoreCase(NAME)&&password.equalsIgnoreCase(PASSWORD)){
        modelAndView.setViewName("/my/submit");
    }else {
        modelAndView.addObject("message", "姓名或密码错误");
        modelAndView.setViewName("/my/myIndex");
    }
    return modelAndView;
}
}

请求 http://127.0.0.1:8080/test/formTest 请求到表单页，如下图

该页面提交到 http://127.0.0.1:8080/test/submitTest 地址，请求成功会进入下图
不成功：用户名、密码与常量做了判断，展示在上一附图页，给用户错误提示