Java Web学习笔记8——表单

发布于:2024-06-06 ⋅ 阅读:(102) ⋅ 点赞:(0)

表单标签:

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

标签:<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>

<label>   标签: 点击按钮和文字,都是可以被选中的。

hidden:隐藏域。以后看看实际中有什么应用。


网站公告

今日签到

点亮在社区的每一天
去签到