表单:表单就是提交数据的
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 地址,请求成功会进入下图
不成功:用户名、密码与常量做了判断,展示在上一附图页,给用户错误提示