8.2 HTML表单提交

1.12 HTML表单提交

一、form表单

<form>用于向服务器提交数据，比如账号密码

使用method="get" 提交数据 是常用的提交数据的方式

如果form元素没有提供method属性，默认就是get方式提交数据

get方式的一个特点就是，可以在浏览器的地址栏看到提交的参数，即便是密码也看得到<form method="get" action="http://how2j.cn/study/login.jsp">

action="/study/login.jsp" 表示把账号和密码提交到login.jsp这个页面去

<form action="http://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

注: 这里把数据提交到服务端的login.jsp去了

二、表单元素

<input> 标签很特别，一般是不需要写成<input />或者<input></input> 这样。

2.1<input type="text"> 即表示文本框 、使用属性size、使用属性value、使用属性placeholder 用于背景提示

<input type="text">
<input type="text" size="10">
<input type="text" value="有初始值的文本框">
<input type="text" placeholder="请输入账号">

2.2<input type="password"> 即表示密码框，输入的数据会自动显示为星号

2.3<input type="radio" > 表示单选框，默认选中 <input type="radio" checked="checked" name="activity" value="dota" >

分组即，多个单选框，都在一个分组里，同一时间，只能选中一个单选框 （name相同、value不同）

2.4<input type="checkbox"> 即表示复选框<input type="checkbox" checked="checked"  name="activity" value="tokyohot" >

2.5<select size="2"multiple="multiple"> 即下拉列表 ，需要配合<optionmultiple="multiple">（默认选中）使用

2.6<textarea  cols="30" rows="8"> 即文本域 与文本框不同的是，文本域可以有多行，并且可以有滚动条

三、表单按钮

3.1<input type="button"> 即普通按钮、普通按钮不具备提交form的效果

3.2<input type="submit"> 即为提交按钮 、用于提交form，把数据提交到服务端

3.3<input type="reset"> 重置按钮 可以把输入框的改动复原

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

3.4<input type="image" > 即使用图像作为按钮进行form的提交

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="image" src="http://how2j.cn/example.gif">
</form>

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>

<%
    request.setCharacterEncoding("UTF-8");
    String name = request.getParameter("name");
    String password = request.getParameter("password");

%>

您提交的账号名是 :<%=name%> <br/>
您提交的密码是 :<%=password%>
<br>
<a href="javascript:history.back()">返回</a>

3.5<button></button>即按钮标签

与<input type="button">不同的是，<button>标签功能更为丰富 <button>按钮</button>
按钮标签里的内容可以是文字也可以是图像 <button><img src="http://how2j.cn/example.gif"/></button>
如果button的type=“submit” ，那么它就具备提交form的功能

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
 <button type="submit">登陆</button>
 </form>