Document

html学习笔记，登陆表单

2024-03-28
dfer
280
html 学习笔记 CSDN

<div id="loginDiv">
    <form action="<%=baseUrl%>/loginServlet" method="post" id="form">
        <h1 id="loginMsg">用户登录</h1>
        <p>用户名:<input id="username" name="username" type="text" autocomplete="off"></p>

        <p>密码:<input id="password" name="password" type="password" autocomplete="off"></p>

        <div id="subDiv">
            <input type="submit" class="button" value="登陆">
            <input type="reset" class="button" value="重置">&nbsp;&nbsp;&nbsp;
            <a href="register.jsp">没有账号？点击注册</a>
        </div>
    </form>
</div>

介绍

这段代码是一个HTML表单，通常用于Web页面上实现用户登录功能
它包含了两个输入字段，让用户输入用户名和密码，
以及两个按钮，分别用于提交表单和重置表单内容
还有一个链接供用户在没有账号时跳转到注册页面。
里面用到的JSP表达式 <%=baseUrl%> 用于动态生成表单提交的URL，确保无论应用部署在哪里，表单的action总是指向正确的路径。
action 属性定义了表单提交（即用户点击登录按钮）后数据发送的目的地。
这里使用了JSP表达式 <%=baseUrl%>/loginServlet 来确定提交的URL

<!-- 登录表单的容器 -->
<div id="loginDiv">
    <!-- 表单标签，设置提交至服务器端处理逻辑（如loginServlet）的URL路径 -->
    <form action="<%=baseUrl%>/loginServlet" method="post" id="form">
        <!-- 登录信息提示 -->
        <h1 id="loginMsg">用户登录</h1>
        
        <!-- 用户名输入区域，使用autocomplete="off"避免自动填充 -->
        <p>用户名:<input id="username" name="username" type="text" autocomplete="off"></p>

        <!-- 密码输入区域，使用autocomplete="off"避免自动填充，类型为password使输入内容被隐藏 -->
        <p>密码:<input id="password" name="password" type="password" autocomplete="off"></p>

        <!-- 提交按钮和重置按钮的容器 -->
        <div id="subDiv">
            <!-- 提交表单的按钮，用于将用户信息发送至服务器 -->
            <input type="submit" class="button" value="登陆">
            
            <!-- 重置按钮，用于清空表单输入的内容 -->
            <input type="reset" class="button" value="重置">&nbsp;&nbsp;&nbsp;
            
            <!-- 链接到注册页面的链接，为没有账号的用户提供注册入口 -->
            <a href="register.jsp">没有账号？点击注册</a>
        </div>
    </form>
</div>

<%=baseUrl%>/loginServlet 这个路径是在JSP（JavaServer Pages）页面中使用的一种表达式，用于动态构建向服务器端loginServlet的URL路径。这里，baseUrl是一个变量，它通常在后端Java代码中被赋值，代表应用的基础URL，而loginServlet是处理登录请求的Servlet的路径。通过这种方式，可以灵活地指定请求的目标地址，而不需要硬编码完整的URL路径，这样做的好处是增加了代码的可维护性和灵活性。

解释

<%= … %>：这是JSP中的表达式脚本let，用于输出Java代码执行的结果。在JSP页面被请求时，包含在<%= %>中的代码会被执行，其结果会被转换成字符串，并插入到HTML输出流中。
baseUrl：这是一个变量，它应该在某个地方（比如Servlet中）被设置，并且存储了当前Web应用的根URL。例如，如果你的Web应用部署在http://www.example.com/myapp，那么baseUrl的值可能就是/myapp。这样，不管应用部署的具体路径是什么，都可以使用baseUrl来构建正确的相对路径。
/loginServlet：这是Servlet的路径，它定义了处理登录请求的服务器端组件的位置。当表单被提交时，浏览器会将请求发送到这个路径，Servlet容器（如Tomcat）会根据配置找到对应的Servlet类，并调用它来处理请求。

示例

假设baseUrl被设置为/myapp，那么<%=baseUrl%>/loginServlet将会解析成/myapp/loginServlet。如果你的Web应用部署在http://www.example.com，那么完整的请求URL将会是http://www.example.com/myapp/loginServlet。

这种动态构建路径的方法使得JSP页面更加灵活，易于适应不同的部署环境，而无需每次部署时都修改硬编码的URL路径。

这里面的id是干啥的

在HTML和Web开发中，id属性是用来为元素提供一个唯一的标识符。通过使用id，开发者可以在CSS、JavaScript或其他Web技术中精确地引用和操作这个特定的元素。每个id的值在一个HTML文档中必须是唯一的，这意味着没有两个元素可以有相同的id值。这里是id属性的一些常见用途：

CSS样式应用

在CSS中，你可以使用#符号后跟元素的id值来定义针对该元素的样式规则。这使得你能够精确地控制页面上特定元素的外观和布局。

#loginDiv {
    border: 1px solid #ccc;
    padding: 20px;
    width: 300px;
}

#loginMsg {
    color: blue;
}

