Java Web学习笔记8—

Java Web学习笔记8——表单

表单标签：

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。

标签：<form>

表单项、表单元素：

不同类型的input元素、下拉列表、文本域等。

<input>: 定义表单项、通过type形式控制输入形式。

<select>: 定义下拉列表。

<textarea>：定义文本域。

属性：

action：规定当提交表单时向何处发送表单数据，如URL。

method：规定用于发送表单数据的方式。GET、POST。

get方式：是从服务器中请求数据。

    <!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名：<input type="text" name="username">年龄：<input type="text" name="age"><input type="submit" value="提交"></form>

action：表单提交的URL，就是往什么地方提交数据，如果不指定的话，默认提交到当前页面。

这时，会在URL后面拼接表单数据。比如：?username=chang&age=12。URL的长度是有限制的。

get是默认值。

如果方式是post：也就是提交数据到服务器：

在消息体中传递的，参数大小没有限制。

注意：表单项必须要有name属性才可以提交。

表单项：

<input>：表单项，通过type属性控制输入形式。

<select>：定义下拉列表，<option>定义列表项。

<testarea>：文本域。

<input> 表单项的type属性：

<select>: 下拉列表

文本域：

<!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><!-- value: 表单项提交的值 -->
<form action="" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <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>邮箱: <input type="email" name="email"> <br><br>年龄: <input type="number" name="age"> <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" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>