上述CSS样式会将一个具有id="loginDiv"的元素的边框设置为1px宽的灰色实线，内边距为20px，宽度为300px，并将具有id="loginMsg"的元素的文本颜色设置为蓝色。

JavaScript操作和事件处理

在JavaScript中，id属性允许你通过document.getElementById方法获取对应的DOM（Document Object Model）元素，并对其进行操作，例如改变其内容、样式或响应用户事件。

document.getElementById("loginMsg").innerHTML = "请登录";

上述JavaScript代码会找到id为loginMsg的元素，并将其内容更改为“请登录”。

锚点（Anchor）导航

id属性也可用于创建页面内的锚点，允许链接直接导航到页面上的特定部分。这是通过在URL后加上#和元素的id值来实现的。

<a href="#loginDiv">跳转到登录表单</a>

实现页面内滚动

上述链接会使浏览器滚动到id为loginDiv的元素处。

综上所述，id属性是Web开发中一个非常重要的特性，它提供了一种方式来唯一标识页面上的元素，从而使得样式应用、元素操作和内部导航变得简单而精确。

getParameter()

getParameter 方法是在Java Servlet中用来从请求中获取参数值的一个方法。这个方法属于HttpServletRequest对象，当处理HTTP请求时，你可以使用这个方法来获取客户端通过表单提交的数据或者是通过查询字符串（URL中?后面的部分）传递的数据。

语法

String getParameter(String name)

参数：name - 你想获取的参数的名称。
返回值：返回与参数名称对应的字符串值。如果请求中没有该参数，则返回null。

使用示例

假设你有一个HTML表单，用户可以通过它提交他们的姓名和电子邮件：

<form action="submitForm" method="get">
    姓名: <input type="text" name="name">
    电子邮件: <input type="email" name="email">
    <input type="submit" value="提交">
</form>

当用户填写此表单并提交后，表单的数据会被发送到服务器上的submitForm Servlet。在这个Servlet中，你可以使用getParameter方法来获取用户输入的姓名和电子邮件：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取表单中用户输入的姓名和电子邮件
    String name = request.getParameter("name");
    String email = request.getParameter("email");

    // 做一些处理，比如验证数据或者保存到数据库
    // ...

    // 设置响应类型和编码
    response.setContentType("text/html;charset=UTF-8");
    
    // 向客户端发送响应
    PrintWriter out = response.getWriter();
    out.println("<html><body>");
    out.println("<h1>欢迎, " + name + "</h1>");
    out.println("<p>我们已收到您的电子邮件地址: " + email + "</p>");
    out.println("</body></html>");
}

在这个例子中，request.getParameter("name")和request.getParameter("email")分别用于获取表单中用户输入的姓名和电子邮件地址。这些值随后可以用于处理用户请求，例如进行验证、存储到数据库或者生成响应输出。

注意事项

当处理POST请求时，应该在doPost方法中使用getParameter方法。对于GET请求，则在doGet方法中使用。
如果请求中包含了多个相同名称的参数（通常发生在使用复选框时），你应该使用getParameterValues方法来获取所有的值。
由于getParameter方法返回的是String类型，如果你需要将参数值转换为其他类型（如整型、布尔型等），需要手动进行转换。

<form action="..."> 属性在HTML表单（<form>元素）中定义了当表单提交时，表单数据应当发送到的URL。简而言之，它告诉浏览器提交表单时，将表单内容发送到哪里去。这个URL可以是你的服务器上的一个页面，也可以是处理表单数据的服务器端脚本（如Servlet、PHP脚本、ASP.NET页面等）。

用法示例

<form action="submitForm" method="post">
  用户名: <input type="text" name="username"><br>
  密码: <input type="password" name="password"><br>
  <input type="submit" value="提交">
</form>

在这个例子中：

当用户填写完表单并点击提交按钮时，浏览器会将表单中的数据发送到相对URL submitForm 指向的位置。
method="post" 指定了数据应该如何发送。在这里，使用POST方法意味着数据将在请求体中发送，不会出现在URL中，这通常用于提交需要保密的信息。

不同的提交方式

GET：如果设置method="get"，表单数据会附加在action属性指定的URL之后，以查询字符串的形式发送。这种方式适用于非敏感数据的搜索或过滤请求。
POST：推荐用于提交表单，尤其是包含敏感信息（如密码）时，因为数据不会显示在URL中，对数据长度也没有限制。

动态和绝对URL

相对URL：如action="submitForm"，这表示提交的URL是相对于当前页面或应用的根路径。
绝对URL：如action="http://example.com/submitForm"，无论当前页面在哪里，表单总是提交到指定的完整URL。

不设置action属性

如果不设置action属性，表单将提交到当前页面的URL。这在你想让页面自处理表单数据时很有用，比如刷新当前页面或显示提交的表单数据。

总结

<form action="..."> 属性是HTML表单的核心之一，定义了用户输入数据提交到服务器的具体位置，根据不同的需求选择合适的提交方法（GET或POST）和目标URL（动态或绝对路径）是实现表单功能的关键步骤。

上一篇：纯html的塔罗牌

下一篇： postcss安装和